minor CharacterView refactoring

src/components/CharacterView.tsx

@@ -8,8 +8,9 @@ export const CharacterView = observer(function ({ character }: { character: Char
 
     return (
         <SyncRigidBody
-            colliders="hull"
-            restitution={2}
+            colliders="cuboid"
+            position={[pos[0] + 0.5, pos[1] + 0.5, pos[2] + 0.5]}
+            rotation={character.transform.look}
             onSync={(data) => {
                 state.game?.setCharacterTransform(
                     {
@@ -21,14 +22,12 @@ export const CharacterView = observer(function ({ character }: { character: Char
                 );
             }}
         >
-            <group
-                position={[pos[0] + 0.5, pos[1] + 0.5, pos[2] + 0.5]}
-                rotation={character.transform.look}
-            >
+            <group>
                 <mesh position={[0, 0, 0]} rotation={[-Math.PI / 2, -Math.PI / 4, 0]}>
                     <coneGeometry args={[0.55, 0.8, 4]} />
                     <meshStandardMaterial color="yellow" />
                 </mesh>
+                {/* <ConvexHullCollider args={[object.cache.colliderMesh[0]]} /> */}
             </group>
         </SyncRigidBody>
     );

src/components/GameView.tsx

@@ -3,7 +3,7 @@ import { SceneView } from "./SceneView";
 import { state } from "../state";
 import { useFrame, useThree } from "@react-three/fiber";
 import { PointerLockControls, useKeyboardControls } from "@react-three/drei";
-import { Suspense, useEffect, useRef } from "react";
+import { Suspense, useRef } from "react";
 import { Physics } from "@react-three/rapier";
 
 function PlayerMovement() {
@@ -41,16 +41,13 @@ export const GameView = observer(function () {
     const game = state.game;
     const { camera } = useThree();
 
-    useEffect(() => {
-        if (!game)
-            return;
+    useFrame((_, delta) => {
+        state.game?.tick(delta);
+
+        if (!game) return;
         const { position, look } = game.camera;
         camera.position.set(position[0], position[1], position[2]);
         camera.rotation.set(look[0], look[1], look[2]);
-    }, []);
-
-    useFrame((_, delta) => {
-        state.game?.tick(delta);
     });
 
     if (!game)
@@ -59,7 +56,7 @@ export const GameView = observer(function () {
     return (<>
         <Suspense>
             <PlayerMovement />
-            <Physics paused={game.isPaused}>
+            <Physics paused={game.isPaused} debug>
                 <SceneView scene={game.scene} />
             </Physics>
         </Suspense>