@inweb/viewer-three 26.9.0 → 26.9.2

package/dist/viewer-three.module.js

@@ -785,6 +785,13 @@ class OrbitDragger {
             this.viewer.target.copy(this.orbit.target);
             this.viewer.update();
             switch (this.orbit.state) {
+              case STATE.ROTATE:
+              case STATE.TOUCH_ROTATE:
+                this.viewer.emitEvent({
+                    type: "orbit"
+                });
+                break;
+
               case STATE.PAN:
               case STATE.TOUCH_PAN:
                 this.viewer.emitEvent({
@@ -805,6 +812,9 @@ class OrbitDragger {
                 });
                 break;
             }
+            this.viewer.emitEvent({
+                type: "changecamera"
+            });
             this.changed = true;
         };
         this.stopContextMenu = event => {
@@ -1448,6 +1458,9 @@ class WalkDragger {
         };
         this.controlsChange = () => {
             this.viewer.update();
+            this.viewer.emitEvent({
+                type: "changecamera"
+            });
         };
         this.walkspeedChange = event => {
             this.viewer.emitEvent(event);
@@ -1547,32 +1560,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 +1589,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",
@@ -1899,7 +1911,7 @@ class ExtentsComponent {
             const extents = new Box3;
             this.viewer.models.forEach((model => model.getExtents(extents)));
             this.viewer.extents.copy(extents);
-            extents.getCenter(this.viewer.target);
+            this.viewer.extents.getCenter(this.viewer.target);
         };
         this.viewer = viewer;
         this.viewer.addEventListener("databasechunk", this.syncExtents);
@@ -1931,8 +1943,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);
@@ -1987,25 +2003,7 @@ class ResizeCanvasComponent {
         this.resizeViewer = entries => {
             const {width: width, height: height} = entries[0].contentRect;
             if (!width || !height) return;
-            const camera = this.viewer.camera;
-            const aspect = width / height;
-            if (camera.isPerspectiveCamera) {
-                camera.aspect = aspect;
-                camera.updateProjectionMatrix();
-            }
-            if (camera.isOrthographicCamera) {
-                camera.left = camera.bottom * aspect;
-                camera.right = camera.top * aspect;
-                camera.updateProjectionMatrix();
-            }
-            this.viewer.renderer.setSize(width, height, true);
-            this.viewer.composer.setSize(width, height);
-            this.viewer.update(true);
-            this.viewer.emitEvent({
-                type: "resize",
-                width: width,
-                height: height
-            });
+            this.viewer.setSize(width, height);
         };
         this.viewer = viewer;
         this.resizeObserver = new ResizeObserver(this.resizeViewer);
@@ -2319,15 +2317,15 @@ class WCSHelper extends Object3D {
         this.orthoCamera.position.set(0, 0, 2);
         const matRed = new MeshBasicMaterial({
             toneMapped: false,
-            color: "#aa0000"
+            color: "#dd0000"
         });
         const matGreen = new MeshBasicMaterial({
             toneMapped: false,
-            color: "#00aa00"
+            color: "#00dd00"
         });
         const matBlue = new MeshBasicMaterial({
             toneMapped: false,
-            color: "#0000aa"
+            color: "#0000dd"
         });
         const spriteRed = this.getSpriteMaterial(matRed.color, "X");
         const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");
@@ -2722,11 +2720,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 +2736,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 +2753,8 @@ class GltfStructure {
         this.disposeMaterials();
         this.textureCache.clear();
         this.materials.clear();
+        this.activeChunkLoads = 0;
+        this.chunkQueue = [];
     }
     getJson() {
         return this.json;
@@ -2831,23 +2832,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 +3218,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 +3578,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 +3890,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 +3918,7 @@ class DynamicGltfLoader {
         this.originalObjectsToSelection.clear();
     }
     clear() {
+        this.chunkQueue = [];
         this.structures.forEach((structure => {
             if (structure) {
                 structure.clear();
@@ -4596,6 +4606,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 +4710,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;
@@ -4821,7 +4854,7 @@ class Viewer extends EventEmitter2 {
         this.target = new Vector3;
         this._activeDragger = null;
         this._components = [];
-        this.renderTime = 0;
+        this._renderTime = 0;
         this.render = this.render.bind(this);
         this.update = this.update.bind(this);
         this._markup = new Markup;
@@ -4842,13 +4875,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);
@@ -4879,6 +4912,7 @@ class Viewer extends EventEmitter2 {
         this.composer.addPass(this.fxaaPass);
         this.composer.addPass(this.ssaaRenderPass);
         this.composer.addPass(this.outputPass);
+        this.composer.setSize(width, height);
         this.canvas = canvas;
         this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
         this._markup.initialize(this.canvas, this.canvasEvents, this, this);
@@ -4887,8 +4921,8 @@ class Viewer extends EventEmitter2 {
         }
         this.syncOptions();
         this.syncOverlay();
-        this.renderTime = performance.now();
-        this.render(this.renderTime);
+        this._renderTime = performance.now();
+        this.render(this._renderTime);
         if (typeof onProgress === "function") onProgress(new ProgressEvent("progress", {
             lengthComputable: true,
             loaded: 1,
@@ -4944,8 +4978,30 @@ class Viewer extends EventEmitter2 {
     isInitialized() {
         return !!this.renderer;
     }
+    setSize(width, height, updateStyle = true) {
+        if (!this.renderer) return;
+        const camera = this.camera;
+        const aspect = width / height;
+        if (camera.isPerspectiveCamera) {
+            camera.aspect = aspect;
+            camera.updateProjectionMatrix();
+        }
+        if (camera.isOrthographicCamera) {
+            camera.left = camera.bottom * aspect;
+            camera.right = camera.top * aspect;
+            camera.updateProjectionMatrix();
+        }
+        this.renderer.setSize(width, height, updateStyle);
+        this.composer.setSize(width, height);
+        this.update(true);
+        this.emitEvent({
+            type: "resize",
+            width: width,
+            height: height
+        });
+    }
     update(force = false) {
-        this.renderNeeded = true;
+        this._renderNeeded = true;
         if (force) this.render();
         this.emitEvent({
             type: "update",
@@ -4955,11 +5011,11 @@ class Viewer extends EventEmitter2 {
     render(time, force = false) {
         var _a, _b;
         if (!this.renderer) return;
-        if (!(this.renderNeeded || force)) return;
+        if (!this._renderNeeded && !force) return;
         if (!time) time = performance.now();
-        const deltaTime = (time - this.renderTime) / 1e3;
-        this.renderTime = time;
-        this.renderNeeded = false;
+        const deltaTime = (time - this._renderTime) / 1e3;
+        this._renderTime = time;
+        this._renderNeeded = false;
         if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
             this.renderer.render(this.scene, this.camera);
             this.renderer.render(this.helpers, this.camera);
@@ -5217,7 +5273,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));
@@ -5238,8 +5294,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));