@inweb/viewer-three 27.4.2 → 27.4.4

package/dist/viewer-three.module.js

@@ -23,7 +23,7 @@
 
 import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Info, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { EventDispatcher, Vector3, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Object3D, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, Line3, Raycaster, MathUtils, EdgesGeometry, Plane, Matrix4, Vector4, Controls, Box3, Clock, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, REVISION, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, PointsMaterial, DataTexture, FloatType, NearestFilter, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
+import { EventDispatcher, Vector3, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Object3D, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, Line3, Raycaster, MathUtils, EdgesGeometry, Plane, Matrix4, Vector4, Controls, Box3, Clock, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, REVISION, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, LinearMipmapLinearFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, NearestMipmapNearestFilter, LinearFilter, NearestFilter, RepeatWrapping, MirroredRepeatWrapping, ClampToEdgeWrapping, PointsMaterial, MeshStandardMaterial, DataTexture, FloatType, 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';
@@ -4017,6 +4017,19 @@ class DynamicModelImpl extends ModelImpl {
     }
 }
 
+const GL_TO_THREE_WRAP = {
+  33071: ClampToEdgeWrapping,
+  33648: MirroredRepeatWrapping,
+  10497: RepeatWrapping,
+};
+const GL_TO_THREE_FILTER = {
+  9728: NearestFilter,
+  9729: LinearFilter,
+  9984: NearestMipmapNearestFilter,
+  9985: LinearMipmapNearestFilter,
+  9986: NearestMipmapLinearFilter,
+  9987: LinearMipmapLinearFilter,
+};
 const GL_COMPONENT_TYPES = {
   5120: Int8Array,
   5121: Uint8Array,
@@ -4059,6 +4072,7 @@ class GltfStructure {
     this.pendingRequests = [];
     this.batchTimeout = null;
     this.textureLoader = new TextureLoader();
+    this.textureLoader.crossOrigin = "anonymous";
     this.materials = new Map();
     this.textureCache = new Map();
     this.materialCache = new Map();
@@ -4070,7 +4084,7 @@ class GltfStructure {
   async initialize(loader) {
     const json = await this.loadController.loadJson();
     if (json.asset === undefined || json.asset.version[0] < 2) {
-      throw new Error("GltfStructure: Unsupported asset. glTF versions >=2.0 are supported.");
+      throw new Error("DynamicLoader: Unsupported asset. glTF versions >=2.0 are supported.");
     }
     this.json = json;
     this.loader = loader;
@@ -4098,7 +4112,9 @@ class GltfStructure {
   scheduleRequest(request) {
     return new Promise((resolve, reject) => {
       if (this.loadingAborted) {
-        reject(this.criticalError || new Error("Structure loading has been aborted due to critical error"));
+        reject(
+          this.criticalError || new Error("DynamicLoader: Structure loading has been aborted due to critical error")
+        );
         return;
       }
       this.pendingRequests.push({
@@ -4137,7 +4153,7 @@ class GltfStructure {
       }
     }
     console.error(
-      `❌ Critical error for structure "${this.id}". All further loading aborted.`,
+      `DynamicLoader: Critical error for structure "${this.id}". All further loading aborted.`,
       `\n   Error: ${error.message || error}`,
       `\n   Rejected ${requests.length} pending chunk requests.`
     );
@@ -4207,7 +4223,7 @@ class GltfStructure {
     const promises = finalRanges.map(async (range, index) => {
       if (this.loadingAborted) {
         for (const req of range.requests) {
-          req._reject(this.criticalError || new Error("Structure loading aborted"));
+          req._reject(this.criticalError || new Error("DynamicLoader: Structure loading aborted"));
         }
         return;
       }
@@ -4230,7 +4246,10 @@ class GltfStructure {
         if (this.isCriticalHttpError(error)) {
           this.abortLoading(error);
         } else {
-          console.warn(`Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`, error);
+          console.warn(
+            `DynamicLoader: Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`,
+            error
+          );
         }
       } finally {
         this.loader.releaseChunkSlot();
@@ -4249,7 +4268,7 @@ class GltfStructure {
   createTypedArray(buffer, offset, length, componentType) {
     try {
       if (!buffer || !(buffer instanceof ArrayBuffer)) {
-        throw new Error("Invalid buffer");
+        throw new Error("DynamicLoader: Invalid buffer");
       }
       let elementSize;
       switch (componentType) {
@@ -4266,20 +4285,22 @@ class GltfStructure {
           elementSize = 4;
           break;
         default:
-          throw new Error(`Unsupported component type: ${componentType}`);
+          throw new Error(`DynamicLoader: Unsupported component type: ${componentType}`);
       }
       const numElements = length / elementSize;
       if (!Number.isInteger(numElements)) {
-        throw new Error(`Invalid length ${length} for component type ${componentType}`);
+        throw new Error(`DynamicLoader: Invalid length ${length} for component type ${componentType}`);
       }
       if (length > buffer.byteLength) {
-        throw new Error(`Buffer too small: need ${length} bytes, but buffer is ${buffer.byteLength} bytes`);
+        throw new Error(
+          `DynamicLoader: Buffer too small: need ${length} bytes, but buffer is ${buffer.byteLength} bytes`
+        );
       }
       const ArrayType = GL_COMPONENT_TYPES[componentType];
       return new ArrayType(buffer, offset, numElements);
     } catch (error) {
       if (error.name !== "AbortError") {
-        console.error("Error creating typed array:", {
+        console.warn("DynamicLoader: Error creating typed array:", {
           bufferSize: buffer?.byteLength,
           offset,
           length,
@@ -4292,7 +4313,7 @@ class GltfStructure {
   }
   async createBufferAttribute(accessorIndex) {
     if (!this.json) {
-      throw new Error("No GLTF structure loaded");
+      throw new Error("DynamicLoader: No GLTF structure loaded");
     }
     const gltf = this.json;
     const accessor = gltf.accessors[accessorIndex];
@@ -4309,7 +4330,7 @@ class GltfStructure {
       return attribute;
     } catch (error) {
       if (error.name !== "AbortError") {
-        console.error("Error creating buffer attribute:", {
+        console.warn("DynamicLoader: Error creating buffer attribute:", {
           error,
           accessor,
           bufferView,
@@ -4330,7 +4351,7 @@ class GltfStructure {
       case 5126:
         return 4;
       default:
-        throw new Error(`Unknown component type: ${componentType}`);
+        throw new Error(`DynamicLoader: Unknown component type: ${componentType}`);
     }
   }
   getNumComponents(type) {
@@ -4350,31 +4371,50 @@ class GltfStructure {
       case "MAT4":
         return 16;
       default:
-        throw new Error(`Unknown type: ${type}`);
+        throw new Error(`DynamicLoader: Unknown type: ${type}`);
     }
   }
   async loadTextures() {
     if (!this.json.textures) return;
     const loadTexture = async (imageIndex) => {
-      const image = this.json.images[imageIndex];
-      if (image.uri) {
-        const fullUrl = await this.loadController.resolveURL(image.uri);
-        return this.textureLoader.loadAsync(fullUrl);
-      } else if (image.bufferView !== undefined) {
-        const bufferView = this.json.bufferViews[image.bufferView];
-        const array = await this.getBufferView(bufferView.byteOffset || 0, bufferView.byteLength, 5121);
-        const blob = new Blob([array], { type: image.mimeType });
-        const url = URL.createObjectURL(blob);
-        const texture = await this.textureLoader.loadAsync(url);
-        URL.revokeObjectURL(url);
-        texture.flipY = false;
-        return texture;
+      let textureName = `index_${imageIndex}`;
+      try {
+        const image = this.json.images[imageIndex];
+        textureName = image.uri || image.name || textureName;
+        if (image.uri) {
+          const fullUrl = await this.loadController.resolveURL(image.uri);
+          return await this.textureLoader.loadAsync(fullUrl);
+        } else if (image.bufferView !== undefined) {
+          const bufferView = this.json.bufferViews[image.bufferView];
+          const array = await this.getBufferView(bufferView.byteOffset || 0, bufferView.byteLength, 5121);
+          const blob = new Blob([array], { type: image.mimeType });
+          const url = URL.createObjectURL(blob);
+          const texture = await this.textureLoader.loadAsync(url);
+          URL.revokeObjectURL(url);
+          return texture;
+        }
+      } catch {
+        console.warn(`DynamicLoader: Error loading texture ${textureName}`);
       }
     };
     const texturePromises = [];
     for (let i = 0; i < this.json.textures.length; i++) {
       texturePromises.push(
-        loadTexture(this.json.textures[i].source).then((texture) => this.textureCache.set(i, texture))
+        loadTexture(this.json.textures[i].source).then((texture) => {
+          if (texture) {
+            const samplerDef =
+              this.json.textures[i].sampler !== undefined && this.json.samplers
+                ? this.json.samplers[this.json.textures[i].sampler]
+                : {};
+            texture.magFilter = GL_TO_THREE_FILTER[samplerDef.magFilter] || LinearFilter;
+            texture.minFilter = GL_TO_THREE_FILTER[samplerDef.minFilter] || LinearMipmapLinearFilter;
+            texture.wrapS = GL_TO_THREE_WRAP[samplerDef.wrapS] || RepeatWrapping;
+            texture.wrapT = GL_TO_THREE_WRAP[samplerDef.wrapT] || RepeatWrapping;
+            texture.flipY = false;
+            texture.needsUpdate = true;
+          }
+          this.textureCache.set(i, texture);
+        })
       );
     }
     await Promise.all(texturePromises);
@@ -4405,8 +4445,14 @@ class GltfStructure {
         params.opacity = pbr.baseColorFactor[3];
         if (params.opacity < 1.0) params.transparent = true;
       }
-      if (pbr.baseColorTexture) {
-        params.map = this.textureCache.get(pbr.baseColorTexture.index);
+      if (pbr.baseColorTexture !== undefined) {
+        const texture = this.textureCache.get(pbr.baseColorTexture.index);
+        if (texture) {
+          params.map = texture;
+          if (!pbr.baseColorFactor) {
+            params.color = new Color(0xffffff);
+          }
+        }
       }
     }
     if (materialDef.emissiveFactor) {
@@ -4436,10 +4482,58 @@ class GltfStructure {
       params.polygonOffset = true;
       params.polygonOffsetFactor = 1;
       params.polygonOffsetUnits = 1;
-      if (materialDef.normalTexture) {
-        params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
+      if (params.map && !materialDef.pbrMetallicRoughness?.baseColorFactor) {
+        params.color = new Color(0xffffff);
+      }
+      if (materialDef.normalTexture !== undefined) {
+        const normalMap = this.textureCache.get(materialDef.normalTexture.index);
+        if (normalMap) {
+          params.normalMap = normalMap;
+        }
+      }
+      if (materialDef.emissiveTexture !== undefined) {
+        const emissiveMap = this.textureCache.get(materialDef.emissiveTexture.index);
+        if (emissiveMap) {
+          params.emissiveMap = emissiveMap;
+        }
+      }
+      const usePBR = materialDef.pbrMetallicRoughness?.metallicRoughnessTexture !== undefined;
+      if (usePBR) {
+        params.metalness =
+          materialDef.pbrMetallicRoughness?.metallicFactor !== undefined
+            ? materialDef.pbrMetallicRoughness.metallicFactor
+            : 1.0;
+        params.roughness =
+          materialDef.pbrMetallicRoughness?.roughnessFactor !== undefined
+            ? materialDef.pbrMetallicRoughness.roughnessFactor
+            : 1.0;
+        if (materialDef.pbrMetallicRoughness?.metallicRoughnessTexture !== undefined) {
+          const map = this.textureCache.get(materialDef.pbrMetallicRoughness.metallicRoughnessTexture.index);
+          if (map) {
+            params.metalnessMap = map;
+            params.roughnessMap = map;
+          }
+        }
+        material = new MeshStandardMaterial(params);
+      } else {
+        material = new MeshPhongMaterial(params);
+      }
+      if (material.map) material.map.colorSpace = SRGBColorSpace;
+      if (material.emissiveMap) material.emissiveMap.colorSpace = SRGBColorSpace;
+      if (material.normalMap) {
+        if (materialDef.normalTexture?.scale !== undefined) {
+          material.normalScale.set(materialDef.normalTexture.scale, materialDef.normalTexture.scale);
+        }
+      }
+      if (materialDef.occlusionTexture !== undefined) {
+        const aoMap = this.textureCache.get(materialDef.occlusionTexture.index);
+        if (aoMap) {
+          material.aoMap = aoMap;
+          if (materialDef.occlusionTexture.strength !== undefined) {
+            material.aoMapIntensity = materialDef.occlusionTexture.strength;
+          }
+        }
       }
-      material = new MeshPhongMaterial(params);
     }
     return material;
   }
@@ -4694,7 +4788,7 @@ class DynamicGltfLoader {
       memoryLimit = Math.max(memoryLimit, 2 * 1024 * 1024 * 1024);
       console.log(`Available memory set to ${Math.round(memoryLimit / (1024 * 1024 * 1024))}GB`);
     } catch (error) {
-      console.warn("Error detecting available memory:", error);
+      console.warn("DynamicLoader: Error detecting available memory:", error);
     }
     return memoryLimit;
   }
@@ -4859,7 +4953,7 @@ class DynamicGltfLoader {
             if (entry?.lines?.uuid) uniqueMaterialIds.add(entry.lines.uuid);
           }
         } catch (exp) {
-          console.error("Error adding material to uniqueMaterialIds", exp);
+          console.warn("DynamicLoader: Error collecting material stats", exp);
         }
       }
     }
@@ -4880,7 +4974,7 @@ class DynamicGltfLoader {
           this._webglInfoCache = { renderer: null, vendor: null };
         }
       } catch (e) {
-        console.error("Error getting webgl info", e);
+        console.warn("DynamicLoader: Error getting webgl info", e);
         this._webglInfoCache = { renderer: null, vendor: null };
       }
     }
@@ -5137,7 +5231,7 @@ class DynamicGltfLoader {
       if (node.structure && node.structure.loadingAborted) {
         return;
       }
-      console.error(`Error loading node ${nodeId}:`, error);
+      console.warn(`DynamicLoader: Error loading node ${nodeId}:`, error);
     }
   }
   unloadNode(nodeId) {
@@ -5190,7 +5284,7 @@ class DynamicGltfLoader {
         await structure.loadTextures();
         await structure.loadMaterials();
       } catch (error) {
-        console.error("Error loading materials:", error);
+        console.error("DynamicLoader: Error loading materials:", error);
         throw error;
       }
     }
@@ -5198,14 +5292,14 @@ class DynamicGltfLoader {
   }
   async processSceneHierarchy() {
     if (this.structures.length === 0) {
-      throw new Error("No GLTF structures loaded");
+      throw new Error("DynamicLoader: No GLTF structures loaded");
     }
     this.nodesToLoad = [];
     let estimatedSize = 0;
     for (const structure of this.structures) {
       const gltf = structure.getJson();
       if (!gltf.scenes || !gltf.scenes.length) {
-        console.warn("No scenes found in GLTF structure");
+        console.warn("DynamicLoader: No scenes found in GLTF structure");
         continue;
       }
       estimatedSize += gltf.buffers[0].byteLength;
@@ -5447,7 +5541,6 @@ class DynamicGltfLoader {
         color: 0x808080,
         specular: 0x222222,
         shininess: 10,
-        side: DoubleSide,
       });
     }
   }
@@ -5918,7 +6011,6 @@ class DynamicGltfLoader {
       }
     });
     if (totalObjectsToMerge > 0) {
-      console.log(`Pre-allocating transform texture for ${totalObjectsToMerge} objects`);
       this.maxObjectId = totalObjectsToMerge;
       this.initTransformTexture();
       this.initializeObjectVisibility();
@@ -5981,7 +6073,7 @@ class DynamicGltfLoader {
     let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
-        console.warn("Skipping mesh group with null material");
+        console.warn("DynamicLoader: Skipping mesh group with null material");
         continue;
       }
       try {
@@ -6066,7 +6158,7 @@ class DynamicGltfLoader {
           await this.yieldToUI();
         }
       } catch (error) {
-        console.error("Failed to merge meshes for material:", error);
+        console.warn("DynamicLoader: Failed to merge meshes for material:", error);
         group.objects.forEach((mesh) => {
           mesh.visible = true;
         });
@@ -6078,7 +6170,7 @@ class DynamicGltfLoader {
     for (const group of materialGroups) {
       if (group.objects.length === 0) continue;
       if (!group.material) {
-        console.warn("Skipping line group with null material");
+        console.warn("DynamicLoader: Skipping line group with null material");
         continue;
       }
       const handles = new Set();
@@ -6188,7 +6280,7 @@ class DynamicGltfLoader {
     let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
-        console.warn("Skipping line segment group with null material");
+        console.warn("DynamicLoader: Skipping line segment group with null material");
         continue;
       }
       try {
@@ -6276,7 +6368,7 @@ class DynamicGltfLoader {
           await this.yieldToUI();
         }
       } catch (error) {
-        console.warn("Failed to merge line segments for material:", error);
+        console.warn("DynamicLoader: Failed to merge line segments for material:", error);
         group.objects.forEach((line) => {
           line.visible = true;
         });
@@ -6287,7 +6379,7 @@ class DynamicGltfLoader {
     let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
-        console.warn("Skipping points group with null material");
+        console.warn("DynamicLoader: Skipping points group with null material");
         continue;
       }
       try {
@@ -6359,7 +6451,7 @@ class DynamicGltfLoader {
           await this.yieldToUI();
         }
       } catch (error) {
-        console.warn("Failed to merge points for material:", error);
+        console.warn("DynamicLoader: Failed to merge points for material:", error);
         group.objects.forEach((points) => {
           points.visible = true;
         });
@@ -6439,7 +6531,7 @@ class DynamicGltfLoader {
         obj.geometry.dispose();
       });
     } catch (error) {
-      console.error("Failed to merge geometries:", error);
+      console.warn("DynamicLoader: Failed to merge geometries:", error);
       lineSegmentsArray.forEach((obj) => {
         obj.visible = true;
         rootGroup.add(obj);
@@ -6543,11 +6635,11 @@ class DynamicGltfLoader {
   }
   applyObjectTransforms(objectTransformMap) {
     if (this.mergedObjectMap.size === 0) {
-      console.warn("No merged objects to transform");
+      console.warn("DynamicLoader: No merged objects to transform");
       return;
     }
     if (!this.transformData) {
-      console.warn("Transform texture not initialized");
+      console.warn("DynamicLoader: Transform texture not initialized");
       return;
     }
     this.objectTransforms = objectTransformMap;
@@ -6730,7 +6822,7 @@ class DynamicGltfLoader {
   }
   syncHiddenObjects() {
     if (this.mergedObjectMap.size === 0) {
-      console.log("No merged objects to sync");
+      console.warn("DynamicLoader: No merged objects to sync");
       return;
     }
     if (this.objectVisibility.length > 0) {