@inweb/viewer-three 26.8.2 → 26.9.1

package/dist/viewer-three.module.js

@@ -1547,32 +1547,28 @@ function collect(viewer) {
 
 function zoomTo(viewer, box) {
     if (box.isEmpty()) return;
-    const center = box.getCenter(new Vector3);
-    const sphere = box.getBoundingSphere(new Sphere);
+    const boxCenter = box.getCenter(new Vector3);
+    const boxSize = box.getBoundingSphere(new Sphere).radius;
     const rendererSize = viewer.renderer.getSize(new Vector2);
     const aspect = rendererSize.x / rendererSize.y;
     const camera = viewer.camera;
     if (camera.isPerspectiveCamera) {
-        const offset = new Vector3(0, 0, 1);
-        offset.applyQuaternion(camera.quaternion);
-        offset.multiplyScalar(sphere.radius / Math.tan(MathUtils.DEG2RAD * camera.fov * .5));
-        camera.position.copy(center).add(offset);
+        const offset = new Vector3(0, 0, 1).applyQuaternion(camera.quaternion).multiplyScalar(boxSize / Math.tan(MathUtils.DEG2RAD * camera.fov * .5));
+        camera.position.copy(offset).add(boxCenter);
         camera.updateMatrixWorld();
     }
     if (camera.isOrthographicCamera) {
-        camera.top = sphere.radius;
-        camera.bottom = -sphere.radius;
+        camera.top = boxSize;
+        camera.bottom = -boxSize;
         camera.left = camera.bottom * aspect;
         camera.right = camera.top * aspect;
         camera.zoom = 1;
         camera.updateProjectionMatrix();
-        const offset = new Vector3(0, 0, 1);
-        offset.applyQuaternion(camera.quaternion);
-        offset.multiplyScalar(viewer.extents.getBoundingSphere(new Sphere).radius * 3);
-        camera.position.copy(center).add(offset);
+        const offset = new Vector3(0, 0, 1).applyQuaternion(camera.quaternion).multiplyScalar(viewer.extents.getBoundingSphere(new Sphere).radius * 3);
+        camera.position.copy(offset).add(boxCenter);
         camera.updateMatrixWorld();
     }
-    viewer.target.copy(center);
+    viewer.target.copy(boxCenter);
     viewer.update();
     viewer.emitEvent({
         type: "zoom"
@@ -1580,28 +1576,31 @@ function zoomTo(viewer, box) {
 }
 
 const defaultViewPositions = {
-    front: new Vector3(0, 0, 1),
-    back: new Vector3(0, 0, -1),
-    left: new Vector3(-1, 0, 0),
-    right: new Vector3(1, 0, 0),
+    front: new Vector3(0, 0, -1),
+    back: new Vector3(0, 0, 1),
+    left: new Vector3(1, 0, 0),
+    right: new Vector3(-1, 0, 0),
     bottom: new Vector3(0, -1, 0),
     top: new Vector3(0, 1, 0),
-    ns: new Vector3(-.5, 1, -.5).normalize(),
-    sw: new Vector3(.5, 1, -.5).normalize(),
-    nw: new Vector3(.5, 1, .5).normalize(),
-    se: new Vector3(-.5, 1, .5).normalize()
+    se: new Vector3(-1, 1, -1).normalize(),
+    sw: new Vector3(1, 1, -1).normalize(),
+    ne: new Vector3(-1, 1, 1).normalize(),
+    nw: new Vector3(1, 1, 1).normalize()
 };
 
 function setDefaultViewPosition(viewer, position) {
-    const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
-    const center = viewer.extents.getCenter(new Vector3);
-    const sphere = viewer.extents.getBoundingSphere(new Sphere);
-    const offset = direction.clone().multiplyScalar(sphere.radius);
+    const extentsCenter = viewer.extents.getCenter(new Vector3);
+    const extentsSize = viewer.extents.getBoundingSphere(new Sphere).radius * 2;
+    const upY = new Vector3(0, 1, 0);
+    const offsetY = defaultViewPositions[position] || defaultViewPositions["sw"];
+    const up = (new Vector3).copy(viewer.camera.up);
+    const quaternion = (new Quaternion).setFromUnitVectors(upY, up);
+    const offset = (new Vector3).copy(offsetY).applyQuaternion(quaternion);
     const camera = viewer.camera;
-    camera.position.copy(center).add(offset);
-    camera.lookAt(center);
+    camera.position.copy(offset).multiplyScalar(extentsSize).add(extentsCenter);
+    camera.lookAt(extentsCenter);
     camera.updateMatrixWorld();
-    viewer.target.copy(center);
+    viewer.target.copy(extentsCenter);
     viewer.update();
     viewer.emit({
         type: "viewposition",
@@ -1931,8 +1930,12 @@ class LightComponent {
             if (this.viewer.extents.isEmpty()) return;
             const extentsCenter = this.viewer.extents.getCenter(new Vector3);
             const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius;
-            const front = (new Vector3).copy(this.viewer.camera.up).cross(new Vector3(1, 0, 0)).negate();
-            this.directionalLight.position.copy(this.viewer.camera.up).applyAxisAngle(front, -Math.PI * 30 / 180).multiplyScalar(extentsSize * 2).add(extentsCenter);
+            const upY = new Vector3(0, 1, 0);
+            const frontY = new Vector3(0, 0, -1);
+            const up = (new Vector3).copy(this.viewer.camera.up);
+            const quaternion = (new Quaternion).setFromUnitVectors(upY, up);
+            const front = (new Vector3).copy(frontY).applyQuaternion(quaternion).negate();
+            this.directionalLight.position.copy(up).applyAxisAngle(front, -Math.PI * 30 / 180).multiplyScalar(extentsSize * 2).add(extentsCenter);
             this.directionalLight.target.position.copy(extentsCenter);
             this.frontLight.position.copy(front).multiplyScalar(extentsSize * 2).add(extentsCenter);
             this.frontLight.target.position.copy(extentsCenter);
@@ -2722,11 +2725,12 @@ const MAX_GAP = 128 * 1024;
 const MAX_CHUNK = 30 * 1024 * 1024;
 
 class GltfStructure {
-    constructor(id) {
+    constructor(id, loadController) {
         this.id = `${id}`;
         this.json = null;
         this.baseUrl = "";
-        this.loadController = null;
+        this.loadController = loadController;
+        this.loader = null;
         this.batchDelay = 10;
         this.maxBatchSize = 5 * 1024 * 1024;
         this.maxRangesPerRequest = 512;
@@ -2737,10 +2741,10 @@ class GltfStructure {
         this.textureCache = new Map;
         this.materialCache = new Map;
     }
-    async initialize(loadController) {
-        this.json = await loadController.loadJson();
-        this.baseUrl = await loadController.baseUrl();
-        this.loadController = loadController;
+    async initialize(loader) {
+        this.json = await this.loadController.loadJson();
+        this.baseUrl = await this.loadController.baseUrl();
+        this.loader = loader;
     }
     clear() {
         this.json = null;
@@ -2754,6 +2758,8 @@ class GltfStructure {
         this.disposeMaterials();
         this.textureCache.clear();
         this.materials.clear();
+        this.activeChunkLoads = 0;
+        this.chunkQueue = [];
     }
     getJson() {
         return this.json;
@@ -2831,23 +2837,33 @@ class GltfStructure {
                 });
             }
         }
-        const promises = finalRanges.map((async range => {
-            const length = range.end - range.start;
-            const buffer = await this.loadController.loadBinaryData([ {
-                offset: range.start,
-                length: length
-            } ]);
-            for (const req of range.requests) {
-                const relOffset = req.offset - range.start;
-                try {
-                    req._resolve({
-                        buffer: buffer,
-                        relOffset: relOffset,
-                        length: req.length
-                    });
-                } catch (e) {
-                    req._reject(e);
+        const promises = finalRanges.map((async (range, index) => {
+            await this.loader.waitForChunkSlot();
+            try {
+                const length = range.end - range.start;
+                const buffer = await this.loadController.loadBinaryData([ {
+                    offset: range.start,
+                    length: length
+                } ]);
+                for (const req of range.requests) {
+                    const relOffset = req.offset - range.start;
+                    try {
+                        req._resolve({
+                            buffer: buffer,
+                            relOffset: relOffset,
+                            length: req.length
+                        });
+                    } catch (e) {
+                        req._reject(e);
+                    }
                 }
+            } catch (error) {
+                for (const req of range.requests) {
+                    req._reject(error);
+                }
+                console.warn(`Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`, error);
+            } finally {
+                this.loader.releaseChunkSlot();
             }
         }));
         await Promise.all(promises);
@@ -3207,6 +3223,9 @@ class DynamicGltfLoader {
         this.hiddenHandles = new Set;
         this.newOptimizedObjects = new Set;
         this.oldOptimizeObjects = new Set;
+        this.maxConcurrentChunks = 8;
+        this.activeChunkLoads = 0;
+        this.chunkQueue = [];
     }
     setVisibleEdges(visible) {
         this.visibleEdges = visible;
@@ -3564,6 +3583,7 @@ class DynamicGltfLoader {
         this.clear();
         const structureArray = Array.isArray(structures) ? structures : [ structures ];
         for (const structure of structureArray) {
+            await structure.initialize(this);
             this.structures.push(structure);
         }
         for (const structure of this.structures) {
@@ -3875,12 +3895,6 @@ class DynamicGltfLoader {
     clearNodesToLoad() {
         this.nodesToLoad = [];
     }
-    async addStructure(loadController) {
-        const structure = new GltfStructure;
-        await structure.initialize(loadController);
-        this.structures.push(structure);
-        return structure;
-    }
     removeOptimization() {
         this.originalObjects.forEach((obj => obj.visible = true));
         const disposeMerged = obj => {
@@ -3909,6 +3923,7 @@ class DynamicGltfLoader {
         this.originalObjectsToSelection.clear();
     }
     clear() {
+        this.chunkQueue = [];
         this.structures.forEach((structure => {
             if (structure) {
                 structure.clear();
@@ -4596,6 +4611,30 @@ class DynamicGltfLoader {
         }
         return extent;
     }
+    setMaxConcurrentChunks(maxChunks) {
+        if (maxChunks < 1) {
+            console.warn("Max concurrent chunks must be at least 1");
+            return;
+        }
+        this.maxConcurrentChunks = maxChunks;
+    }
+    waitForChunkSlot() {
+        if (this.activeChunkLoads < this.maxConcurrentChunks) {
+            this.activeChunkLoads++;
+            return Promise.resolve();
+        }
+        return new Promise((resolve => {
+            this.chunkQueue.push(resolve);
+        }));
+    }
+    releaseChunkSlot() {
+        this.activeChunkLoads--;
+        if (this.chunkQueue.length > 0) {
+            const nextResolve = this.chunkQueue.shift();
+            this.activeChunkLoads++;
+            nextResolve();
+        }
+    }
 }
 
 class GLTFCloudDynamicLoader {
@@ -4676,8 +4715,7 @@ class GLTFCloudDynamicLoader {
             },
             baseUrl: () => Promise.resolve(`${model.httpClient.serverUrl}${model.path}/`)
         };
-        const structure = new GltfStructure(model.id);
-        await structure.initialize(loadController);
+        const structure = new GltfStructure(model.id, loadController);
         await this.gltfLoader.loadStructure(structure);
         await this.gltfLoader.loadNodes();
         return this;
@@ -4842,13 +4880,13 @@ class Viewer extends EventEmitter2 {
         this.addEventListener("optionschange", (event => this.syncOptions(event.data)));
         this.scene = new Scene;
         this.helpers = new Helpers;
-        this.target = new Vector3;
+        this.target = new Vector3(0, 0, 0);
         const pixelRatio = window.devicePixelRatio;
         const rect = canvas.parentElement.getBoundingClientRect();
         const width = rect.width || 1;
         const height = rect.height || 1;
         const aspect = width / height;
-        this.camera = new PerspectiveCamera(45, aspect, .01, 1e3);
+        this.camera = new PerspectiveCamera(45, aspect, .001, 1e3);
         this.camera.up.set(0, 1, 0);
         this.camera.position.set(0, 0, 1);
         this.camera.lookAt(this.target);
@@ -5059,10 +5097,6 @@ class Viewer extends EventEmitter2 {
         this.models = [];
         this.scene.clear();
         this.helpers.clear();
-        this.models.forEach((model => model.dispose()));
-        this.models = [];
-        this.helpers.clear();
-        this.scene.clear();
         this.syncOptions();
         this.syncOverlay();
         this.update(true);
@@ -5221,7 +5255,7 @@ class Viewer extends EventEmitter2 {
                 camera.left = camera.bottom * aspect;
                 camera.right = camera.top * aspect;
                 camera.near = 0;
-                camera.far = extentsSize * 100;
+                camera.far = extentsSize * 1e3;
                 camera.zoom = orthogonal_camera.view_to_world_scale;
                 camera.updateProjectionMatrix();
                 camera.up.copy(getVector3FromPoint3d(orthogonal_camera.up_vector));
@@ -5242,8 +5276,8 @@ class Viewer extends EventEmitter2 {
                 const camera = new PerspectiveCamera;
                 camera.fov = perspective_camera.field_of_view;
                 camera.aspect = aspect;
-                camera.near = extentsSize / 100;
-                camera.far = extentsSize * 100;
+                camera.near = extentsSize / 1e3;
+                camera.far = extentsSize * 1e3;
                 camera.updateProjectionMatrix();
                 camera.up.copy(getVector3FromPoint3d(perspective_camera.up_vector));
                 camera.position.copy(getVector3FromPoint3d(perspective_camera.view_point));