@mml-io/mml-web-threejs 0.24.1 → 0.26.0

package/build/index.js

@@ -1552,14 +1552,248 @@ var ThreeJSMElement = class extends MElementGraphics {
 import { Model as Model2, TransformableElement } from "@mml-io/mml-web";
 import { ModelGraphics } from "@mml-io/mml-web";
 import { LoadingInstanceManager as LoadingInstanceManager4 } from "@mml-io/mml-web";
+import * as THREE13 from "three";
+
+// src/ThreeJSAutoInstanceScene.ts
 import * as THREE12 from "three";
+function autoInstanceScene(root, debug) {
+  const eligibleMeshes = [];
+  root.traverse((object) => {
+    if (!object.isMesh) return;
+    const mesh = object;
+    if (mesh.isSkinnedMesh) return;
+    if (mesh.geometry.morphAttributes && Object.keys(mesh.geometry.morphAttributes).length > 0)
+      return;
+    if (Array.isArray(mesh.material)) return;
+    eligibleMeshes.push(mesh);
+  });
+  if (eligibleMeshes.length === 0) return;
+  const buckets = /* @__PURE__ */ new Map();
+  const materialIds = /* @__PURE__ */ new Map();
+  let nextMaterialId = 0;
+  for (const mesh of eligibleMeshes) {
+    const mat = mesh.material;
+    if (!materialIds.has(mat)) {
+      materialIds.set(mat, nextMaterialId++);
+    }
+    const materialId = materialIds.get(mat);
+    const geomFingerprint = computeGeometryFingerprint(mesh.geometry);
+    const key = `${materialId}|${geomFingerprint}`;
+    let bucket = buckets.get(key);
+    if (!bucket) {
+      bucket = [];
+      buckets.set(key, bucket);
+    }
+    bucket.push(mesh);
+  }
+  const verifiedGroups = [];
+  for (const bucket of buckets.values()) {
+    if (bucket.length < 2) continue;
+    const subGroups = verifyGeometryEquality(bucket);
+    for (const subGroup of subGroups) {
+      if (subGroup.length >= 2) {
+        verifiedGroups.push(subGroup);
+      }
+    }
+  }
+  if (verifiedGroups.length === 0) return;
+  root.updateWorldMatrix(true, true);
+  const rootInverse = new THREE12.Matrix4().copy(root.matrixWorld).invert();
+  let totalMeshesInstanced = 0;
+  let totalInstancedMeshes = 0;
+  let totalDuplicatesRemoved = 0;
+  const tempMatrix = new THREE12.Matrix4();
+  const flipMatrix = new THREE12.Matrix4().makeScale(-1, 1, 1);
+  for (const group of verifiedGroups) {
+    const seenMatrixKeys = /* @__PURE__ */ new Set();
+    const uniqueMatrices = [];
+    for (const mesh of group) {
+      tempMatrix.multiplyMatrices(rootInverse, mesh.matrixWorld);
+      const key = matrixKey(tempMatrix);
+      if (!seenMatrixKeys.has(key)) {
+        seenMatrixKeys.add(key);
+        uniqueMatrices.push(tempMatrix.clone());
+      }
+    }
+    const duplicatesInGroup = group.length - uniqueMatrices.length;
+    totalDuplicatesRemoved += duplicatesInGroup;
+    if (uniqueMatrices.length < 2) {
+      for (let i = 1; i < group.length; i++) {
+        group[i].removeFromParent();
+        if (group[i].geometry !== group[0].geometry) {
+          group[i].geometry.dispose();
+        }
+        const mat = group[i].material;
+        if (mat !== group[0].material) {
+          mat.dispose();
+        }
+      }
+      continue;
+    }
+    const normalMatrices = uniqueMatrices.filter((m) => m.determinant() >= 0);
+    const mirroredMatrices = uniqueMatrices.filter((m) => m.determinant() < 0);
+    const referenceMesh = group[0];
+    const keptGeometry = referenceMesh.geometry;
+    const keptMaterial = referenceMesh.material;
+    for (const mesh of group) {
+      mesh.removeFromParent();
+      if (mesh.geometry !== keptGeometry) {
+        mesh.geometry.dispose();
+      }
+      const mat = mesh.material;
+      if (mat !== keptMaterial) {
+        mat.dispose();
+      }
+    }
+    if (normalMatrices.length > 0) {
+      const instancedMesh = new THREE12.InstancedMesh(
+        referenceMesh.geometry,
+        referenceMesh.material,
+        normalMatrices.length
+      );
+      instancedMesh.castShadow = referenceMesh.castShadow;
+      instancedMesh.receiveShadow = referenceMesh.receiveShadow;
+      for (let i = 0; i < normalMatrices.length; i++) {
+        instancedMesh.setMatrixAt(i, normalMatrices[i]);
+      }
+      instancedMesh.instanceMatrix.needsUpdate = true;
+      root.add(instancedMesh);
+      totalMeshesInstanced += normalMatrices.length;
+      totalInstancedMeshes++;
+    }
+    if (mirroredMatrices.length > 0) {
+      const instancedMesh = new THREE12.InstancedMesh(
+        referenceMesh.geometry,
+        referenceMesh.material,
+        mirroredMatrices.length
+      );
+      instancedMesh.castShadow = referenceMesh.castShadow;
+      instancedMesh.receiveShadow = referenceMesh.receiveShadow;
+      instancedMesh.scale.set(-1, 1, 1);
+      for (let i = 0; i < mirroredMatrices.length; i++) {
+        tempMatrix.multiplyMatrices(flipMatrix, mirroredMatrices[i]);
+        instancedMesh.setMatrixAt(i, tempMatrix);
+      }
+      instancedMesh.instanceMatrix.needsUpdate = true;
+      root.add(instancedMesh);
+      totalMeshesInstanced += mirroredMatrices.length;
+      totalInstancedMeshes++;
+    }
+  }
+  const drawCallsSaved = totalMeshesInstanced - totalInstancedMeshes;
+  const duplicates = totalDuplicatesRemoved > 0 ? `, removed ${totalDuplicatesRemoved} duplicate overlapping meshes` : "";
+  if (debug) {
+    console.log(`autoInstanceScene:
+Instanced ${totalMeshesInstanced} meshes into ${totalInstancedMeshes} InstancedMesh objects
+Savings: ${drawCallsSaved} draw calls
+${duplicates}`);
+  }
+}
+function computeGeometryFingerprint(geometry) {
+  const posAttr = geometry.getAttribute("position");
+  const indexAttr = geometry.index;
+  const vertexCount = posAttr ? posAttr.count : 0;
+  const indexCount = indexAttr ? indexAttr.count : 0;
+  let posHash = 0;
+  if (posAttr) {
+    posHash = hashTypedArray(posAttr.array);
+  }
+  let idxHash = 0;
+  if (indexAttr) {
+    idxHash = hashTypedArray(indexAttr.array);
+  }
+  const normalAttr = geometry.getAttribute("normal");
+  let normalHash = 0;
+  if (normalAttr) {
+    normalHash = hashTypedArray(normalAttr.array);
+  }
+  const uvAttr = geometry.getAttribute("uv");
+  let uvHash = 0;
+  if (uvAttr) {
+    uvHash = hashTypedArray(uvAttr.array);
+  }
+  return `${vertexCount}:${indexCount}:${posHash}:${idxHash}:${normalHash}:${uvHash}`;
+}
+var _hashFloat32 = new Float32Array(1);
+var _hashDataView = new DataView(_hashFloat32.buffer);
+function hashTypedArray(arr) {
+  let hash = 2166136261;
+  const len = arr.length;
+  const step = len > 256 ? Math.floor(len / 256) : 1;
+  for (let i = 0; i < len; i += step) {
+    _hashFloat32[0] = arr[i];
+    const intBits = _hashDataView.getInt32(0, true);
+    hash ^= intBits;
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function verifyGeometryEquality(meshes) {
+  const groups = [];
+  for (const mesh of meshes) {
+    let placed = false;
+    for (const group of groups) {
+      if (geometriesAreEqual(group[0].geometry, mesh.geometry)) {
+        group.push(mesh);
+        placed = true;
+        break;
+      }
+    }
+    if (!placed) {
+      groups.push([mesh]);
+    }
+  }
+  return groups;
+}
+function geometriesAreEqual(a, b) {
+  if (a === b) return true;
+  const attrNamesA = Object.keys(a.attributes);
+  const attrNamesB = Object.keys(b.attributes);
+  if (attrNamesA.length !== attrNamesB.length) return false;
+  for (const name of attrNamesA) {
+    const attrA = a.getAttribute(name);
+    const attrB = b.getAttribute(name);
+    if (!attrA || !attrB) return false;
+    if (attrA.count !== attrB.count) return false;
+    if (attrA.itemSize !== attrB.itemSize) return false;
+    if (!typedArraysEqual(attrA.array, attrB.array))
+      return false;
+  }
+  const idxA = a.index;
+  const idxB = b.index;
+  if (idxA === null !== (idxB === null)) return false;
+  if (idxA && idxB) {
+    if (idxA.count !== idxB.count) return false;
+    if (!typedArraysEqual(idxA.array, idxB.array))
+      return false;
+  }
+  return true;
+}
+function typedArraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+var MATRIX_QUANTIZE = 1e5;
+function matrixKey(m) {
+  const e = m.elements;
+  let s = "" + Math.round(e[0] * MATRIX_QUANTIZE);
+  for (let i = 1; i < 16; i++) {
+    s += "," + Math.round(e[i] * MATRIX_QUANTIZE);
+  }
+  return s;
+}
+
+// src/elements/ThreeJSModel.ts
 function createFilteredClip(clip, nodeNames) {
   const compatibleTracks = clip.tracks.filter((track) => {
     const trackName = track.name;
     const nodeName = trackName.split(".")[0];
     return nodeNames.has(nodeName);
   });
-  const filteredClip = new THREE12.AnimationClip(clip.name, clip.duration, compatibleTracks);
+  const filteredClip = new THREE13.AnimationClip(clip.name, clip.duration, compatibleTracks);
   return filteredClip;
 }
 var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
@@ -1933,16 +2167,17 @@ var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
           child.receiveShadow = true;
         }
       });
+      autoInstanceScene(result.group);
       const group = result.group;
       const bones = /* @__PURE__ */ new Map();
       const nodeNames = /* @__PURE__ */ new Set();
       group.traverse((object) => {
         nodeNames.add(object.name);
-        if (object instanceof THREE12.Bone) {
+        if (object instanceof THREE13.Bone) {
           bones.set(object.name, object);
         }
       });
-      const boundingBox = new THREE12.Box3();
+      const boundingBox = new THREE13.Box3();
       group.updateWorldMatrix(true, true);
       boundingBox.expandByObject(group);
       this.loadedState = {
@@ -1950,12 +2185,12 @@ var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
         bones,
         nodeNames,
         boundingBox: {
-          size: boundingBox.getSize(new THREE12.Vector3(0, 0, 0)),
-          centerOffset: boundingBox.getCenter(new THREE12.Vector3(0, 0, 0))
+          size: boundingBox.getSize(new THREE13.Vector3(0, 0, 0)),
+          centerOffset: boundingBox.getCenter(new THREE13.Vector3(0, 0, 0))
         }
       };
       this.model.getContainer().add(group);
-      this.childAnimationMixer = new THREE12.AnimationMixer(group);
+      this.childAnimationMixer = new THREE13.AnimationMixer(group);
       if (!this.documentTimeTickListener) {
         this.documentTimeTickListener = this.model.addDocumentTimeTickListener(
           (documentTime) => {
@@ -1990,8 +2225,8 @@ var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
     });
   }
   registerAttachment(attachment) {
-    const childAnimationGroup = new THREE12.AnimationObjectGroup();
-    const childAnimationMixer = new THREE12.AnimationMixer(childAnimationGroup);
+    const childAnimationGroup = new THREE13.AnimationObjectGroup();
+    const childAnimationMixer = new THREE13.AnimationMixer(childAnimationGroup);
     const animState = {
       directAnimation: null,
       childAnimations: {
@@ -2012,8 +2247,8 @@ var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
       if (!attachmentLoadedState) {
         throw new Error("Attachment must be loaded before registering");
       }
-      const animationGroup = new THREE12.AnimationObjectGroup();
-      const animationMixer = new THREE12.AnimationMixer(animationGroup);
+      const animationGroup = new THREE13.AnimationObjectGroup();
+      const animationMixer = new THREE13.AnimationMixer(animationGroup);
       const action = animationMixer.clipAction(this.animState.currentAnimationClip);
       animState.directAnimation = {
         animationMixer,
@@ -2040,7 +2275,7 @@ var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
       this.clearDebugVisualisation();
     } else {
       if (!this.debugBoundingBox) {
-        this.debugBoundingBox = new THREE12.Mesh(
+        this.debugBoundingBox = new THREE13.Mesh(
           _ThreeJSModel.DebugBoundingBoxGeometry,
           _ThreeJSModel.DebugBoundingBoxMaterial
         );
@@ -2121,8 +2356,8 @@ var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
       currentAnimationClip: anim,
       appliedAnimation: null
     };
-    const animationGroup = new THREE12.AnimationObjectGroup();
-    const animationMixer = new THREE12.AnimationMixer(animationGroup);
+    const animationGroup = new THREE13.AnimationObjectGroup();
+    const animationMixer = new THREE13.AnimationMixer(animationGroup);
     const action = animationMixer.clipAction(anim);
     this.animState.appliedAnimation = {
       animationGroup,
@@ -2323,8 +2558,8 @@ var _ThreeJSModel = class _ThreeJSModel extends ModelGraphics {
     }
   }
 };
-_ThreeJSModel.DebugBoundingBoxGeometry = new THREE12.BoxGeometry(1, 1, 1, 1, 1, 1);
-_ThreeJSModel.DebugBoundingBoxMaterial = new THREE12.MeshBasicMaterial({
+_ThreeJSModel.DebugBoundingBoxGeometry = new THREE13.BoxGeometry(1, 1, 1, 1, 1, 1);
+_ThreeJSModel.DebugBoundingBoxMaterial = new THREE13.MeshBasicMaterial({
   color: 16711680,
   wireframe: true,
   transparent: true,
@@ -2355,15 +2590,15 @@ var ThreeJSOverlay = class extends OverlayGraphics {
 
 // src/elements/ThreeJSPlane.ts
 import { PlaneGraphics } from "@mml-io/mml-web";
-import * as THREE13 from "three";
+import * as THREE14 from "three";
 var _ThreeJSPlane = class _ThreeJSPlane extends PlaneGraphics {
   constructor(plane) {
     super(plane);
     this.plane = plane;
-    this.material = new THREE13.MeshStandardMaterial({
-      color: new THREE13.Color(plane.props.color.r, plane.props.color.g, plane.props.color.b)
+    this.material = new THREE14.MeshStandardMaterial({
+      color: new THREE14.Color(plane.props.color.r, plane.props.color.g, plane.props.color.b)
     });
-    this.mesh = new THREE13.Mesh(_ThreeJSPlane.planeGeometry, this.material);
+    this.mesh = new THREE14.Mesh(_ThreeJSPlane.planeGeometry, this.material);
     this.mesh.castShadow = plane.props.castShadows;
     this.mesh.receiveShadow = true;
     this.plane.getContainer().add(this.mesh);
@@ -2376,7 +2611,7 @@ var _ThreeJSPlane = class _ThreeJSPlane extends PlaneGraphics {
     return this.mesh;
   }
   setColor(color) {
-    this.material.color = new THREE13.Color(color.r, color.g, color.b);
+    this.material.color = new THREE14.Color(color.r, color.g, color.b);
   }
   setWidth(width) {
     this.mesh.scale.x = width;
@@ -2396,12 +2631,12 @@ var _ThreeJSPlane = class _ThreeJSPlane extends PlaneGraphics {
   dispose() {
   }
 };
-_ThreeJSPlane.planeGeometry = new THREE13.PlaneGeometry(1, 1);
+_ThreeJSPlane.planeGeometry = new THREE14.PlaneGeometry(1, 1);
 var ThreeJSPlane = _ThreeJSPlane;
 
 // src/elements/ThreeJSPositionProbe.ts
 import { PositionProbeGraphics } from "@mml-io/mml-web";
-import * as THREE14 from "three";
+import * as THREE15 from "three";
 var _ThreeJSPositionProbe = class _ThreeJSPositionProbe extends PositionProbeGraphics {
   constructor(positionProbe) {
     super(positionProbe);
@@ -2429,7 +2664,7 @@ var _ThreeJSPositionProbe = class _ThreeJSPositionProbe extends PositionProbeGra
       this.clearDebugVisualisation();
     } else {
       if (this.positionProbe.isConnected && !this.debugMesh) {
-        const mesh = new THREE14.Mesh(
+        const mesh = new THREE15.Mesh(
           _ThreeJSPositionProbe.DebugGeometry,
           _ThreeJSPositionProbe.DebugMaterial
         );
@@ -2451,8 +2686,8 @@ var _ThreeJSPositionProbe = class _ThreeJSPositionProbe extends PositionProbeGra
     this.clearDebugVisualisation();
   }
 };
-_ThreeJSPositionProbe.DebugGeometry = new THREE14.SphereGeometry(1, 16, 16, 1);
-_ThreeJSPositionProbe.DebugMaterial = new THREE14.MeshBasicMaterial({
+_ThreeJSPositionProbe.DebugGeometry = new THREE15.SphereGeometry(1, 16, 16, 1);
+_ThreeJSPositionProbe.DebugMaterial = new THREE15.MeshBasicMaterial({
   color: 16711680,
   wireframe: true,
   transparent: true,
@@ -2485,11 +2720,11 @@ var ThreeJSPrompt = class extends PromptGraphics {
 
 // src/elements/ThreeJSRemoteDocument.ts
 import { RemoteDocumentGraphics } from "@mml-io/mml-web";
-import * as THREE16 from "three";
+import * as THREE17 from "three";
 
 // src/ThreeJSReconnectingStatus.ts
 import { CanvasText } from "@mml-io/mml-web";
-import * as THREE15 from "three";
+import * as THREE16 from "three";
 function createReconnectingStatus() {
   const canvas = new CanvasText().renderText("Reconnecting", {
     bold: true,
@@ -2509,18 +2744,18 @@ function createReconnectingStatus() {
     },
     alignment: "center"
   });
-  const texture = new THREE15.Texture(canvas);
-  texture.minFilter = THREE15.LinearFilter;
-  texture.magFilter = THREE15.LinearFilter;
-  texture.format = THREE15.RGBAFormat;
+  const texture = new THREE16.Texture(canvas);
+  texture.minFilter = THREE16.LinearFilter;
+  texture.magFilter = THREE16.LinearFilter;
+  texture.format = THREE16.RGBAFormat;
   texture.needsUpdate = true;
   const width = canvas.width;
   const height = canvas.height;
-  const material = new THREE15.MeshBasicMaterial({
+  const material = new THREE16.MeshBasicMaterial({
     map: texture,
-    side: THREE15.DoubleSide
+    side: THREE16.DoubleSide
   });
-  const geometry = new THREE15.PlaneGeometry(width / 100, height / 100, 1, 1);
+  const geometry = new THREE16.PlaneGeometry(width / 100, height / 100, 1, 1);
   return { geometry, material, width: width / 100, height: height / 100 };
 }
 var reconnectingStatus = null;
@@ -2547,7 +2782,7 @@ var ThreeJSRemoteDocument = class extends RemoteDocumentGraphics {
     } else {
       if (this.statusUI === null) {
         const { geometry, material, height } = getThreeJSReconnectingStatus();
-        const mesh = new THREE16.Mesh(
+        const mesh = new THREE17.Mesh(
           geometry,
           material
         );
@@ -2563,17 +2798,17 @@ var ThreeJSRemoteDocument = class extends RemoteDocumentGraphics {
 
 // src/elements/ThreeJSSphere.ts
 import { SphereGraphics } from "@mml-io/mml-web";
-import * as THREE17 from "three";
+import * as THREE18 from "three";
 var defaultSphereWidthSegments = 16;
 var defaultSphereHeightSegments = 16;
 var _ThreeJSSphere = class _ThreeJSSphere extends SphereGraphics {
   constructor(sphere) {
     super(sphere);
     this.sphere = sphere;
-    this.material = new THREE17.MeshStandardMaterial({
-      color: new THREE17.Color(sphere.props.color.r, sphere.props.color.g, sphere.props.color.b)
+    this.material = new THREE18.MeshStandardMaterial({
+      color: new THREE18.Color(sphere.props.color.r, sphere.props.color.g, sphere.props.color.b)
     });
-    this.mesh = new THREE17.Mesh(_ThreeJSSphere.sphereGeometry, this.material);
+    this.mesh = new THREE18.Mesh(_ThreeJSSphere.sphereGeometry, this.material);
     this.mesh.castShadow = sphere.props.castShadows;
     this.mesh.receiveShadow = true;
     this.sphere.getContainer().add(this.mesh);
@@ -2586,7 +2821,7 @@ var _ThreeJSSphere = class _ThreeJSSphere extends SphereGraphics {
     return this.mesh;
   }
   setColor(color) {
-    this.material.color = new THREE17.Color(color.r, color.g, color.b);
+    this.material.color = new THREE18.Color(color.r, color.g, color.b);
   }
   setRadius(radius) {
     this.mesh.scale.x = radius * 2;
@@ -2605,7 +2840,7 @@ var _ThreeJSSphere = class _ThreeJSSphere extends SphereGraphics {
   dispose() {
   }
 };
-_ThreeJSSphere.sphereGeometry = new THREE17.SphereGeometry(
+_ThreeJSSphere.sphereGeometry = new THREE18.SphereGeometry(
   0.5,
   defaultSphereWidthSegments,
   defaultSphereHeightSegments
@@ -2617,7 +2852,7 @@ import {
   Matr4,
   TransformableGraphics
 } from "@mml-io/mml-web";
-import * as THREE18 from "three";
+import * as THREE19 from "three";
 var ThreeJSTransformable = class extends TransformableGraphics {
   constructor(transformableElement) {
     super(transformableElement);
@@ -2631,7 +2866,7 @@ var ThreeJSTransformable = class extends TransformableGraphics {
     return new Matr4(container.matrixWorld.elements);
   }
   getWorldPosition() {
-    return this.getContainer().getWorldPosition(new THREE18.Vector3());
+    return this.getContainer().getWorldPosition(new THREE19.Vector3());
   }
   getLocalPosition() {
     return this.getContainer().position;
@@ -2679,13 +2914,13 @@ var ThreeJSTransformable = class extends TransformableGraphics {
     this.getContainer().position.z = z;
   }
   setRotationX(rotationX) {
-    this.getContainer().rotation.x = rotationX * THREE18.MathUtils.DEG2RAD;
+    this.getContainer().rotation.x = rotationX * THREE19.MathUtils.DEG2RAD;
   }
   setRotationY(rotationY) {
-    this.getContainer().rotation.y = rotationY * THREE18.MathUtils.DEG2RAD;
+    this.getContainer().rotation.y = rotationY * THREE19.MathUtils.DEG2RAD;
   }
   setRotationZ(rotationZ) {
-    this.getContainer().rotation.z = rotationZ * THREE18.MathUtils.DEG2RAD;
+    this.getContainer().rotation.z = rotationZ * THREE19.MathUtils.DEG2RAD;
   }
   setScaleX(scaleX) {
     this.getContainer().scale.x = scaleX;
@@ -2714,12 +2949,12 @@ import {
   VideoGraphics,
   WHEPVideoSource
 } from "@mml-io/mml-web";
-import * as THREE19 from "three";
+import * as THREE20 from "three";
 var audioRefDistance2 = 1;
 var audioRolloffFactor2 = 1;
-var disabledVideoMaterial = new THREE19.MeshStandardMaterial({
+var disabledVideoMaterial = new THREE20.MeshStandardMaterial({
   color: 0,
-  side: THREE19.DoubleSide
+  side: THREE20.DoubleSide
 });
 var ThreeJSVideo = class extends VideoGraphics {
   constructor(video, updateMeshCallback) {
@@ -2728,13 +2963,13 @@ var ThreeJSVideo = class extends VideoGraphics {
     this.updateMeshCallback = updateMeshCallback;
     this.videoSource = null;
     this.loadedVideoState = null;
-    const geometry = new THREE19.PlaneGeometry(1, 1, 1, 1);
-    this.videoMaterial = new THREE19.MeshStandardMaterial({
+    const geometry = new THREE20.PlaneGeometry(1, 1, 1, 1);
+    this.videoMaterial = new THREE20.MeshStandardMaterial({
       color: 16777215,
       transparent: false,
-      side: THREE19.DoubleSide
+      side: THREE20.DoubleSide
     });
-    this.mesh = new THREE19.Mesh(geometry, disabledVideoMaterial);
+    this.mesh = new THREE20.Mesh(geometry, disabledVideoMaterial);
     this.mesh.castShadow = true;
     this.mesh.receiveShadow = false;
     this.video.getContainer().add(this.mesh);
@@ -2830,7 +3065,7 @@ var ThreeJSVideo = class extends VideoGraphics {
         video.crossOrigin = "anonymous";
         const audioListener = this.getAudioListener();
         const audioContext = audioListener.context;
-        const audio = new THREE19.PositionalAudio(audioListener);
+        const audio = new THREE20.PositionalAudio(audioListener);
         audio.setMediaElementSource(video);
         audio.setVolume(this.video.props.volume);
         audio.setRefDistance(audioRefDistance2);
@@ -2857,7 +3092,7 @@ var ThreeJSVideo = class extends VideoGraphics {
           if (!this.loadedVideoState || this.loadedVideoState.video !== video) {
             return;
           }
-          const videoTexture = new THREE19.VideoTexture(video);
+          const videoTexture = new THREE20.VideoTexture(video);
           this.videoMaterial.map = videoTexture;
           this.videoMaterial.needsUpdate = true;
           this.mesh.material = this.videoMaterial;
@@ -2896,12 +3131,12 @@ var ThreeJSVideo = class extends VideoGraphics {
   updateMaterialEmissiveIntensity() {
     if (this.loadedVideoState && this.loadedVideoState.videoTexture) {
       if (this.video.props.emissive > 0) {
-        this.videoMaterial.emissive = new THREE19.Color(16777215);
+        this.videoMaterial.emissive = new THREE20.Color(16777215);
         this.videoMaterial.emissiveMap = this.loadedVideoState.videoTexture;
         this.videoMaterial.emissiveIntensity = this.video.props.emissive;
         this.videoMaterial.needsUpdate = true;
       } else {
-        this.videoMaterial.emissive = new THREE19.Color(0);
+        this.videoMaterial.emissive = new THREE20.Color(0);
         this.videoMaterial.emissiveMap = null;
         this.videoMaterial.emissiveIntensity = 1;
         this.videoMaterial.needsUpdate = true;
@@ -2968,7 +3203,7 @@ var ThreeJSImageHandleImpl = class {
 };
 
 // src/resources/ThreeJSImageResource.ts
-import * as THREE20 from "three";
+import * as THREE21 from "three";
 
 // src/resources/ThreeJSImageLoader.ts
 var ThreeJSImageLoader = class {
@@ -3014,7 +3249,7 @@ var ThreeJSImageResource = class {
       (image) => {
         this.imageElement = image;
         this.hasTransparency = hasTransparency2(image);
-        this.texture = new THREE20.CanvasTexture(
+        this.texture = new THREE21.CanvasTexture(
           image
         );
         const result = {
@@ -3126,7 +3361,7 @@ var ThreeJSLabelHandleImpl = class {
 
 // src/resources/ThreeJSLabelResource.ts
 import { CanvasText as CanvasText2 } from "@mml-io/mml-web";
-import * as THREE21 from "three";
+import * as THREE22 from "three";
 var _ThreeJSLabelResource = class _ThreeJSLabelResource {
   constructor(options, onRemove, maxTextureSize = _ThreeJSLabelResource.DEFAULT_MAX_TEXTURE_SIZE) {
     this.onRemove = onRemove;
@@ -3160,22 +3395,22 @@ var _ThreeJSLabelResource = class _ThreeJSLabelResource {
     let texture;
     if (canvas.width === 0 || canvas.height === 0) {
       const emptyPixel = new Uint8Array([0, 0, 0, 0]);
-      texture = new THREE21.DataTexture(emptyPixel, 1, 1, THREE21.RGBAFormat);
+      texture = new THREE22.DataTexture(emptyPixel, 1, 1, THREE22.RGBAFormat);
     } else {
       const ctx = canvas.getContext("2d", { willReadFrequently: true });
       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      texture = new THREE21.DataTexture(
+      texture = new THREE22.DataTexture(
         imageData.data,
         canvas.width,
         canvas.height,
-        THREE21.RGBAFormat
+        THREE22.RGBAFormat
       );
     }
     texture.flipY = true;
-    texture.colorSpace = THREE21.NoColorSpace;
+    texture.colorSpace = THREE22.NoColorSpace;
     texture.premultiplyAlpha = true;
-    texture.magFilter = THREE21.LinearFilter;
-    texture.minFilter = THREE21.LinearMipmapLinearFilter;
+    texture.magFilter = THREE22.LinearFilter;
+    texture.minFilter = THREE22.LinearMipmapLinearFilter;
     texture.generateMipmaps = true;
     texture.needsUpdate = true;
     this.result = {
@@ -3480,7 +3715,7 @@ import {
   getRelativePositionAndRotationRelativeToObject,
   MElement as MElement3
 } from "@mml-io/mml-web";
-import * as THREE22 from "three";
+import * as THREE23 from "three";
 var mouseMovePixelsThreshold = 10;
 var mouseMoveTimeThresholdMilliseconds = 500;
 var ThreeJSClickTrigger = class _ThreeJSClickTrigger {
@@ -3491,7 +3726,7 @@ var ThreeJSClickTrigger = class _ThreeJSClickTrigger {
     this.eventHandlerCollection = new EventHandlerCollection();
     this.mouseDownTime = null;
     this.mouseMoveDelta = 0;
-    this.raycaster = new THREE22.Raycaster();
+    this.raycaster = new THREE23.Raycaster();
     this.eventHandlerCollection.add(clickTarget, "mousedown", this.handleMouseDown.bind(this));
     this.eventHandlerCollection.add(clickTarget, "mouseup", this.handleMouseUp.bind(this));
     this.eventHandlerCollection.add(clickTarget, "mousemove", this.handleMouseMove.bind(this));
@@ -3534,7 +3769,7 @@ var ThreeJSClickTrigger = class _ThreeJSClickTrigger {
       x = event.offsetX / width * 2 - 1;
       y = -(event.offsetY / height * 2 - 1);
     }
-    this.raycaster.setFromCamera(new THREE22.Vector2(x, y), this.camera);
+    this.raycaster.setFromCamera(new THREE23.Vector2(x, y), this.camera);
     const intersections = this.raycaster.intersectObject(this.rootContainer, true);
     if (intersections.length > 0) {
       for (const intersection of intersections) {
@@ -3618,7 +3853,7 @@ var ThreeJSGraphicsInterface = {
 };
 
 // src/ThreeJSInteractionAdapter.ts
-import * as THREE23 from "three";
+import * as THREE24 from "three";
 var _ThreeJSInteractionAdapter = class _ThreeJSInteractionAdapter {
   static interactionShouldShowDistance(interaction, camera, scene) {
     const worldPos = interaction.getContainer().getWorldPosition(_ThreeJSInteractionAdapter.worldPos);
@@ -3680,16 +3915,16 @@ var _ThreeJSInteractionAdapter = class _ThreeJSInteractionAdapter {
     return false;
   }
 };
-_ThreeJSInteractionAdapter.worldPos = new THREE23.Vector3();
-_ThreeJSInteractionAdapter.matrix = new THREE23.Matrix4();
-_ThreeJSInteractionAdapter.frustum = new THREE23.Frustum();
-_ThreeJSInteractionAdapter.raycaster = new THREE23.Raycaster();
+_ThreeJSInteractionAdapter.worldPos = new THREE24.Vector3();
+_ThreeJSInteractionAdapter.matrix = new THREE24.Matrix4();
+_ThreeJSInteractionAdapter.frustum = new THREE24.Frustum();
+_ThreeJSInteractionAdapter.raycaster = new THREE24.Raycaster();
 _ThreeJSInteractionAdapter.intersections = new Array();
-_ThreeJSInteractionAdapter.direction = new THREE23.Vector3();
+_ThreeJSInteractionAdapter.direction = new THREE24.Vector3();
 var ThreeJSInteractionAdapter = _ThreeJSInteractionAdapter;
 
 // src/ThreeJSMemoryInspector.ts
-import * as THREE24 from "three";
+import * as THREE25 from "three";
 var ThreeJSMemoryInspector = class _ThreeJSMemoryInspector {
   /**
    * Opens a new window with a comprehensive memory report including thumbnails
@@ -4180,7 +4415,7 @@ var ThreeJSMemoryInspector = class _ThreeJSMemoryInspector {
     });
     let sharedRenderer = null;
     try {
-      sharedRenderer = new THREE24.WebGLRenderer({ antialias: true, alpha: true });
+      sharedRenderer = new THREE25.WebGLRenderer({ antialias: true, alpha: true });
       sharedRenderer.setSize(200, 200);
       sharedRenderer.setClearColor(2236962, 0);
       geometryMap.forEach((geometry, uuid) => {
@@ -4291,19 +4526,19 @@ var ThreeJSMemoryInspector = class _ThreeJSMemoryInspector {
       const scale = Math.min(maxSize / width, maxSize / height);
       const thumbWidth = Math.floor(width * scale);
       const thumbHeight = Math.floor(height * scale);
-      renderer = new THREE24.WebGLRenderer({ antialias: false, alpha: true });
+      renderer = new THREE25.WebGLRenderer({ antialias: false, alpha: true });
       renderer.setSize(thumbWidth, thumbHeight);
       renderer.setClearColor(0, 0);
-      const scene = new THREE24.Scene();
-      const camera = new THREE24.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0, 1);
+      const scene = new THREE25.Scene();
+      const camera = new THREE25.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0, 1);
       camera.position.z = 0.5;
-      const geometry = new THREE24.PlaneGeometry(1, 1);
-      const material = new THREE24.MeshBasicMaterial({
+      const geometry = new THREE25.PlaneGeometry(1, 1);
+      const material = new THREE25.MeshBasicMaterial({
         map: texture,
-        side: THREE24.DoubleSide,
+        side: THREE25.DoubleSide,
         transparent: true
       });
-      const plane = new THREE24.Mesh(geometry, material);
+      const plane = new THREE25.Mesh(geometry, material);
       scene.add(plane);
       renderer.render(scene, camera);
       const canvas = renderer.domElement;
@@ -4322,27 +4557,27 @@ var ThreeJSMemoryInspector = class _ThreeJSMemoryInspector {
   }
   static createGeometryPreview(geometry, renderer) {
     try {
-      const tempScene = new THREE24.Scene();
-      const tempCamera = new THREE24.PerspectiveCamera(50, 1, 0.1, 1e3);
+      const tempScene = new THREE25.Scene();
+      const tempCamera = new THREE25.PerspectiveCamera(50, 1, 0.1, 1e3);
       renderer.setSize(200, 200);
       renderer.setClearColor(2236962, 0);
-      const material = new THREE24.MeshStandardMaterial({
+      const material = new THREE25.MeshStandardMaterial({
         color: 15658734,
         roughness: 0.9,
         metalness: 0,
-        side: THREE24.DoubleSide,
+        side: THREE25.DoubleSide,
         polygonOffset: true,
         polygonOffsetFactor: 1,
         polygonOffsetUnits: 1
       });
-      const mesh = new THREE24.Mesh(geometry, material);
-      const wireGeom = new THREE24.WireframeGeometry(geometry);
-      const wireMaterial = new THREE24.LineBasicMaterial({ color: 16777215 });
-      const wireframe = new THREE24.LineSegments(wireGeom, wireMaterial);
+      const mesh = new THREE25.Mesh(geometry, material);
+      const wireGeom = new THREE25.WireframeGeometry(geometry);
+      const wireMaterial = new THREE25.LineBasicMaterial({ color: 16777215 });
+      const wireframe = new THREE25.LineSegments(wireGeom, wireMaterial);
       wireframe.renderOrder = 1;
       geometry.computeBoundingSphere();
       let radius = 0;
-      let center = new THREE24.Vector3();
+      let center = new THREE25.Vector3();
       if (geometry.boundingSphere) {
         radius = geometry.boundingSphere.radius;
         center.copy(geometry.boundingSphere.center);
@@ -4352,9 +4587,9 @@ var ThreeJSMemoryInspector = class _ThreeJSMemoryInspector {
         if (!box) {
           return null;
         }
-        center = new THREE24.Vector3();
+        center = new THREE25.Vector3();
         box.getCenter(center);
-        const size = new THREE24.Vector3();
+        const size = new THREE25.Vector3();
         box.getSize(size);
         radius = Math.max(size.x, size.y, size.z) * 0.5;
       }
@@ -4363,11 +4598,11 @@ var ThreeJSMemoryInspector = class _ThreeJSMemoryInspector {
       const fovRad = tempCamera.fov * Math.PI / 180;
       let distance = radius / Math.sin(fovRad / 2);
       distance *= 1.05;
-      const dir = new THREE24.Vector3(1, 1, 1).normalize();
+      const dir = new THREE25.Vector3(1, 1, 1).normalize();
       tempCamera.position.copy(dir.multiplyScalar(distance));
       tempCamera.lookAt(0, 0, 0);
-      const ambientLight = new THREE24.AmbientLight(4210752, 0.6);
-      const directionalLight = new THREE24.DirectionalLight(16777215, 0.8);
+      const ambientLight = new THREE25.AmbientLight(4210752, 0.6);
+      const directionalLight = new THREE25.DirectionalLight(16777215, 0.8);
       directionalLight.position.set(1, 1, 1);
       tempScene.add(mesh);
       tempScene.add(wireframe);