🚚 R3f first application

davidevignozzi · davidevignozzi · commit ec9c7dfd2e6a · 2024-01-26T15:10:26.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-node_modules
+.vercel
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "react": "18.2",
-    "react-dom": "18.2"
+    "react-dom": "18.2",
+    "@react-three/fiber": "^8.15.8",
+    "three": "^0.158.0"
   }
-}
+}
diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/Clicker.jsx b/src/Clicker.jsx
diff --git a/src/CustomObject.jsx b/src/CustomObject.jsx
@@ -0,0 +1,36 @@
+import { useEffect, useRef, useMemo } from 'react'
+import * as THREE from 'three'
+
+export default function CustomObject()
+{
+    const geometryRef = useRef()
+
+    const verticesCount = 10 * 3
+
+    const positions = useMemo(() =>
+    {
+        const positions = new Float32Array(verticesCount * 3)
+        
+        for(let i = 0; i < verticesCount * 3; i++)
+            positions[i] = (Math.random() - 0.5) * 3
+
+        return positions
+    }, [])
+
+    useEffect(() =>
+    {
+        geometryRef.current.computeVertexNormals()
+    }, [])
+
+    return <mesh>
+        <bufferGeometry ref={ geometryRef }>
+            <bufferAttribute
+                attach="attributes-position"
+                count={ verticesCount }
+                itemSize={ 3 }
+                array={ positions }
+            />
+        </bufferGeometry>
+        <meshStandardMaterial color="red" side={ THREE.DoubleSide } />
+    </mesh>
+}
diff --git a/src/Experience.jsx b/src/Experience.jsx
@@ -0,0 +1,51 @@
+import { useThree, extend, useFrame } from '@react-three/fiber'
+import { useRef } from 'react'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import CustomObject from './CustomObject.jsx'
+
+extend({ OrbitControls })
+
+export default function Experience()
+{
+    const { camera, gl } = useThree()
+
+    const cubeRef = useRef()
+    const groupRef = useRef()
+
+    useFrame((state, delta) =>
+    {
+        // const angle = state.clock.elapsedTime
+        // state.camera.position.x = Math.sin(angle) * 8
+        // state.camera.position.z = Math.cos(angle) * 8
+        // state.camera.lookAt(0, 0, 0)
+
+        cubeRef.current.rotation.y += delta
+        // groupRef.current.rotation.y += delta
+    })
+
+    return <>
+        <orbitControls args={ [ camera, gl.domElement ] } />
+
+        <directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
+        <ambientLight intensity={ 1.5 } />
+
+        <group ref={ groupRef }>
+            <mesh position-x={ - 2 }>
+                <sphereGeometry />
+                <meshStandardMaterial color="orange" />
+            </mesh>
+
+            <mesh ref={ cubeRef } rotation-y={ Math.PI * 0.25 } position-x={ 2 } scale={ 1.5 }>
+                <boxGeometry />
+                <meshStandardMaterial color="mediumpurple" />
+            </mesh>
+        </group>
+
+        <mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
+            <planeGeometry />
+            <meshStandardMaterial color="greenyellow" />
+        </mesh>
+
+        <CustomObject />
+    </>
+}
diff --git a/src/People.jsx b/src/People.jsx
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
     <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>42 - First React Application</title>
+    <title>43 - First React Three Fiber Application</title>
 </head>
 <body>
     <div id="root"></div>
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,11 +1,25 @@
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
+import './style.css'
+import ReactDOM from 'react-dom/client'
+import { Canvas } from '@react-three/fiber'
+import Experience from './Experience.jsx'
+import * as THREE from 'three'
 
-const root = createRoot(document.querySelector('#root'))
+const root = ReactDOM.createRoot(document.querySelector('#root'))
 
 root.render(
-    <App clickersCount={ 3 }>
-        <h1>My First React App</h1>
-        <h2>And a fancy subtitle</h2>
-    </App>
+    <Canvas
+        gl={ {
+            antialias: true,
+            toneMapping: THREE.ACESFilmicToneMapping,
+            // outputColorSpace: THREE.SRGBColorSpace
+        } }
+        camera={ {
+            fov: 45,
+            near: 0.1,
+            far: 200,
+            position: [ 3, 2, 6 ]
+        } }
+    >
+        <Experience />
+    </Canvas>
 )
diff --git a/src/style.css b/src/style.css
@@ -1,6 +1,12 @@
-.purpleSquare
+html,
+body,
+#root
 {
-    width: 200px;
-    height: 200px;
-    background-color: mediumpurple;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: LightSkyBlue;
 }
