First commit

2022-03-12 18:29:49 -07:00
parent 2b0a031e84
commit 7f7415e48e
10 changed files with 406 additions and 0 deletions
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -0,0 +1,39 @@
+import '../styles/styles.scss';
+import { useRef, useState } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+
+const Box = (props) => {
+  // This reference gives us direct access to the THREE.Mesh object
+  const ref = useRef()
+  // Hold state for hovered and clicked events
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
+  // Return the view, these are regular Threejs elements expressed in JSX
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={(event) => click(!clicked)}
+      onPointerOver={(event) => hover(true)}
+      onPointerOut={(event) => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+};
+
+const App = () => {
+  return (
+    <Canvas>
+      <ambientLight />
+      <pointLight position={[10, 10, 10]} />
+      <Box position={[-1.2, 0, 0]} />
+      <Box position={[1.2, 0, 0]} />
+    </Canvas>
+  );
+};
+
+export default App;
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -0,0 +1,10 @@
+import { render } from 'react-dom';
+import App from '../components/App';
+
+render(
+    <App />,
+   document.getElementById("root") );
+
+if (module['hot']) {
+  module['hot'].accept();
+}
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -0,0 +1,3 @@
+main {
+  background-color: black;
+}
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <main id="root"></main>
+</body>
+</html>