@inweb/viewer-three 26.9.0 → 26.9.1

package/lib/Viewer/commands/SetDefaultViewPosition.d.ts

@@ -7,9 +7,9 @@ export declare const defaultViewPositions: {
     right: Vector3;
     bottom: Vector3;
     top: Vector3;
-    ns: Vector3;
+    se: Vector3;
     sw: Vector3;
+    ne: Vector3;
     nw: Vector3;
-    se: Vector3;
 };
 export declare function setDefaultViewPosition(viewer: Viewer, position: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.9.0",
+  "version": "26.9.1",
   "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": "~26.9.0",
-    "@inweb/eventemitter2": "~26.9.0",
-    "@inweb/markup": "~26.9.0",
-    "@inweb/viewer-core": "~26.9.0"
+    "@inweb/client": "~26.9.1",
+    "@inweb/eventemitter2": "~26.9.1",
+    "@inweb/markup": "~26.9.1",
+    "@inweb/viewer-core": "~26.9.1"
   },
   "devDependencies": {
     "@types/three": "^0.179.0",

package/src/Viewer/Viewer.ts

@@ -170,7 +170,7 @@ export class Viewer
 
     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();
@@ -178,7 +178,7 @@ export class Viewer
     const height = rect.height || 1;
     const aspect = width / height;
 
-    this.camera = new PerspectiveCamera(45, aspect, 0.01, 1000);
+    this.camera = new PerspectiveCamera(45, aspect, 0.001, 1000);
     this.camera.up.set(0, 1, 0);
     this.camera.position.set(0, 0, 1);
     this.camera.lookAt(this.target);
@@ -661,7 +661,7 @@ export class Viewer
         camera.left = camera.bottom * aspect;
         camera.right = camera.top * aspect;
         camera.near = 0;
-        camera.far = extentsSize * 100;
+        camera.far = extentsSize * 1000;
         camera.zoom = orthogonal_camera.view_to_world_scale;
         camera.updateProjectionMatrix();
 
@@ -686,8 +686,8 @@ export class Viewer
         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 / 1000;
+        camera.far = extentsSize * 1000;
         camera.updateProjectionMatrix();
 
         camera.up.copy(getVector3FromPoint3d(perspective_camera.up_vector));

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -21,36 +21,40 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Sphere, Vector3 } from "three";
+import { Quaternion, Sphere, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 import { zoomTo } from "./ZoomTo";
 
 export 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(-0.5, 1.0, -0.5).normalize(),
-  sw: new Vector3(0.5, 1.0, -0.5).normalize(),
-  nw: new Vector3(0.5, 1.0, 0.5).normalize(),
-  se: new Vector3(-0.5, 1.0, 0.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(),
 };
 
 export function setDefaultViewPosition(viewer: Viewer, position: string): void {
-  const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
+  const extentsCenter = viewer.extents.getCenter(new Vector3());
+  const extentsSize = viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
 
-  const center = viewer.extents.getCenter(new Vector3());
-  const sphere = viewer.extents.getBoundingSphere(new Sphere());
-  const offset = direction.clone().multiplyScalar(sphere.radius);
+  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", data: position });

package/src/Viewer/commands/ZoomTo.ts

@@ -27,8 +27,8 @@ import type { Viewer } from "../Viewer";
 export function zoomTo(viewer: Viewer, box: Box3): void {
   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;
@@ -36,30 +36,30 @@ export function zoomTo(viewer: Viewer, box: Box3): void {
   const camera = viewer.camera as any;
 
   if (camera.isPerspectiveCamera) {
-    const offset = new Vector3(0, 0, 1);
-    offset.applyQuaternion(camera.quaternion);
-    offset.multiplyScalar(sphere.radius / Math.tan(MathUtils.DEG2RAD * camera.fov * 0.5));
+    const offset = new Vector3(0, 0, 1)
+      .applyQuaternion(camera.quaternion)
+      .multiplyScalar(boxSize / Math.tan(MathUtils.DEG2RAD * camera.fov * 0.5));
 
-    camera.position.copy(center).add(offset);
+    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);
+    const offset = new Vector3(0, 0, 1)
+      .applyQuaternion(camera.quaternion)
+      .multiplyScalar(viewer.extents.getBoundingSphere(new Sphere()).radius * 3);
 
-    camera.position.copy(center).add(offset);
+    camera.position.copy(offset).add(boxCenter);
     camera.updateMatrixWorld();
   }
 
-  viewer.target.copy(center);
+  viewer.target.copy(boxCenter);
 
   viewer.update();
   viewer.emitEvent({ type: "zoom" });

package/src/Viewer/components/LightComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AmbientLight, DirectionalLight, HemisphereLight, Sphere, Vector3 } from "three";
+import { AmbientLight, DirectionalLight, HemisphereLight, Quaternion, Sphere, Vector3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -73,13 +73,15 @@ export class LightComponent implements IComponent {
     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();
+    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(this.viewer.camera.up)
+      .copy(up)
       .applyAxisAngle(front, (-Math.PI * 30) / 180)
       .multiplyScalar(extentsSize * 2)
       .add(extentsCenter);

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

@@ -23,7 +23,7 @@ import {
   BufferAttribute,
   LineBasicMaterial,
 } from "three";
-import { GltfStructure, GL_CONSTANTS } from "./GltfStructure.js";
+import { GL_CONSTANTS } from "./GltfStructure.js";
 import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
 
 export class DynamicGltfLoader {
@@ -94,6 +94,10 @@ export class DynamicGltfLoader {
     this.hiddenHandles = new Set();
     this.newOptimizedObjects = new Set();
     this.oldOptimizeObjects = new Set();
+
+    this.maxConcurrentChunks = 8;
+    this.activeChunkLoads = 0;
+    this.chunkQueue = [];
   }
 
   setVisibleEdges(visible) {
@@ -503,6 +507,7 @@ export class DynamicGltfLoader {
     const structureArray = Array.isArray(structures) ? structures : [structures];
 
     for (const structure of structureArray) {
+      await structure.initialize(this);
       this.structures.push(structure);
     }
 
@@ -894,13 +899,6 @@ export class DynamicGltfLoader {
     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));
 
@@ -932,7 +930,8 @@ export class DynamicGltfLoader {
   }
 
   clear() {
-    // Clear all structures
+    this.chunkQueue = [];
+
     this.structures.forEach((structure) => {
       if (structure) {
         structure.clear();
@@ -973,7 +972,6 @@ export class DynamicGltfLoader {
     });
     this.loadedMeshes.clear();
 
-    // Clear all structure roots and their children
     this.structureRoots.forEach((rootGroup) => {
       if (rootGroup) {
         rootGroup.traverse((child) => {
@@ -993,7 +991,6 @@ export class DynamicGltfLoader {
     });
     this.structureRoots.clear();
 
-    // Clear all optimized objects
     this.mergedMesh.forEach((mesh) => {
       if (mesh.geometry) mesh.geometry.dispose();
       if (mesh.material) {
@@ -1746,7 +1743,6 @@ export class DynamicGltfLoader {
     });
   }
 
-  // Возвращает bounding box для конкретной структуры
   getStructureGeometryExtent(structureId) {
     const extent = new Box3();
     for (const [nodeId, node] of this.nodes.entries()) {
@@ -1764,4 +1760,33 @@ export 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();
+    }
+  }
 }

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

@@ -43,11 +43,12 @@ const MAX_GAP = 128 * 1024; // 128 KB
 const MAX_CHUNK = 30 * 1024 * 1024; // 100 MB
 
 export 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;
@@ -59,10 +60,10 @@ export class GltfStructure {
     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() {
@@ -75,10 +76,12 @@ export class GltfStructure {
       this.batchTimeout = null;
     }
 
-    // Clear materials and textures
     this.disposeMaterials();
     this.textureCache.clear();
     this.materials.clear();
+
+    this.activeChunkLoads = 0;
+    this.chunkQueue = [];
   }
 
   getJson() {
@@ -157,35 +160,32 @@ export class GltfStructure {
         finalRanges.push({ start, end, requests });
       }
     }
-    /*
-    for (const range of finalRanges) {
-      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, 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 }]);
+
+        for (const req of range.requests) {
+          const relOffset = req.offset - range.start;
+          try {
+            req._resolve({ buffer, relOffset, length: req.length });
+          } catch (e) {
+            req._reject(e);
+          }
         }
-      }
-    }
-    */
-
-    const promises = finalRanges.map(async (range) => {
-      const length = range.end - range.start;
-      const buffer = await this.loadController.loadBinaryData([{ offset: range.start, length }]);
-      for (const req of range.requests) {
-        const relOffset = req.offset - range.start;
-        try {
-          req._resolve({ buffer, 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);
 
     this.pendingRequests = [];

package/src/Viewer/loaders/GLTFCloudDynamicLoader.ts

@@ -58,6 +58,7 @@ export class GLTFCloudDynamicLoader implements ILoader {
     this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
     this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
     this.gltfLoader.setVisibleEdges(this.viewer.options.edgeModel);
+    // this.gltfLoader.setMaxConcurrentChunks(this.viewer.options.maxConcurrentChunks);
 
     this.gltfLoader.addEventListener("databasechunk", (data) => {
       const modelImpl = new DynamicModelImpl(scene);
@@ -126,8 +127,7 @@ export class GLTFCloudDynamicLoader implements ILoader {
       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();