feat: add leva to experience

Onxi95 · May 17, 2024 · ac6d2a9 · ac6d2a9
1 parent 4d81642
commit ac6d2a9
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/GyroscopeExperience.tsx b/src/components/GyroscopeExperience.tsx
@@ -11,13 +11,16 @@ import { debounce } from "lodash-es";
 import * as THREE from "three";
 
 const cubesCount = 50;
-const gravityMultiplier = 9;
+import { useControls } from "leva";
 
 const defaultGravity: [number, number, number] = [0, -9.81, 0];
 const radians = (deg: number) => (deg * Math.PI) / 180;
 
 export const GyroscopeExperience = () => {
   const [gravity, setGravity] = useState(defaultGravity);
+  const { gravityMultiplier } = useControls({
+    gravityMultiplier: 9,
+  });
 
   const cubesRef =
     useRef<
@@ -35,7 +38,7 @@ export const GyroscopeExperience = () => {
       matrix.compose(
         new THREE.Vector3(i * 2, 0, 0),
         new THREE.Quaternion(),
-        new THREE.Vector3(1, 1, 1),
+        new THREE.Vector3(1, 1, 1)
       );
       cubesRef.current.setMatrixAt(i, matrix);
     }
@@ -60,14 +63,14 @@ export const GyroscopeExperience = () => {
         -gz * gravityMultiplier,
       ]);
     }, 20),
-    [],
+    []
   );
 
   useEffect(() => {
     if ("DeviceOrientationEvent" in window) {
       window.addEventListener(
         "deviceorientation",
-        handleDeviceOrientationChange,
+        handleDeviceOrientationChange
       );
     } else {
       console.log("Device Orientation API not supported.");