🚚 Debug -> leva

davidevignozzi · davidevignozzi · commit 93f6cfc65f33 · 2024-01-26T15:14:36.000+01:00
diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
   "dependencies": {
     "@react-three/drei": "^9.88.7",
     "@react-three/fiber": "^8.15.8",
+    "leva": "^0.9.35",
+    "r3f-perf": "^7.1.2",
     "react": "18.2",
     "react-dom": "18.2",
     "three": "^0.158.0"
diff --git a/public/bangers-v20-latin-regular.woff b/public/bangers-v20-latin-regular.woff
diff --git a/src/Experience.jsx b/src/Experience.jsx
@@ -1,74 +1,65 @@
-import { MeshReflectorMaterial, Float, Text, Html, PivotControls, TransformControls, OrbitControls } from '@react-three/drei'
-import { useRef } from 'react'
+import { OrbitControls } from '@react-three/drei'
+import { useControls, button } from 'leva'
+import { Perf } from 'r3f-perf'
 
 export default function Experience()
 {
-    const cube = useRef()
-    const sphere = useRef()
+    const { position, color, visible } = useControls('sphere', {
+        position:
+        {
+            value: { x: - 2, y: 0 },
+            step: 0.01,
+            joystick: 'invertY'
+        },
+        color: '#ff0000',
+        visible: true,
+        myInterval:
+        {
+            min: 0,
+            max: 10,
+            value: [4, 5],
+        },
+        clickMe: button(() => { console.log('ok') }),
+        choice: { options: [ 'a', 'b', 'c' ] }
+    })
+
+    const { scale } = useControls('cube', {
+        scale:
+        {
+            value: 1.5,
+            step: 0.01,
+            min: 0,
+            max: 5
+        }
+    })
+
+    const { perfVisible } = useControls('debug', {
+        perfVisible: false
+    })
 
     return <>
 
+        { perfVisible && <Perf position="top-left" /> }
+
         <OrbitControls makeDefault />
 
         <directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
         <ambientLight intensity={ 1.5 } />
 
-        <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 visible={ visible } position={ [ position.x, position.y, 0 ] }>
+            <sphereGeometry />
+            <meshStandardMaterial color={ color } />
+        </mesh>
 
-        <mesh ref={ cube } position-x={ 2 } scale={ 1.5 }>
+        <mesh position-x={ 2 } scale={ scale }>
             <boxGeometry />
             <meshStandardMaterial color="mediumpurple" />
         </mesh>
 
-        <TransformControls object={ cube } />
-
         <mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
             <planeGeometry />
-            <MeshReflectorMaterial
-                resolution={ 512 }
-                blur={ [ 1000, 1000 ] }
-                mixBlur={ 1 }
-                mirror={ 0.5 }
-                color="greenyellow"
-            />
+            <meshStandardMaterial color="greenyellow" />
         </mesh>
 
-        <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>44 - R3F and Drei</title>
+    <title>45 - Debug and monitoring with R3F</title>
 </head>
 <body>
     <div id="root"></div>
diff --git a/src/index.jsx b/src/index.jsx
@@ -2,18 +2,23 @@ import './style.css'
 import ReactDOM from 'react-dom/client'
 import { Canvas } from '@react-three/fiber'
 import Experience from './Experience.jsx'
+import { StrictMode } from 'react'
+import { Leva } from 'leva'
 
 const root = ReactDOM.createRoot(document.querySelector('#root'))
 
 root.render(
-    <Canvas
-        camera={ {
-            fov: 45,
-            near: 0.1,
-            far: 200,
-            position: [ - 4, 3, 6 ]
-        } }
-    >
-        <Experience />
-    </Canvas>
+    <StrictMode>
+        <Leva collapsed />
+        <Canvas
+            camera={ {
+                fov: 45,
+                near: 0.1,
+                far: 200,
+                position: [ - 4, 3, 6 ]
+            } }
+        >
+            <Experience />
+        </Canvas>
+    </StrictMode>
 )
diff --git a/src/style.css b/src/style.css
@@ -8,17 +8,4 @@ body,
     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;
-    border-radius: 30px;
-    user-select: none;
 }
