@inweb/viewer-three 27.2.3 → 27.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.2.3",
+  "version": "27.3.0",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.2.3",
-    "@inweb/eventemitter2": "~27.2.3",
-    "@inweb/markup": "~27.2.3",
-    "@inweb/viewer-core": "~27.2.3"
+    "@inweb/client": "~27.3.0",
+    "@inweb/eventemitter2": "~27.3.0",
+    "@inweb/markup": "~27.3.0",
+    "@inweb/viewer-core": "~27.3.0"
   },
   "devDependencies": {
     "@streamparser/json": "^0.0.22",

package/src/Viewer/loaders/DynamicGltfLoader/DynamicGltfLoader.js

@@ -110,6 +110,12 @@ export class DynamicGltfLoader {
     this.objectTransforms = new Map(); // originalObject -> Matrix4
     this.transformedGeometries = new Map(); // mergedObject.uuid -> original position data
 
+    // TODO: Remove when highlight is implemented via shader.
+    // Sync transforms to original (hidden) objects so GeometryHighlighter
+    // wireframes follow the exploded positions.
+    this.syncTransformsToOriginalObjects = true;
+    this._originalObjectMatrices = new Map(); // object -> original matrix (for restore)
+
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
 
@@ -1495,6 +1501,7 @@ export class DynamicGltfLoader {
 
     this.objectTransforms.clear();
     this.transformedGeometries.clear();
+    this._originalObjectMatrices.clear();
 
     this.totalLoadedObjects = 0;
     this.currentMemoryUsage = 0;
@@ -2562,6 +2569,76 @@ export class DynamicGltfLoader {
         this.updateMaterialUniforms();
       }
     }
+
+    // TODO: Remove this block when highlight is implemented via shader.
+    // Sync transforms to original (hidden) objects so that
+    // GeometryHighlighter wireframes follow exploded positions.
+    if (this.syncTransformsToOriginalObjects) {
+      this._syncOriginalObjectTransforms(objectTransformMap);
+    }
+  }
+
+  // TODO: Remove when highlight is implemented via shader.
+  _syncOriginalObjectTransforms(objectTransformMap) {
+    // First, restore any previously transformed objects back to their saved position
+    for (const [obj, savedPos] of this._originalObjectMatrices) {
+      obj.position.copy(savedPos);
+      if (obj.userData.highlight) {
+        obj.userData.highlight.position.copy(savedPos);
+      }
+    }
+    this._originalObjectMatrices.clear();
+
+    // The transform matrix is in the structure root's local space.
+    // Original objects may be nested inside groups with their own transforms,
+    // so we must convert the offset from structure-root-local → parent-local space.
+    const _offset = new Vector3();
+    const _parentInverse = new Matrix4();
+
+    if (objectTransformMap instanceof Map) {
+      for (const [object, matrix] of objectTransformMap.entries()) {
+        if (!object.userData?.handle) continue;
+
+        // Save original position before modifying
+        if (!this._originalObjectMatrices.has(object)) {
+          this._originalObjectMatrices.set(object, object.position.clone());
+        }
+
+        // Extract translation from the transform matrix (structure-root-local space)
+        _offset.setFromMatrixPosition(matrix);
+
+        // Convert offset from structure-root-local to world space,
+        // then from world space to parent-local space.
+        // The structure root's matrixWorld converts local→world.
+        // The parent's inverse matrixWorld converts world→parent-local.
+        // But we only need to transform a direction/offset (not a point),
+        // so we transform two points and subtract.
+        if (object.userData.structureId) {
+          const rootGroup = this.structureRoots.get(object.userData.structureId);
+          if (rootGroup && object.parent && object.parent !== rootGroup) {
+            // Transform offset: structureRoot-local → world → parent-local
+            // For a vector (not point): apply rotation/scale only
+            const origin = new Vector3(0, 0, 0);
+            origin.applyMatrix4(rootGroup.matrixWorld);
+            _offset.applyMatrix4(rootGroup.matrixWorld);
+            _offset.sub(origin);
+
+            const parentOrigin = new Vector3(0, 0, 0);
+            _parentInverse.copy(object.parent.matrixWorld).invert();
+            parentOrigin.applyMatrix4(_parentInverse);
+            _offset.applyMatrix4(_parentInverse);
+            _offset.sub(parentOrigin);
+          }
+        }
+
+        object.position.add(_offset);
+
+        // Also update highlight wireframe if it exists right now
+        if (object.userData.highlight) {
+          object.userData.highlight.position.copy(object.position);
+        }
+      }
+    }
   }
 
   createExplodeTransforms(objects = null, explodeCenter = null, explodeFactor = 1.5) {
@@ -2675,6 +2752,18 @@ export class DynamicGltfLoader {
   clearTransforms() {
     this.objectTransforms.clear();
     this._resetTransformData(true);
+
+    // TODO: Remove when highlight is implemented via shader.
+    // Restore original object positions
+    if (this.syncTransformsToOriginalObjects) {
+      for (const [obj, savedPos] of this._originalObjectMatrices) {
+        obj.position.copy(savedPos);
+        if (obj.userData.highlight) {
+          obj.userData.highlight.position.copy(savedPos);
+        }
+      }
+      this._originalObjectMatrices.clear();
+    }
   }
 
   clearHandleTransforms() {

package/src/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.ts

@@ -133,7 +133,7 @@ export class DynamicModelImpl extends ModelImpl {
   }
 
   override explode(scale = 0, coeff = 4): this {
-    const centers = new Map();
+    const centersCache = new Map();
 
     const calcObjectCenter = (object: Object3D, target: Vector3): Vector3 => {
       const extents = new Box3().setFromObject(object);
@@ -141,74 +141,85 @@ export class DynamicModelImpl extends ModelImpl {
       const handle = object.userData.handle;
       if (!handle) return extents.getCenter(target);
 
-      const center = centers.get(handle);
+      const center = centersCache.get(handle);
       if (center) return target.copy(center);
 
       const objects = this.getObjectsByHandles(handle);
       objects.forEach((x: Object3D) => extents.expandByObject(x));
       extents.getCenter(target);
 
-      centers.set(handle, target.clone());
+      centersCache.set(handle, target.clone());
 
       return target;
     };
 
-    function calcExplodeDepth(object: Object3D, depth: number): number {
-      let result = depth;
-      object.children
-        .filter((x: Object3D) => !x.userData.isOptimized)
-        .forEach((x: Object3D) => {
-          const objectDepth = calcExplodeDepth(x, depth + 1);
-          if (result < objectDepth) result = objectDepth;
-        });
+    const calcObjectDepth = (object: Object3D): number => {
+      if (object.userData.depth !== undefined) return object.userData.depth;
 
+      const parent = object.parent;
+      const depth = parent && object !== explodeRoot ? calcObjectDepth(parent) + 1 : 0;
+
+      object.userData.depth = depth;
       object.userData.originalPosition = object.position.clone();
       object.userData.originalCenter = calcObjectCenter(object, new Vector3());
 
-      return result;
-    }
+      return depth;
+    };
 
     const explodeScale = scale / 100;
     const explodeRoot = this.scene.children[0];
 
-    if (!explodeRoot.userData.explodeDepth) explodeRoot.userData.explodeDepth = calcExplodeDepth(explodeRoot, 1);
-    const maxDepth = explodeRoot.userData.explodeDepth;
+    if (!explodeRoot.userData.explodeDepth) {
+      let maxDepth = 0;
+
+      this.gltfLoader.originalObjects.forEach((object: Object3D) => {
+        const depth = calcObjectDepth(object);
+        if (depth > maxDepth) maxDepth = depth;
+      });
 
+      explodeRoot.userData.explodeDepth = maxDepth;
+    }
+
+    const maxDepth = explodeRoot.userData.explodeDepth;
     const scaledExplodeDepth = explodeScale * maxDepth + 1;
     const explodeDepth = 0 | scaledExplodeDepth;
     const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
 
-    const transformMap = new Map();
+    const offsetCache = new Map();
+
+    const calcObjectOffset = (object: Object3D, target: Vector3): Vector3 => {
+      if (offsetCache.has(object)) return target.copy(offsetCache.get(object));
 
-    function explodeObject(object, depth: number) {
-      if (object.isCamera) return;
-      if (object.userData.isHighlightWireframe) return;
+      const parent = object.parent;
+      if (parent && object !== explodeRoot) calcObjectOffset(parent, target);
 
-      object.position.copy(object.userData.originalPosition);
+      const depth = object.userData.depth;
 
-      if (depth > 0 && depth <= explodeDepth && !object.userData.isExplodeLocked) {
+      if (depth > 0 && depth <= explodeDepth) {
         let objectScale = explodeScale * coeff;
         if (depth === explodeDepth) objectScale *= currentSegmentFraction;
 
-        const parentCenter = object.parent.userData.originalCenter;
+        const parentCenter = parent.userData.originalCenter;
         const objectCenter = object.userData.originalCenter;
-        const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
+        const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
 
-        object.position.add(objectOffset);
-
-        const matrix = new Matrix4().makeTranslation(objectOffset.x, objectOffset.y, objectOffset.z);
-        transformMap.set(object, matrix);
+        target.add(localOffset);
       }
 
-      object.children
-        .filter((x: Object3D) => !x.userData.isOptimized)
-        .forEach((x: Object3D) => explodeObject(x, depth + 1));
-    }
+      offsetCache.set(object, target.clone());
 
-    explodeObject(explodeRoot, 0);
-    this.scene.updateMatrixWorld();
+      return target;
+    };
+
+    const transformMap = new Map();
+
+    this.gltfLoader.originalObjects.forEach((object: Object3D) => {
+      const globalOffset = calcObjectOffset(object, new Vector3());
+      transformMap.set(object, new Matrix4().makeTranslation(globalOffset));
+    });
 
     this.gltfLoader.applyObjectTransforms(transformMap);
+    this.scene.updateMatrixWorld();
 
     return this;
   }

package/src/Viewer/models/ModelImpl.ts

@@ -383,35 +383,36 @@ export class ModelImpl implements IModelImpl {
   }
 
   explode(scale = 0, coeff = 4): this {
-    const centers = new Map();
+    const centersCache = new Map();
 
-    const getObjectCenter = (object: Object3D, target: Vector3): Vector3 => {
+    const calcObjectCenter = (object: Object3D, target: Vector3): Vector3 => {
       const extents = new Box3().setFromObject(object);
 
       const handle = object.userData.handle;
       if (!handle) return extents.getCenter(target);
 
-      const center = centers.get(handle);
+      const center = centersCache.get(handle);
       if (center) return target.copy(center);
 
       const objects = this.getObjectsByHandles(handle);
       objects.forEach((x: Object3D) => extents.expandByObject(x));
       extents.getCenter(target);
 
-      centers.set(handle, target.clone());
+      centersCache.set(handle, target.clone());
 
       return target;
     };
 
     function calcExplodeDepth(object: Object3D, depth: number): number {
       let result = depth;
+
       object.children.forEach((x: Object3D) => {
         const objectDepth = calcExplodeDepth(x, depth + 1);
         if (result < objectDepth) result = objectDepth;
       });
 
       object.userData.originalPosition = object.position.clone();
-      object.userData.originalCenter = getObjectCenter(object, new Vector3());
+      object.userData.originalCenter = calcObjectCenter(object, new Vector3());
 
       return result;
     }
@@ -419,14 +420,16 @@ export class ModelImpl implements IModelImpl {
     const explodeScale = scale / 100;
     const explodeRoot = this.scene;
 
-    if (!explodeRoot.userData.explodeDepth) explodeRoot.userData.explodeDepth = calcExplodeDepth(explodeRoot, 1);
-    const maxDepth = explodeRoot.userData.explodeDepth;
+    if (!explodeRoot.userData.explodeDepth) {
+      explodeRoot.userData.explodeDepth = calcExplodeDepth(explodeRoot, 1);
+    }
 
+    const maxDepth = explodeRoot.userData.explodeDepth;
     const scaledExplodeDepth = explodeScale * maxDepth + 1;
     const explodeDepth = 0 | scaledExplodeDepth;
     const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
 
-    function explodeObject(object, depth: number) {
+    function explodeObject(object: any, depth: number) {
       if (object.isCamera) return;
       if (object.userData.isHighlightWireframe) return;
 
@@ -438,9 +441,9 @@ export class ModelImpl implements IModelImpl {
 
         const parentCenter = object.parent.userData.originalCenter;
         const objectCenter = object.userData.originalCenter;
-        const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
+        const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
 
-        object.position.add(objectOffset);
+        object.position.add(localOffset);
       }
 
       object.children.forEach((x: Object3D) => explodeObject(x, depth + 1));