object transform in editor

webclient/src/components/layers/LayeredThreeView.tsx

@@ -5,6 +5,7 @@ import { SceneEditorCameraLayer } from "./SceneEditor/SceneEditorGameraLayer";
 import { SceneEditorObjectSelectionLayer } from "./SceneEditor/SceneEditorObjectSelectionLayer";
 import { LightsLayer } from "./LighsLayer";
 import { StatsLayer } from './StatsLayer';
+import { SceneEditorObjectGizmosLayer } from "./SceneEditor/SceneEditorObjectGizmosLayer";
 
 export const LayeredThreeView = observer(function () {
 
@@ -15,6 +16,7 @@ export const LayeredThreeView = observer(function () {
             <SceneEditorCameraLayer />
             <ObjectGeometriesLayer>
                 <SceneEditorObjectSelectionLayer />
+                <SceneEditorObjectGizmosLayer />
             </ObjectGeometriesLayer>
             <StatsLayer />
         </Canvas>

webclient/src/components/layers/SceneEditor/SceneEditorObjectGizmosLayer.tsx

@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+import * as THREE from "three";
+import { TransformControls } from "@react-three/drei";
+import { state } from "../../../state";
+import { observer } from "mobx-react-lite";
+import { measuredRenderTime } from "../../../utils/layerTimings";
+import type { V3, R3 } from "../../../types";
+
+export const SceneEditorObjectGizmosLayer = observer(measuredRenderTime(
+    "ObjectGizmos",
+    function () {
+        const selection = state.view.selectedObject;
+
+        const onObjectChange = useCallback((e?: THREE.Event) => {
+            if (!selection || !e)
+                return;
+
+            const controlled =  (e.target as { object?: THREE.Object3D }).object;
+            if (!controlled)
+                return;
+
+            selection.geometry.setObjectTransform(
+                controlled.position.toArray() as V3,
+                controlled.rotation.toArray().slice(0, 3) as R3,
+                controlled.scale.toArray() as V3,
+            );
+        }, [selection]);
+
+        if (!selection)
+            return null;
+
+        const obj = selection.geometry.object;
+
+        return <TransformControls
+            mode={selection.mode}
+            position={obj.position}
+            rotation={obj.rotation}
+            scale={obj.scale}
+            onObjectChange={onObjectChange}
+        />;
+    },
+));

webclient/src/components/layers/SceneEditor/SceneEditorObjectSelectionLayer.tsx

@@ -1,37 +1,52 @@
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useRef } from "react";
 import { useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { state } from "../../../state";
+import { nextObjectEditMode } from "../../../state/worldEditorState";
 import { observer } from "mobx-react-lite";
 import { SelectionBoundingBox } from "./SelectionBoundingBox";
 import { measuredRenderTime } from "../../../utils/layerTimings";
 import { useObjectGeometryList } from "../ObjectGeometriesLayer";
 
+const DRAG_THRESHOLD = 4;
 const raycaster = new THREE.Raycaster();
 const pointer = new THREE.Vector2();
 
 export const SceneEditorObjectSelectionLayer = observer(measuredRenderTime(
     "ObjectSelection",
     function () {
-        const selection = state.view.selectedObject;
-        const camera = useThree(s => s.camera);
-        const scene = useThree(s => s.scene);
-        const gl = useThree(s => s.gl);
-        const size = useThree(s => s.size);
         const geometryListRef = useObjectGeometryList();
 
+        const selection = state.view.selectedObject;
+        const { camera, gl, size } = useThree();
+        const pointerDownPos = useRef<{ x: number; y: number } | null>(null);
+
         const handlePointerDown = useCallback((e: PointerEvent) => {
             if (e.button !== 0)
                 return;
+            pointerDownPos.current = { x: e.offsetX, y: e.offsetY };
+        }, []);
+
+        const handlePointerUp = useCallback((e: PointerEvent) => {
+            if (e.button !== 0)
+                return;
+
+            const down = pointerDownPos.current;
+            pointerDownPos.current = null;
+            if (!down)
+                return;
+
+            const dx = e.offsetX - down.x;
+            const dy = e.offsetY - down.y;
+            if (dx * dx + dy * dy > DRAG_THRESHOLD * DRAG_THRESHOLD)
+                return;
 
             pointer.x = (e.offsetX / size.width) * 2 - 1;
             pointer.y = -(e.offsetY / size.height) * 2 + 1;
 
             raycaster.setFromCamera(pointer, camera);
 
-            const instancedMeshes = scene.children.filter(
-                (child): child is THREE.InstancedMesh => child instanceof THREE.InstancedMesh,
-            );
+            const instancedMeshes = state.view.objectTypeGeometries.values.filter((ot) => ot.meshes?.length).flatMap((ot) => ot.meshes!);
 
             const intersections = raycaster.intersectObjects(instancedMeshes, false);
 
@@ -41,9 +56,8 @@ export const SceneEditorObjectSelectionLayer = observer(measuredRenderTime(
             }
 
             const hit = intersections[0];
-            const mesh = hit.object as THREE.InstancedMesh;
-            const instanceId = hit.instanceId;
 
+            const instanceId = hit.instanceId;
             if (instanceId === undefined) {
                 state.worldEditor.resetSelection();
                 return;
@@ -53,21 +67,28 @@ export const SceneEditorObjectSelectionLayer = observer(measuredRenderTime(
             if (!geometryList)
                 return;
 
-            const objectId = geometryList.getObjectIdByMesh(mesh, instanceId);
-            if (objectId) {
-                state.worldEditor.setSelectedObject({ id: objectId, editMode: "translate" });
+            const mesh = hit.object as THREE.InstancedMesh;
+            const instanceGeometry = geometryList.getObjectGeometryByMesh(mesh, instanceId);
+            if (instanceGeometry) {
+                const sel = state.worldEditor.selection;
+                const editMode = sel?.type === 'object' && sel.id === instanceGeometry.object.id
+                    ? nextObjectEditMode(sel.editMode)
+                    : 'translate';
+                state.worldEditor.setSelectedObject({ id: instanceGeometry.object.id, editMode });
             } else {
                 state.worldEditor.resetSelection();
             }
-        }, [camera, scene, size, geometryListRef]);
+        }, [camera, size, geometryListRef]);
 
         useEffect(() => {
             const domElement = gl.domElement;
             domElement.addEventListener("pointerdown", handlePointerDown);
+            domElement.addEventListener("pointerup", handlePointerUp);
             return () => {
                 domElement.removeEventListener("pointerdown", handlePointerDown);
+                domElement.removeEventListener("pointerup", handlePointerUp);
             };
-        }, [gl, handlePointerDown]);
+        }, [gl, handlePointerDown, handlePointerUp]);
 
         return <>
             {selection &&

webclient/src/components/layers/SceneEditor/SelectionBoundingBox.tsx

@@ -1,8 +1,9 @@
 import { useMemo } from "react";
 import * as THREE from "three";
+import { observer } from "mobx-react-lite";
 import type { ObjectGeometryViewItem } from "../../../state/viewLayers";
 
-export const SelectionBoundingBox = function({ item }: { item: ObjectGeometryViewItem }) {
+export const SelectionBoundingBox = observer(function({ item }: { item: ObjectGeometryViewItem }) {
     const obj = item.object;
     const bb = item.objectTypeGeometry.boundingBox;
 
@@ -41,4 +42,4 @@ export const SelectionBoundingBox = function({ item }: { item: ObjectGeometryVie
             <lineBasicMaterial color="#ffff00" />
         </lineSegments>
     </mesh>;
-};
+});