@umicat/three-sdk 0.17.1 → 0.17.2

package/dist/editor/EditorDesignPlayer3D.js

@@ -25,10 +25,39 @@ export async function runEditorDesignPlayer3D(renderer, opts = {}) {
     const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.05, 2000);
     const controls = new OrbitControls(camera, renderer.domElement);
     controls.enableDamping = true;
-    // A single persistent marker, repositioned per click.
+    // A single persistent marker, repositioned per click — the exact world
+    // point clicked (what "put a torch at the spot I clicked" needs), distinct
+    // from the box below (which entity was hit, not just where).
     const marker = new THREE.Mesh(new THREE.SphereGeometry(0.12, 16, 12), new THREE.MeshBasicMaterial({ color: '#ff3b6b', depthTest: false }));
     marker.visible = false;
     marker.renderOrder = 999;
+    // Selection box — Unity/Blender-style "frame the object you clicked", not
+    // just a point on its surface. `BoxHelper.setFromObject` (three.js core,
+    // no custom geometry math needed) recomputes a world-space AABB wireframe
+    // from scratch each call, so retargeting it to a different entity per
+    // click is just calling it again — it does not need to track a moving
+    // object (this scene never animates in design mode).
+    const selectionBox = new THREE.BoxHelper(new THREE.Object3D(), 0xffd23f);
+    selectionBox.visible = false;
+    selectionBox.renderOrder = 998;
+    selectionBox.material.depthTest = false;
+    // Orientation gizmo — a small corner compass tracking the main camera's
+    // rotation only (never its position/zoom), same convention every 3D DCC
+    // uses: X=red, Y=green, Z=blue. Rendered as a second, tiny scene into a
+    // scissored corner viewport each frame (see the render loop below) — the
+    // simplest way to get a HUD-anchored 3D readout without a second canvas.
+    const GIZMO_SIZE = 84;
+    const GIZMO_MARGIN = 14;
+    const gizmoScene = new THREE.Scene();
+    const gizmoCamera = new THREE.OrthographicCamera(-1.6, 1.6, 1.6, -1.6, 0.1, 10);
+    const AXES = [
+        [new THREE.Vector3(1, 0, 0), 0xff4d4d], // X — red
+        [new THREE.Vector3(0, 1, 0), 0x4dff88], // Y — green
+        [new THREE.Vector3(0, 0, 1), 0x4d9fff], // Z — blue
+    ];
+    for (const [dir, color] of AXES) {
+        gizmoScene.add(new THREE.ArrowHelper(dir, new THREE.Vector3(0, 0, 0), 1, color, 0.35, 0.22));
+    }
     let scene = null;
     const entityByObject = new Map();
     const resize = () => {
@@ -72,16 +101,29 @@ export async function runEditorDesignPlayer3D(renderer, opts = {}) {
         const hit = hits[0];
         let node = hit.object;
         let entityId = null;
+        let entityRoot = null;
         while (node) {
             const id = entityByObject.get(node);
             if (id) {
                 entityId = id;
+                entityRoot = node;
                 break;
             }
             node = node.parent;
         }
         marker.position.copy(hit.point);
         marker.visible = true;
+        // Frame the whole entity the click landed on, not just the point on its
+        // surface — `setFromObject` walks the root's full subtree, so a
+        // multi-mesh entity (a model with separate parts) gets one box around
+        // all of it, matching what "entityId" actually refers to.
+        if (entityRoot) {
+            selectionBox.setFromObject(entityRoot);
+            selectionBox.visible = true;
+        }
+        else {
+            selectionBox.visible = false;
+        }
         window.parent.postMessage({ type: 'umicat:editor:pickPoint3d', x: hit.point.x, y: hit.point.y, z: hit.point.z, entityId }, '*');
     };
     renderer.domElement.addEventListener('pointerdown', onPointerDown);
@@ -92,8 +134,30 @@ export async function runEditorDesignPlayer3D(renderer, opts = {}) {
     // step, so the loop only ever needs to render.
     renderer.setAnimationLoop(() => {
         controls.update();
-        if (scene)
-            renderer.render(scene, camera);
+        if (!scene)
+            return;
+        renderer.setScissorTest(false);
+        renderer.render(scene, camera);
+        // Second pass: the orientation gizmo, into a small scissored corner
+        // viewport. Its camera copies the MAIN camera's rotation only (not
+        // position/zoom) so it reads as "which way am I looking", exactly what
+        // orbiting the main view is meant to answer. three.js viewport Y is
+        // bottom-up, so "top-right on screen" is `height - size - margin`.
+        const w = renderer.domElement.clientWidth;
+        const h = renderer.domElement.clientHeight;
+        gizmoCamera.position.set(0, 0, 4).applyQuaternion(camera.quaternion);
+        gizmoCamera.up.copy(camera.up);
+        gizmoCamera.lookAt(0, 0, 0);
+        const gx = w - GIZMO_SIZE - GIZMO_MARGIN;
+        const gy = h - GIZMO_SIZE - GIZMO_MARGIN;
+        renderer.setScissorTest(true);
+        renderer.setScissor(gx, gy, GIZMO_SIZE, GIZMO_SIZE);
+        renderer.setViewport(gx, gy, GIZMO_SIZE, GIZMO_SIZE);
+        // render()'s own autoClear respects the scissor rect just set, so this
+        // only wipes the corner box, not the scene pass above.
+        renderer.render(gizmoScene, gizmoCamera);
+        renderer.setScissorTest(false);
+        renderer.setViewport(0, 0, w, h);
     });
     const sceneId = opts.sceneId;
     if (!sceneId)
@@ -108,6 +172,8 @@ export async function runEditorDesignPlayer3D(renderer, opts = {}) {
             entityByObject.set(obj, id);
         marker.visible = false;
         scene.add(marker);
+        selectionBox.visible = false;
+        scene.add(selectionBox);
         // Frame the whole scene — auto-fit, since a small template scene and a
         // real level's dozens of entities need wildly different orbit distances.
         const box = new THREE.Box3().setFromObject(scene);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umicat/three-sdk",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "Three.js runtime for Umicat games: the scene3d design format, its loader with physics, a kinematic character controller, and the Umicat platform via @umicat/platform-sdk.",
   "type": "module",
   "main": "dist/index.js",