@inweb/viewer-three 26.11.0 → 26.11.1

package/dist/viewer-three.module.js

@@ -23,7 +23,7 @@
 
 import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Raycaster, MathUtils, EdgesGeometry, Matrix4, Vector4, Controls, Clock, Sphere, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Matrix4, Vector4, MathUtils, Raycaster, EdgesGeometry, Controls, Clock, Sphere, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
 import { Wireframe } from 'three/examples/jsm/lines/Wireframe.js';
@@ -913,91 +913,116 @@ class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
     }
 }
 
-const ModelUnits = {
-    Meters: { name: "Meters", type: "m", scale: 1.0 },
-    Centimeters: { name: "Centimeters", type: "cm", scale: 0.01 },
-    Millimeters: { name: "Millimeters", type: "mm", scale: 0.001 },
-    Feet: { name: "Feet", type: "ft", scale: 0.3048 },
-    Inches: { name: "Inches", type: "in", scale: 0.0254 },
-    Yards: { name: "Yards", type: "yd", scale: 0.9144 },
-    Kilometers: { name: "Kilometers", type: "km", scale: 1000.0 },
-    Miles: { name: "Miles", type: "mi", scale: 1609.344 },
-    Micrometers: { name: "Micrometers", type: "µm", scale: 0.000001 },
-    Mils: { name: "Mils", type: "mil", scale: 0.0000254 },
-    MicroInches: { name: "Micro-inches", type: "µin", scale: 0.0000000254 },
-    Default: { name: "File units", type: "unit", scale: 1.0 },
-};
-function convertUnits(fromUnits, toUnits, distance) {
-    const fromFactor = 1 / (ModelUnits[fromUnits] || ModelUnits.Default).scale;
-    const toFactor = (ModelUnits[toUnits] || ModelUnits.Default).scale || 1;
-    return distance * fromFactor * toFactor;
-}
-
-function getDisplayUnit(units) {
-    return (ModelUnits[units] || ModelUnits.Default).type;
-}
-function calculatePrecision(value) {
-    const distance = Math.abs(value);
-    if (distance >= 1000)
-        return 0;
-    if (distance >= 10)
-        return 1;
-    if (distance >= 0.1)
-        return 2;
-    if (distance >= 0.001)
-        return 3;
-    return distance > 0 ? Math.floor(-Math.log10(distance)) + 1 : 2;
-}
-function formatNumber(distance, digits, precision) {
-    let result = distance.toFixed(digits);
-    if (precision === "Auto")
-        result = result.replace(/\.0+$/, "").replace(/\.$/, "");
-    if (+result !== distance)
-        result = "~ " + result;
-    return result;
-}
-function formatDistance(distance, units, precision = 2) {
-    let digits;
-    if (precision === "Auto")
-        digits = calculatePrecision(distance);
-    else if (Number.isFinite(precision))
-        digits = precision;
-    else
-        digits = parseFloat(precision);
-    if (!Number.isFinite(digits))
-        digits = 2;
-    else if (digits < 0)
-        digits = 0;
-    else if (digits > 10)
-        digits = 10;
-    if (ModelUnits[units]) {
-        return formatNumber(distance, digits, precision) + " " + ModelUnits[units].type;
-    }
-    else if (units) {
-        return formatNumber(distance, digits, precision) + " " + units;
-    }
-    else {
-        return formatNumber(distance, digits, precision);
-    }
-}
-
+const PRECISION = 0.01;
 const DESKTOP_SNAP_DISTANCE = 10;
 const MOBILE_SNAP_DISTANCE = 50;
+class MeasureLineDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.onPointerDown = (event) => {
+            if (event.button !== 0)
+                return;
+            this.line.startPoint = this.snapper.getSnapPoint(event);
+            this.line.render();
+            this.viewer.canvas.setPointerCapture(event.pointerId);
+            this.orbit.enabled = !this.line.startPoint;
+        };
+        this.onPointerMove = (event) => {
+            if (this.orbit.enabled && this.orbit.state !== -1)
+                return;
+            const snapPoint = this.snapper.getSnapPoint(event);
+            if (snapPoint && this.line.endPoint && snapPoint.equals(this.line.endPoint))
+                return;
+            this.line.endPoint = snapPoint;
+            this.line.render();
+            if (this.line.startPoint)
+                this.changed = true;
+        };
+        this.onPointerUp = (event) => {
+            if (this.line.startPoint && this.line.endPoint && this.line.getDistance() >= PRECISION) {
+                this.line = new MeasureLine(this.overlay);
+                this.overlay.addLine(this.line);
+            }
+            else {
+                this.line.startPoint = undefined;
+                this.line.endPoint = undefined;
+                this.line.render();
+            }
+            this.viewer.canvas.releasePointerCapture(event.pointerId);
+            this.orbit.enabled = true;
+        };
+        this.onPointerCancel = (event) => {
+            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+        };
+        this.onPointerLeave = () => {
+            this.line.endPoint = undefined;
+            this.line.render();
+        };
+        this.renderOverlay = () => {
+            this.overlay.render();
+        };
+        this.updateSnapper = () => {
+            this.snapper.setFromViewer(this.viewer);
+        };
+        this.updateSnapperCamera = () => {
+            this.snapper.camera = this.viewer.camera;
+            this.overlay.camera = this.viewer.camera;
+        };
+        this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
+        this.overlay.attach();
+        this.line = new MeasureLine(this.overlay);
+        this.overlay.addLine(this.line);
+        this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
+        this.updateSnapper();
+        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.addEventListener("render", this.renderOverlay);
+        this.viewer.addEventListener("hide", this.updateSnapper);
+        this.viewer.addEventListener("isolate", this.updateSnapper);
+        this.viewer.addEventListener("show", this.updateSnapper);
+        this.viewer.addEventListener("showall", this.updateSnapper);
+        this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
+    }
+    dispose() {
+        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.removeEventListener("render", this.renderOverlay);
+        this.viewer.removeEventListener("hide", this.updateSnapper);
+        this.viewer.removeEventListener("isolate", this.updateSnapper);
+        this.viewer.removeEventListener("show", this.updateSnapper);
+        this.viewer.removeEventListener("showall", this.updateSnapper);
+        this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
+        this.snapper.dispose();
+        this.overlay.detach();
+        this.overlay.dispose();
+        super.dispose();
+    }
+}
 const _vertex = new Vector3();
 const _start = new Vector3();
 const _end = new Vector3();
 const _line = new Line3();
 const _center = new Vector3();
 const _projection = new Vector3();
-class Snapper {
-    constructor(camera, renderer, canvas) {
+class MeasureSnapper {
+    constructor(camera, canvas) {
         this.camera = camera;
-        this.renderer = renderer;
         this.canvas = canvas;
+        this.objects = [];
+        this.clippingPlanes = [];
         this.raycaster = new Raycaster();
         this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
         this.edgesCache = new WeakMap();
     }
+    dispose() {
+        this.objects = [];
+    }
     isMobile() {
         if (typeof navigator === "undefined")
             return false;
@@ -1006,7 +1031,7 @@ class Snapper {
     getMousePosition(event, target) {
         return target.set(event.clientX, event.clientY);
     }
-    getPointerIntersects(mouse, objects) {
+    getPointerIntersects(mouse) {
         const rect = this.canvas.getBoundingClientRect();
         const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
         const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
@@ -1020,8 +1045,8 @@ class Snapper {
             Points: { threshold: 0.01 },
             Sprite: {},
         };
-        let intersects = this.raycaster.intersectObjects(objects, false);
-        (this.renderer.clippingPlanes || []).forEach((plane) => {
+        let intersects = this.raycaster.intersectObjects(this.objects, false);
+        this.clippingPlanes.forEach((plane) => {
             intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
         });
         return intersects;
@@ -1043,8 +1068,9 @@ class Snapper {
         }
         return 0.1;
     }
-    getSnapPoint(mouse, objects) {
-        const intersections = this.getPointerIntersects(mouse, objects);
+    getSnapPoint(event) {
+        const mouse = this.getMousePosition(event, new Vector2());
+        const intersections = this.getPointerIntersects(mouse);
         if (intersections.length === 0)
             return undefined;
         const object = intersections[0].object;
@@ -1092,133 +1118,13 @@ class Snapper {
             return object.localToWorld(snapPoint);
         return intersectionPoint.clone();
     }
-}
-
-const _downPoint = new Vector2();
-class MeasureLineDragger extends OrbitDragger {
-    constructor(viewer) {
-        super(viewer);
-        this.scale = 1.0;
-        this.units = "";
-        this.precision = 2;
-        this.onPointerDown = (event) => {
-            if (event.button !== 0)
-                return;
-            const mouse = this.snapper.getMousePosition(event, _downPoint);
-            this.line.startPoint = this.snapper.getSnapPoint(mouse, this.objects);
-            this.line.render();
-            this.viewer.canvas.setPointerCapture(event.pointerId);
-            this.orbit.enabled = !this.line.startPoint;
-        };
-        this.onPointerMove = (event) => {
-            if (this.orbit.enabled && this.orbit.state !== -1)
-                return;
-            const mouse = this.snapper.getMousePosition(event, _downPoint);
-            const snapPoint = this.snapper.getSnapPoint(mouse, this.objects);
-            if (snapPoint && this.line.endPoint && snapPoint.equals(this.line.endPoint))
-                return;
-            this.line.endPoint = snapPoint;
-            this.line.render();
-            if (this.line.startPoint)
-                this.changed = true;
-        };
-        this.onPointerUp = (event) => {
-            if (this.line.startPoint && this.line.endPoint && this.line.getDistance() > 0) {
-                this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
-                this.overlay.addLine(this.line);
-            }
-            else {
-                this.line.startPoint = undefined;
-                this.line.endPoint = undefined;
-                this.line.render();
-            }
-            this.viewer.canvas.releasePointerCapture(event.pointerId);
-            this.orbit.enabled = true;
-        };
-        this.onPointerCancel = (event) => {
-            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
-        };
-        this.onPointerLeave = () => {
-            this.line.endPoint = undefined;
-            this.line.render();
-        };
-        this.clearOverlay = () => {
-            this.overlay.clear();
-            this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
-            this.overlay.addLine(this.line);
-        };
-        this.renderOverlay = () => {
-            this.overlay.render();
-        };
-        this.updateObjects = () => {
-            this.objects.length = 0;
-            this.viewer.models.forEach((model) => {
-                model.getVisibleObjects().forEach((object) => this.objects.push(object));
-            });
-        };
-        this.updateSnapperCamera = () => {
-            this.snapper.camera = this.viewer.camera;
-            this.overlay.camera = this.viewer.camera;
-        };
-        this.updateUnits = () => {
-            var _a, _b;
-            const model = this.viewer.models[0];
-            const units = (_a = this.viewer.options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
-            const precision = (_b = this.viewer.options.rulerPrecision) !== null && _b !== void 0 ? _b : "Default";
-            if (units === "Default") {
-                this.scale = model.getUnitScale();
-                this.units = model.getUnitString();
-            }
-            else {
-                this.scale = convertUnits(model.getUnits(), units, 1);
-                this.units = units;
-            }
-            if (precision === "Default") {
-                this.precision = model.getPrecision();
-            }
-            else {
-                this.precision = precision;
-            }
-            this.overlay.updateLineUnits(this.scale, this.units, this.precision);
-        };
-        this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
-        this.overlay.attach();
-        this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
-        this.overlay.addLine(this.line);
-        this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
-        this.objects = [];
-        this.updateObjects();
-        this.updateUnits();
-        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
-        this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
-        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
-        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel);
-        this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
-        this.viewer.addEventListener("render", this.renderOverlay);
-        this.viewer.addEventListener("hide", this.updateObjects);
-        this.viewer.addEventListener("isolate", this.updateObjects);
-        this.viewer.addEventListener("show", this.updateObjects);
-        this.viewer.addEventListener("showall", this.updateObjects);
-        this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
-        this.viewer.addEventListener("optionschange", this.updateUnits);
-    }
-    dispose() {
-        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
-        this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
-        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp);
-        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel);
-        this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
-        this.viewer.removeEventListener("render", this.renderOverlay);
-        this.viewer.removeEventListener("hide", this.updateObjects);
-        this.viewer.removeEventListener("isolate", this.updateObjects);
-        this.viewer.removeEventListener("show", this.updateObjects);
-        this.viewer.removeEventListener("showall", this.updateObjects);
-        this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
-        this.viewer.removeEventListener("optionschange", this.updateUnits);
+    setFromViewer(viewer) {
         this.objects.length = 0;
-        this.overlay.detach();
-        this.overlay.dispose();
-        super.dispose();
+        viewer.models.forEach((model) => {
+            model.getVisibleObjects().forEach((object) => this.objects.push(object));
+        });
+        this.camera = viewer.camera;
+        this.clippingPlanes = viewer.renderer.clippingPlanes || [];
     }
 }
 class MeasureOverlay {
@@ -1238,9 +1144,6 @@ class MeasureOverlay {
         this.projector = new MeasureProjector(camera, canvas);
         this.resizeObserver = new ResizeObserver(this.resizeContainer);
     }
-    dispose() {
-        this.clear();
-    }
     attach() {
         this.container = document.createElement("div");
         this.container.id = "measure-container";
@@ -1253,6 +1156,9 @@ class MeasureOverlay {
         this.canvas.parentElement.appendChild(this.container);
         this.resizeObserver.observe(this.canvas);
     }
+    dispose() {
+        this.clear();
+    }
     detach() {
         this.resizeObserver.disconnect();
         this.container.remove();
@@ -1260,7 +1166,7 @@ class MeasureOverlay {
     }
     clear() {
         this.lines.forEach((line) => line.dispose());
-        this.lines.length = 0;
+        this.lines = [];
     }
     render() {
         this.projector.setFromCamera(this.camera);
@@ -1275,18 +1181,13 @@ class MeasureOverlay {
     removeLine(line) {
         this.lines = this.lines.filter((x) => x !== line);
     }
-    updateLineUnits(scale, units, precision) {
-        this.lines.forEach((line) => {
-            line.scale = scale;
-            line.units = units;
-            line.precision = precision;
-        });
-    }
 }
 const _middlePoint = new Vector3();
 class MeasureLine {
-    constructor(overlay, scale, units, precision) {
+    constructor(overlay) {
         this.id = MathUtils.generateUUID();
+        this.unit = "";
+        this.scale = 1.0;
         this.size = 10.0;
         this.lineWidth = 2;
         this.style = {
@@ -1297,9 +1198,6 @@ class MeasureLine {
             font: "1rem system-ui",
         };
         this.overlay = overlay;
-        this.scale = scale;
-        this.units = units;
-        this.precision = precision;
         this.elementStartPoint = overlay.container.appendChild(document.createElement("div"));
         this.elementEndPoint = overlay.container.appendChild(document.createElement("div"));
         this.elementLine = overlay.container.appendChild(document.createElement("div"));
@@ -1354,10 +1252,10 @@ class MeasureLine {
             _middlePoint.lerpVectors(this.startPoint, this.endPoint, 0.5);
             const { point, visible } = projector.projectPoint(_middlePoint);
             const distance = this.getDistance();
-            this.elementLabel.style.display = visible && distance > 0 ? "block" : "none";
+            this.elementLabel.style.display = visible && distance >= PRECISION ? "block" : "none";
             this.elementLabel.style.left = `${point.x}px`;
             this.elementLabel.style.top = `${point.y}px`;
-            this.elementLabel.innerHTML = formatDistance(distance, this.units, this.precision);
+            this.elementLabel.innerHTML = `${distance.toFixed(2)} ${this.unit}`;
         }
         else {
             this.elementLabel.style.display = "none";
@@ -2880,11 +2778,10 @@ class SelectionComponent {
             const upPosition = this.getMousePosition(event, new Vector2());
             if (upPosition.distanceTo(this.downPosition) !== 0)
                 return;
-            const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
             let intersections = [];
             this.viewer.models.forEach((model) => {
                 const objects = model.getVisibleObjects();
-                const intersects = snapper.getPointerIntersects(upPosition, objects);
+                const intersects = this.getPointerIntersects(upPosition, objects);
                 if (intersects.length > 0)
                     intersections.push({ ...intersects[0], model });
             });
@@ -2913,6 +2810,7 @@ class SelectionComponent {
             this.highlighter = this.viewer.getComponent("HighlighterComponent");
         };
         this.viewer = viewer;
+        this.raycaster = new Raycaster();
         this.downPosition = new Vector2();
         this.viewer.addEventListener("pointerdown", this.onPointerDown);
         this.viewer.addEventListener("pointerup", this.onPointerUp);
@@ -2928,6 +2826,26 @@ class SelectionComponent {
     getMousePosition(event, target) {
         return target.set(event.clientX, event.clientY);
     }
+    getPointerIntersects(mouse, objects) {
+        const rect = this.viewer.canvas.getBoundingClientRect();
+        const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
+        const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
+        const coords = new Vector2(x, y);
+        this.raycaster.setFromCamera(coords, this.viewer.camera);
+        this.raycaster.params = {
+            Mesh: {},
+            Line: { threshold: 0.05 },
+            Line2: { threshold: 0.05 },
+            LOD: {},
+            Points: { threshold: 0.01 },
+            Sprite: {},
+        };
+        let intersects = this.raycaster.intersectObjects(objects, false);
+        (this.viewer.renderer.clippingPlanes || []).forEach((plane) => {
+            intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
+        });
+        return intersects;
+    }
     select(objects, model) {
         if (!model) {
             this.viewer.models.forEach((model) => this.select(objects, model));
@@ -3147,18 +3065,6 @@ class ModelImpl {
         this.scene.traverse(disposeObject);
         this.scene.clear();
     }
-    getUnits() {
-        return "Meters";
-    }
-    getUnitScale() {
-        return convertUnits(this.getUnits(), "Meters", 1);
-    }
-    getUnitString() {
-        return getDisplayUnit(this.getUnits());
-    }
-    getPrecision() {
-        return 2;
-    }
     getExtents(target) {
         this.scene.traverseVisible((object) => !object.children.length && target.expandByObject(object));
         return target;
@@ -3406,7 +3312,6 @@ class GltfStructure {
     this.textureCache = new Map();
     this.materialCache = new Map();
     this.uri = "";
-    this._nextObjectId = 0;
   }
   async initialize(loader) {
     this.json = await this.loadController.loadJson();
@@ -4277,7 +4182,7 @@ class DynamicGltfLoader {
         if (node.handle) {
           mesh.userData.handle = node.handle;
         } else {
-          mesh.userData.handle = this.getFullHandle(node.structure.id, mesh.userData.handle);
+          mesh.userData.handle = `${node.structure.id}${STRUCTURE_ID_SEPARATOR}${mesh.userData.handle}`;
         }
         if (mesh.material.name === "edges") {
           mesh.userData.isEdge = true;
@@ -4418,15 +4323,12 @@ class DynamicGltfLoader {
       })),
     });
   }
-  getFullHandle(structureId, originalHandle) {
-    return `${structureId}${STRUCTURE_ID_SEPARATOR}${originalHandle}`;
-  }
   async processNodeHierarchy(structure, nodeId, parentGroup) {
     const nodeDef = structure.json.nodes[nodeId];
     let nodeGroup = null;
     let handle = null;
     if (nodeDef.extras?.handle) {
-      handle = this.getFullHandle(structure.id, nodeDef.extras.handle);
+      handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${nodeDef.extras.handle}`;
     }
     if (nodeDef.camera !== undefined) {
       const camera = this.loadCamera(structure, nodeDef.camera, nodeDef);
@@ -4443,7 +4345,7 @@ class DynamicGltfLoader {
       if (nodeDef.extras) {
         nodeGroup.userData = { ...nodeDef.extras };
         if (nodeGroup.userData.handle) {
-          nodeGroup.userData.handle = this.getFullHandle(structure.id, nodeGroup.userData.handle);
+          nodeGroup.userData.handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${nodeGroup.userData.handle}`;
         }
       }
       if (nodeDef.matrix) {
@@ -4488,7 +4390,7 @@ class DynamicGltfLoader {
         this.edgeNodes.push(uniqueNodeId);
       }
       if (meshDef.extras && meshDef.extras.handle) {
-        handle = this.getFullHandle(structure.id, meshDef.extras.handle);
+        handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${meshDef.extras.handle}`;
       }
       this.nodes.set(uniqueNodeId, {
         position: nodeGroup ? nodeGroup.position.clone() : new Vector3().setFromMatrixPosition(nodeMatrix),
@@ -4501,7 +4403,7 @@ class DynamicGltfLoader {
         structure,
         extras: nodeDef.extras,
         geometryExtents,
-        handle: handle || this.getFullHandle(structure.id, structure._nextObjectId++),
+        handle,
       });
     }
     if (nodeDef.children) {
@@ -5084,6 +4986,8 @@ class DynamicGltfLoader {
         let currentVertexOffset = 0;
         for (const mesh of group.objects) {
           const geometry = mesh.geometry.clone();
+          mesh.updateWorldMatrix(true, false);
+          geometry.applyMatrix4(mesh.matrixWorld);
           const handle = mesh.userData.handle;
           if (!this.objectIdToIndex.has(handle)) {
             this.objectIdToIndex.set(handle, this.maxObjectId++);
@@ -5189,9 +5093,12 @@ class DynamicGltfLoader {
           vertexCount,
         });
         currentVertexOffset += vertexCount;
+        line.updateWorldMatrix(true, false);
+        const matrix = line.matrixWorld;
         const vector = new Vector3();
         for (let i = 0; i < vertexCount; i++) {
           vector.fromBufferAttribute(positionAttr, i);
+          vector.applyMatrix4(matrix);
           positions[posOffset++] = vector.x;
           positions[posOffset++] = vector.y;
           positions[posOffset++] = vector.z;
@@ -5270,6 +5177,8 @@ class DynamicGltfLoader {
         for (const line of group.objects) {
           isEdge = line.userData.isEdge;
           const geometry = line.geometry.clone();
+          line.updateWorldMatrix(true, false);
+          geometry.applyMatrix4(line.matrixWorld);
           const handle = line.userData.handle;
           if (!this.objectIdToIndex.has(handle)) {
             this.objectIdToIndex.set(handle, this.maxObjectId++);
@@ -5354,6 +5263,8 @@ class DynamicGltfLoader {
         const handles = new Set();
         for (const points of group.objects) {
           const geometry = points.geometry.clone();
+          points.updateWorldMatrix(true, false);
+          geometry.applyMatrix4(points.matrixWorld);
           geometries.push(geometry);
           optimizedObjects.push(points);
           handles.add(points.userData.handle);
@@ -5404,6 +5315,7 @@ class DynamicGltfLoader {
       const hasNormals = lineSegmentsArray.some((segment) => segment.geometry.attributes.normal !== undefined);
       lineSegmentsArray.forEach((segment) => {
         const clonedGeometry = segment.geometry.clone();
+        segment.updateWorldMatrix(true, false);
         clonedGeometry.applyMatrix4(segment.matrixWorld);
         if (hasNormals && !clonedGeometry.attributes.normal) {
           clonedGeometry.computeVertexNormals();