@umicat/three-sdk 0.17.0 → 0.17.2

package/dist/editor/EditorDesignPlayer3D.js

@@ -21,13 +21,43 @@ import { loadScene3D } from '../SceneLoader3D.js';
  * real game.
  */
 export async function runEditorDesignPlayer3D(renderer, opts = {}) {
+    hideNonCanvasStaticMarkup(renderer.domElement);
     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 = () => {
@@ -71,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);
@@ -91,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)
@@ -107,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);
@@ -126,3 +193,42 @@ export async function runEditorDesignPlayer3D(renderer, opts = {}) {
         window.parent.postMessage({ type: 'umicat:editor:scene3dLoaded', sceneId, error: true }, '*');
     }
 }
+/**
+ * Hides every other top-level DOM node the game shipped, keeping only the
+ * canvas. Mirrors `@umicat/phaser-sdk`'s edit-mode markup hider (`UmicatGame.ts`)
+ * exactly, including its `data-umicat-keep` opt-out — same bug, same fix,
+ * different renderer.
+ *
+ * Two distinct problems, one cause: `index.html` markup has no owner in edit
+ * mode, because none of the game's own code runs to manage it. A static score
+ * HUD just clutters a scene that's supposed to read as empty of gameplay. A
+ * game with its own full-screen input-capturing overlay (a drawing surface
+ * that "the whole screen collects strokes" is a real, shipped example) is
+ * worse: that overlay sits ABOVE the canvas and silently swallows every
+ * pointer event meant for OrbitControls — confirmed live, orbit/zoom did
+ * nothing at all until this ran, with zero console errors, because the events
+ * simply never reached the renderer's own `domElement`.
+ */
+function hideNonCanvasStaticMarkup(canvas) {
+    if (typeof document === 'undefined' || !document.body)
+        return;
+    const hidden = [];
+    for (const el of Array.from(document.body.children)) {
+        if (!(el instanceof HTMLElement))
+            continue;
+        const tag = el.tagName;
+        if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'LINK' || tag === 'NOSCRIPT')
+            continue;
+        if (el === canvas)
+            continue;
+        if (el.hasAttribute('data-umicat-keep'))
+            continue; // opt OUT, for markup that IS design-time content
+        if (el.style.display === 'none')
+            continue;
+        el.style.display = 'none';
+        hidden.push(el.id ? `#${el.id}` : tag.toLowerCase());
+    }
+    if (hidden.length > 0) {
+        console.info(`[umicat/editor] hid ${hidden.join(', ')} — index.html markup with no game code running to remove it. Add data-umicat-keep to keep one visible in Edit.`);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umicat/three-sdk",
-  "version": "0.17.0",
+  "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",