FPS display

object transformations optimized

src/components/CharacterView.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react-lite";
-import type { Character, Scene } from "../types";
+import type { Character } from "../types";
 
 export const CharacterView = observer(function ({ character }: { character: Character }) {
 

src/components/ObjectView.tsx

@@ -35,7 +35,19 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
         const controls = controlsRef.current;
         if (!controls)
             return;
-        const onDragChanged = (e: { value: boolean }) => state.worldEditor.setIsDragging(e.value);
+        const onDragChanged = (e: { value: boolean }) => {
+            state.worldEditor.setIsDragging(e.value);
+            if (!e.value) {
+                const group = groupRef.current;
+                if (group)
+                    state.worldEditor.setObjectTransform(
+                        object.id,
+                        group.position.toArray(),
+                        group.rotation.toArray().slice(0, 3) as R3,
+                        group.scale.toArray(),
+                    );
+            }
+        };
         controls.addEventListener('dragging-changed', onDragChanged);
         return () => {
             controls.removeEventListener('dragging-changed', onDragChanged);
@@ -53,25 +65,11 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
         state.worldEditor.setSelectedObject(object.id, nextSelectionEditMode(selectionMode));
     };
 
-    const handleObjectChange = () => {
-        const group = groupRef.current;
-        if (!group)
-            return;
-
-        state.worldEditor.setObjectTransform(
-            object.id,
-            group.position.toArray(),
-            group.rotation.toArray().slice(0, 3) as R3, // chop EulerOrder off array
-            group.scale.toArray(),
-        );
-    };
-
     return (<>
         {
             (isSelected && (selectionMode !== undefined) && groupRef.current) &&
             <TransformControls
                 object={groupRef as RefObject<Group>}
-                onChange={handleObjectChange}
                 mode={selectionMode}
             />
         }

src/components/ThreeView.tsx

@@ -1,4 +1,5 @@
 import { Canvas } from '@react-three/fiber';
+import { Stats } from '@react-three/drei';
 import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { GameView } from './GameView';
@@ -16,6 +17,7 @@ export const ThreeView = observer(function () {
                 // camera={state.world.character.camera}
                 onPointerMissed={() => state.worldEditor.resetSelectedObject()}
             >
+                <Stats />
                 {isGame ? <GameView /> : <SceneEditorView />}
             </Canvas>
             <div style={{ position: 'absolute', top: 8, right: 8, display: 'flex', gap: 4 }}>

src/state/gameState.ts

@@ -54,7 +54,7 @@ export class GameState {
         this.world.data.state = { playing: false };
     }
 
-    public tick(deltaTime: number): void {
+    public tick(_deltaTime: number): void {
         //TODO
     }
 }