minerender 2.1.0-alpha.42 → 2.1.0-alpha.43

package/dist/browser/index.mjs

@@ -3048,6 +3048,10 @@ var _SceneObject = class _SceneObject extends Object3D2 {
     this.setMatrixAt(index, new Matrix43());
     return reference;
   }
+  /** Returns the live reference for a raycast hit on this object's instance mesh. */
+  getInstanceReference(mesh, index) {
+    return mesh === this.instanceMesh ? this.instanceReferences.get(index) : void 0;
+  }
   isInstanceActive(index, reference) {
     return this.instanceReferences.get(index) === reference;
   }
@@ -3130,9 +3134,9 @@ var _SceneObject = class _SceneObject extends Object3D2 {
   }
   getRotationAt(index, euler = new Euler3()) {
     if (!this.isInstanced) throw new MineRenderError("Object is not instanced");
-    const matrix = this.getMatrixAt(index);
-    euler.setFromRotationMatrix(matrix);
-    return euler;
+    const rotation = new Quaternion3();
+    this.getMatrixAt(index).decompose(new Vector35(), rotation, new Vector35());
+    return euler.setFromQuaternion(rotation);
   }
   setScaleAt(index, scale) {
     if (!this.isInstanced) throw new MineRenderError("Object is not instanced");
@@ -3388,11 +3392,12 @@ var GuiObject = class extends SceneObject {
 // src/inspector/SceneInspector.ts
 import { Raycaster, Vector2 as Vector22 } from "three";
 var p7 = prefix("SceneInspector");
-var help = "<span>Ctrl+Click to Select<br/></span><br/>";
+var help = "<span>Ctrl/Cmd+Click to Select<br/></span><br/>";
 var SceneInspector = class {
   constructor(renderer) {
     this.renderer = renderer;
     this.mouse = new Vector22();
+    this.listeners = new AbortController();
     this.objectInfoContainer = document.createElement("div");
     this.objectControlsContainer = document.createElement("div");
     this.raycaster = new Raycaster();
@@ -3402,13 +3407,44 @@ var SceneInspector = class {
     this.objectInfoContainer.classList.add("minerender-inspector", "minerender-object-info");
     this.objectControlsContainer.classList.add("minerender-inspector", "minerender-object-controls");
     this.objectInfoContainer.innerHTML = help;
-    document.addEventListener("click", this.onClick.bind(this), {
-      passive: true
-    });
+    const canvas = this.renderer.renderer.domElement;
+    const options = { signal: this.listeners.signal };
+    canvas.addEventListener("pointerdown", (event) => {
+      this.pointer = event.button === 0 && (event.ctrlKey || event.metaKey) ? event : void 0;
+    }, options);
+    canvas.addEventListener("pointermove", (event) => {
+      if (this.pointer?.pointerId === event.pointerId && Math.hypot(event.clientX - this.pointer.clientX, event.clientY - this.pointer.clientY) > 5) {
+        this.pointer = void 0;
+      }
+    }, options);
+    canvas.addEventListener("pointerup", (event) => {
+      const start = this.pointer;
+      this.pointer = void 0;
+      if (start?.pointerId === event.pointerId && Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) <= 5) {
+        this.onClick(event);
+      }
+    }, options);
+    canvas.addEventListener("pointercancel", () => {
+      this.pointer = void 0;
+    }, options);
+    canvas.addEventListener("pointerleave", () => {
+      this.pointer = void 0;
+    }, options);
+    canvas.addEventListener("contextmenu", (event) => {
+      if (this.pointer?.ctrlKey) event.preventDefault();
+    }, options);
+  }
+  dispose() {
+    this.listeners.abort();
+    this.pointer = void 0;
+    this.selectedObject = void 0;
+    this.objectInfoContainer.remove();
+    this.objectControlsContainer.remove();
   }
   findMeshChildren(from, out = []) {
+    if (!from.visible) return out;
     for (let c of from.children) {
-      if (isMesh(c)) {
+      if (c.visible && isMesh(c)) {
         out.push(c);
       }
       this.findMeshChildren(c, out);
@@ -3416,50 +3452,43 @@ var SceneInspector = class {
     return out;
   }
   onClick(event) {
-    if (event.target?.nodeName !== "CANVAS") return;
-    if (!event.ctrlKey) return;
-    setTimeout(() => {
-      this.mouse.x = event.clientX / window.innerWidth * 2 - 1;
-      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-      this.raycaster.setFromCamera(this.mouse, this.renderer.camera);
-      let start = Date.now();
-      let targets = this.findMeshChildren(this.renderer.scene);
-      const intersects = this.raycaster.intersectObjects(targets, false);
-      console.debug("Raycast took " + (Date.now() - start) + "ms for " + targets.length + " possible targets with " + intersects.length + " results");
-      if (intersects.length > 0) {
-        this.handleRaycasterObjects(intersects);
-      }
-    });
+    const canvas = this.renderer.renderer.domElement;
+    if (event.target !== canvas || event.button !== 0 || !(event.ctrlKey || event.metaKey)) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left, y = event.clientY - rect.top;
+    if (rect.width <= 0 || rect.height <= 0 || x < 0 || y < 0 || x >= rect.width || y >= rect.height) return;
+    this.mouse.set(x / rect.width * 2 - 1, 1 - y / rect.height * 2);
+    this.renderer.camera.updateWorldMatrix(true, false);
+    this.renderer.scene.updateMatrixWorld(true);
+    this.raycaster.setFromCamera(this.mouse, this.renderer.camera);
+    this.handleRaycasterObjects(this.raycaster.intersectObjects(this.findMeshChildren(this.renderer.scene), false));
   }
   appendTo(el) {
     el.append(this.objectInfoContainer);
     el.append(this.objectControlsContainer);
   }
   handleRaycasterObjects(intersections) {
-    console.debug(intersections);
-    const firstIntersection = intersections[0];
-    if (firstIntersection && firstIntersection.object) {
-      const firstObject = firstIntersection.object;
-      let targetIntersection = void 0;
-      let targetObject = void 0;
-      const firstSceneObjectIntersection = intersections.find((i) => i.object && i.object.parent && isSceneObject(i.object.parent));
-      if (firstSceneObjectIntersection && firstSceneObjectIntersection.object) {
-        targetIntersection = firstSceneObjectIntersection;
-        targetObject = firstSceneObjectIntersection.object;
-      } else {
-        targetIntersection = firstIntersection;
-        targetObject = firstObject;
+    const hit = intersections[0];
+    if (!hit) return;
+    const instance = this.getIntersectionInstance(hit);
+    this.selectObject(instance?.instanceable ?? hit.object, hit, instance);
+  }
+  getIntersectionInstance(hit) {
+    if (hit?.instanceId === void 0) return void 0;
+    for (let parent = hit.object.parent; parent; parent = parent.parent) {
+      if (isSceneObject(parent)) {
+        const instance = parent.getInstanceReference(hit.object, hit.instanceId);
+        if (instance) return instance;
       }
-      if (!targetIntersection || !targetObject) return;
-      this.selectObject(targetObject, targetIntersection);
     }
+    return void 0;
   }
-  selectObject(targetObject, targetIntersection) {
+  selectObject(targetObject, targetIntersection, instance = this.getIntersectionInstance(targetIntersection)) {
     this.selectedObject = targetObject;
     console.log(p7, "selected", targetObject);
-    this.redraw(targetObject, targetIntersection);
+    this.redraw(targetObject, targetIntersection, instance);
   }
-  redraw(targetObject, targetIntersection) {
+  redraw(targetObject, targetIntersection, instance) {
     this.objectInfoContainer.innerHTML = help;
     if (targetIntersection) {
       this.addInfoLine("Distance", "D", targetIntersection.distance);
@@ -3472,8 +3501,8 @@ var SceneInspector = class {
       if (isSceneObject(targetObject.parent)) {
       }
     }
-    if ("atlas" in targetObject) {
-      const atlas = targetObject["atlas"];
+    const atlas = "atlas" in targetObject ? targetObject["atlas"] : void 0;
+    if (atlas?.image.canvas) {
       const img = atlas.image.canvas;
       img.style.width = "100px";
       img.style.height = "100px";
@@ -3482,28 +3511,31 @@ var SceneInspector = class {
       this.objectInfoContainer.prepend(img);
     }
     this.objectControlsContainer.innerHTML = "";
-    this.addControls(targetObject, targetIntersection);
+    this.addControls(targetObject, targetIntersection, instance);
   }
-  addControls(object, intersection) {
+  addControls(object, intersection, instance) {
     const container = document.createElement("div");
     container.append(this.separator("Select Parent/Child"));
     if (object.parent) {
       container.append(this.buttonControl("Select Parent " + object.parent.constructor.name + " " + object.parent.name, "P", () => {
-        this.selectObject(object.parent, intersection);
+        this.selectObject(object.parent, intersection, instance);
       }));
     }
     if (object.children.length > 0) {
       let i = 1;
       for (let child of object.children) {
         container.append(this.buttonControl("Select Child " + child.constructor.name + " " + child.name, "C" + i++, () => {
-          this.selectObject(child, intersection);
+          this.selectObject(child, intersection, instance);
         }));
       }
     }
     container.append(this.separator());
-    container.append(this.toggleControl("Visibility", "V", object.visible, (v) => object.visible = v));
+    const selectedInstance = instance && (object === instance.instanceable || object === intersection?.object) ? instance : void 0;
+    if (!selectedInstance) {
+      container.append(this.toggleControl("Visibility", "V", object.visible, (v) => object.visible = v));
+    }
     container.append(this.separator("Mesh"));
-    this.addObjectControls(object, intersection, container);
+    this.addObjectControls(object, intersection, container, selectedInstance);
     container.append(this.separator());
     this.objectControlsContainer.append(container);
   }
@@ -3515,78 +3547,26 @@ var SceneInspector = class {
     this.objectInfoContainer.append(document.createElement("br"));
     return el;
   }
-  addObjectControls(target, intersection, container) {
+  addObjectControls(target, intersection, container, instance) {
     const posRange = 16 * 16;
     const rotRange = 360;
     const scaleRange = 4;
-    if (typeof intersection !== "undefined" && typeof intersection.instanceId !== "undefined" && isSceneObject(target) && target.isInstanced) {
-      const scObj = target;
-      container.append(this.separator("Position"));
-      let pos = scObj.getPositionAt(intersection.instanceId);
-      container.append(this.rangeControl("X Position", "X", -posRange + pos.x, posRange + pos.x, pos.x, 1, (v) => {
-        pos = scObj.getPositionAt(intersection.instanceId);
-        pos.x = v;
-        scObj.setPositionAt(intersection.instanceId, pos);
-      }));
-      container.append(this.rangeControl("Y Position", "Y", -posRange + pos.y, posRange + pos.y, pos.y, 1, (v) => {
-        pos = scObj.getPositionAt(intersection.instanceId);
-        pos.y = v;
-        scObj.setPositionAt(intersection.instanceId, pos);
-      }));
-      container.append(this.rangeControl("Z Position", "Z", -posRange + pos.z, posRange + pos.z, pos.z, 1, (v) => {
-        pos = scObj.getPositionAt(intersection.instanceId);
-        pos.z = v;
-        scObj.setPositionAt(intersection.instanceId, pos);
-      }));
-      container.append(this.separator("Rotation"));
-      let rot = scObj.getRotationAt(intersection.instanceId);
-      container.append(this.rangeControl("X Rotation", "X", 0, rotRange, Math.round(toDegrees(rot.x)), 1, (v) => {
-        rot = scObj.getRotationAt(intersection.instanceId);
-        rot.x = toRadians(v);
-        scObj.setRotationAt(intersection.instanceId, rot);
-      }));
-      container.append(this.rangeControl("Y Rotation", "Y", 0, rotRange, Math.round(toDegrees(rot.y)), 1, (v) => {
-        rot = scObj.getRotationAt(intersection.instanceId);
-        rot.y = toRadians(v);
-        scObj.setRotationAt(intersection.instanceId, rot);
-      }));
-      container.append(this.rangeControl("Z Rotation", "Z", 0, rotRange, Math.round(toDegrees(rot.z)), 1, (v) => {
-        rot = scObj.getRotationAt(intersection.instanceId);
-        rot.z = toRadians(v);
-        scObj.setRotationAt(intersection.instanceId, rot);
-      }));
-      container.append(this.separator("Scale"));
-      let scl = scObj.getScale();
-      container.append(this.rangeControl("X Scale", "X", 0, scaleRange, scl.x, 0.1, (v) => {
-        scl = scObj.getScaleAt(intersection.instanceId);
-        scl.x = v;
-        scObj.setScaleAt(intersection.instanceId, scl);
-      }));
-      container.append(this.rangeControl("Y Scale", "Y", 0, scaleRange, scl.y, 0.1, (v) => {
-        scl = scObj.getScaleAt(intersection.instanceId);
-        scl.y = v;
-        scObj.setScaleAt(intersection.instanceId, scl);
-      }));
-      container.append(this.rangeControl("Z Scale", "Z", 0, scaleRange, scl.z, 0.1, (v) => {
-        scl = scObj.getScaleAt(intersection.instanceId);
-        scl.z = v;
-        scObj.setScaleAt(intersection.instanceId, scl);
-      }));
-    } else if (isTransformable(target)) {
-      const parent = target;
+    const transform = instance ?? (isTransformable(target) ? target : void 0);
+    if (transform) {
+      const parent = transform;
       container.append(this.separator("Position"));
       let pos = parent.getPosition();
-      container.append(this.rangeControl("X Position", "X", -posRange, posRange, pos.x, 1, (v) => {
+      container.append(this.rangeControl("X Position", "X", pos.x - posRange, pos.x + posRange, pos.x, 1, (v) => {
         pos = parent.getPosition();
         pos.x = v;
         parent.setPosition(pos);
       }));
-      container.append(this.rangeControl("Y Position", "Y", -posRange, posRange, pos.y, 1, (v) => {
+      container.append(this.rangeControl("Y Position", "Y", pos.y - posRange, pos.y + posRange, pos.y, 1, (v) => {
         pos = parent.getPosition();
         pos.y = v;
         parent.setPosition(pos);
       }));
-      container.append(this.rangeControl("Z Position", "Z", -posRange, posRange, pos.z, 1, (v) => {
+      container.append(this.rangeControl("Z Position", "Z", pos.z - posRange, pos.z + posRange, pos.z, 1, (v) => {
         pos = parent.getPosition();
         pos.z = v;
         parent.setPosition(pos);
@@ -3675,6 +3655,7 @@ var SceneInspector = class {
     toggle.checked = val;
     toggle.addEventListener("change", (e) => {
       change(toggle.checked);
+      this.renderer.scene.dirty = true;
     });
     label.append(toggle);
     label.append(document.createElement("br"));
@@ -3687,7 +3668,6 @@ var SceneInspector = class {
     label.setAttribute("title", name);
     labelText.style.width = "18%";
     labelText.style.display = "inline-block";
-    labelText.innerText = `${id} (${val})`;
     const range = document.createElement("input");
     range.setAttribute("type", "range");
     range.style.width = "80%";
@@ -3695,8 +3675,10 @@ var SceneInspector = class {
     range.min = `${min}`;
     range.step = `${step}`;
     range.value = `${val}`;
+    labelText.innerText = `${id} (${range.value})`;
     const onChange = () => {
       change(parseFloat(range.value));
+      this.renderer.scene.dirty = true;
       labelText.innerText = `${id} (${range.value})`;
     };
     range.addEventListener("input", onChange);