fix FPV initial collision

fisirc · Nov 18, 2024 · 0ad0b50 · 0ad0b50
1 parent 984b449
commit 0ad0b50
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 18 deletions.
diff --git a/app/src/pages/Gallery3D/components/gallery/FPV.tsx b/app/src/pages/Gallery3D/components/gallery/FPV.tsx
@@ -13,8 +13,8 @@ export const usePlayerControls = () => {
   });
 
   useEffect(() => {
-    const handleKeyDown = (e) => setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: true }));
-    const handleKeyUp = (e) => setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: false }));
+    const handleKeyDown = (e: KeyboardEvent) => setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: true }));
+    const handleKeyUp = (e: KeyboardEvent) => setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: false }));
 
     document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('keyup', handleKeyUp);
@@ -40,8 +40,10 @@ export const FPV = (props: any) => {
   const [ref, api] = useSphere((index) => ({
     mass: 1,
     type: 'Dynamic',
-    position: [0, 10, 0],
-    ...props,
+    position: [0, 2, 0],
+    controls: true,
+    args: [2],
+    color: 'yellow',
   }));
 
   const { forward, backward, left, right, jump } = usePlayerControls();
@@ -65,15 +67,5 @@ export const FPV = (props: any) => {
     }
   });
 
-  return (
-    <>
-      <PointerLockControls args={[camera, gl.domElement]} />
-      <group>
-        <mesh castShadow position={props.position} ref={ref}>
-          <sphereGeometry args={props.args} />
-          <meshStandardMaterial color="#FFFF00" />
-        </mesh>
-      </group>
-    </>
-  );
+  return <PointerLockControls args={[camera, gl.domElement]} />
 };
diff --git a/app/src/pages/Gallery3D/index.tsx b/app/src/pages/Gallery3D/index.tsx
@@ -1,4 +1,4 @@
-import { Sky, SpotLightShadow } from '@react-three/drei';
+import { Sky } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { Physics } from '@react-three/cannon';
 import { useApi } from '@/hooks/useApi';
@@ -9,7 +9,6 @@ import { Scene } from './components/gallery/Scene';
 
 export const Gallery3D = ({ gallery }: { gallery: string }) => {
   const { data } = useApi<Array<UserContentFileElement>>(`gallery/${gallery}`);
-
   console.log('🐢🐢🐢🐢', data);
 
   return (
@@ -20,7 +19,7 @@ export const Gallery3D = ({ gallery }: { gallery: string }) => {
         position={[10, 10, 5]}
         castShadow />
       <Physics>
-        <FPV controls position={[0, 1, 0]} args={[2]} color="yellow" />
+        <FPV />
         <Ground />
         <Scene />
       </Physics>