🚚 Drei

davidevignozzi · davidevignozzi · commit 44d98ec344cc · 2024-01-26T15:13:21.000+01:00
diff --git a/package.json b/package.json
@@ -12,9 +12,10 @@
     "vite": "^4.5.0"
   },
   "dependencies": {
+    "@react-three/drei": "^9.88.7",
+    "@react-three/fiber": "^8.15.8",
     "react": "18.2",
     "react-dom": "18.2",
-    "@react-three/fiber": "^8.15.8",
     "three": "^0.158.0"
   }
-}
+}
diff --git a/public/bangers-v20-latin-regular.woff b/public/bangers-v20-latin-regular.woff
diff --git a/src/CustomObject.jsx b/src/CustomObject.jsx
diff --git a/src/Experience.jsx b/src/Experience.jsx
@@ -1,51 +1,74 @@
-import { useThree, extend, useFrame } from '@react-three/fiber'
+import { MeshReflectorMaterial, Float, Text, Html, PivotControls, TransformControls, OrbitControls } from '@react-three/drei'
 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
-    })
+    const cube = useRef()
+    const sphere = useRef()
 
     return <>
-        <orbitControls args={ [ camera, gl.domElement ] } />
+
+        <OrbitControls makeDefault />
 
         <directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
         <ambientLight intensity={ 1.5 } />
 
-        <group ref={ groupRef }>
-            <mesh position-x={ - 2 }>
+        <PivotControls
+            anchor={ [ 0, 0, 0 ] }
+            depthTest={ false }
+            lineWidth={ 4 }
+            axisColors={ [ '#9381ff', '#ff4d6d', '#7ae582' ] }
+            scale={ 200 }
+            fixed={ true }
+        >
+            <mesh ref={ sphere } position-x={ - 2 }>
                 <sphereGeometry />
                 <meshStandardMaterial color="orange" />
+                {/* <Html
+                    position={ [ 1, 1, 0 ] }
+                    wrapperClass="label"
+                    center
+                    distanceFactor={ 8 }
+                    occlude={ [ sphere, cube ] }
+                >
+                    That's a sphere 👍
+                </Html> */}
             </mesh>
+        </PivotControls>
 
-            <mesh ref={ cubeRef } rotation-y={ Math.PI * 0.25 } position-x={ 2 } scale={ 1.5 }>
-                <boxGeometry />
-                <meshStandardMaterial color="mediumpurple" />
-            </mesh>
-        </group>
+        <mesh ref={ cube } position-x={ 2 } scale={ 1.5 }>
+            <boxGeometry />
+            <meshStandardMaterial color="mediumpurple" />
+        </mesh>
+
+        <TransformControls object={ cube } />
 
         <mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
             <planeGeometry />
-            <meshStandardMaterial color="greenyellow" />
+            <MeshReflectorMaterial
+                resolution={ 512 }
+                blur={ [ 1000, 1000 ] }
+                mixBlur={ 1 }
+                mirror={ 0.5 }
+                color="greenyellow"
+            />
         </mesh>
 
-        <CustomObject />
+        <Float
+            speed={ 5 }
+            floatIntensity={ 2 }
+        >
+            <Text
+                font="./bangers-v20-latin-regular.woff"
+                fontSize={ 1 }
+                color="salmon"
+                position-y={ 2 }
+                maxWidth={ 2 }
+                textAlign="center"
+            >
+                I LOVE R3F
+            </Text>
+        </Float>
+
     </>
 }
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>43 - First React Three Fiber Application</title>
+    <title>44 - R3F and Drei</title>
 </head>
 <body>
     <div id="root"></div>
diff --git a/src/index.jsx b/src/index.jsx
@@ -2,22 +2,16 @@ 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 = ReactDOM.createRoot(document.querySelector('#root'))
 
 root.render(
     <Canvas
-        gl={ {
-            antialias: true,
-            toneMapping: THREE.ACESFilmicToneMapping,
-            // outputColorSpace: THREE.SRGBColorSpace
-        } }
         camera={ {
             fov: 45,
             near: 0.1,
             far: 200,
-            position: [ 3, 2, 6 ]
+            position: [ - 4, 3, 6 ]
         } }
     >
         <Experience />
diff --git a/src/style.css b/src/style.css
@@ -7,6 +7,18 @@ body,
     left: 0;
     width: 100%;
     height: 100%;
+    background: ivory;
+}
+
+.label > div
+{
+    font-family: Helvetica, Arial;
+    position: absolute;
+    background: #00000088;
+    color: white;
+    padding: 15px;
+    white-space: nowrap;
     overflow: hidden;
-    background: LightSkyBlue;
+    border-radius: 30px;
+    user-select: none;
 }
