@inweb/viewer-three 26.6.1 → 26.6.3

package/dist/viewer-three.module.js

@@ -2,10 +2,16 @@ import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loaders
 
 export * from "@inweb/viewer-core";
 
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Box3, Sphere, MathUtils, Color, AmbientLight, DirectionalLight, HemisphereLight, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Box3, Sphere, MathUtils, Color, AmbientLight, DirectionalLight, HemisphereLight, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } 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";
+
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import { EventEmitter2 } from "@inweb/eventemitter2";
@@ -1660,31 +1666,22 @@ class SelectionComponent {
             if (event.button !== 0) return;
             this.viewer.executeCommand("zoomToSelected");
         };
-        this.optionsChange = () => {
-            const {facesColor: facesColor, facesTransparancy: facesTransparancy} = this.viewer.options;
-            this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-            this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-            this.viewer.update();
+        this.initHighlighter = () => {
+            this.highlighter = this.viewer.getComponent("HighlighterComponent");
         };
         this.viewer = viewer;
         this.raycaster = new Raycaster;
         this.downPosition = new Vector2;
-        const {facesColor: facesColor, facesTransparancy: facesTransparancy} = this.viewer.options;
-        this.facesMaterial = new MeshBasicMaterial;
-        this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-        this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-        this.facesMaterial.transparent = true;
         this.viewer.addEventListener("pointerdown", this.onPointerDown);
         this.viewer.addEventListener("pointerup", this.onPointerUp);
         this.viewer.addEventListener("dblclick", this.onDoubleClick);
-        this.viewer.addEventListener("optionschange", this.optionsChange);
+        this.viewer.addEventListener("initialize", this.initHighlighter);
     }
     dispose() {
-        this.facesMaterial.dispose();
         this.viewer.removeEventListener("pointerdown", this.onPointerDown);
         this.viewer.removeEventListener("pointerup", this.onPointerUp);
         this.viewer.removeEventListener("dblclick", this.onDoubleClick);
-        this.viewer.removeEventListener("optionschange", this.optionsChange);
+        this.viewer.removeEventListener("initialize", this.initHighlighter);
     }
     getMousePosition(event, target) {
         return target.set(event.clientX, event.clientY);
@@ -1716,14 +1713,13 @@ class SelectionComponent {
     select(object) {
         if (object.isSelected) return;
         object.isSelected = true;
-        object.originalMaterial = object.material;
-        object.material = this.facesMaterial;
+        this.highlighter.highlight(object);
         this.viewer.selected.push(object);
     }
     clearSelection() {
         this.viewer.selected.forEach((object => {
             object.isSelected = false;
-            object.material = object.originalMaterial;
+            this.highlighter.unhighlight(object);
         }));
         this.viewer.selected.length = 0;
     }
@@ -2119,6 +2115,149 @@ class ResizeCanvasComponent {
     }
 }
 
+class HighlighterUtils {
+    static isBreak(positions, i) {
+        return isNaN(positions[i]) || isNaN(positions[i + 1]) || isNaN(positions[i + 2]) || positions[i] === Infinity || positions[i] === -Infinity || positions[i + 1] === Infinity || positions[i + 1] === -Infinity || positions[i + 2] === Infinity || positions[i + 2] === -Infinity;
+    }
+    static fromIndexedLine(positions, indices) {
+        const lineGeometry = new LineSegmentsGeometry;
+        const segments = [];
+        for (let i = 0; i < indices.length; i += 2) {
+            const idx1 = indices[i] * 3;
+            const idx2 = indices[i + 1] * 3;
+            if (indices[i] === -1 || indices[i + 1] === -1) {
+                continue;
+            }
+            segments.push(positions[idx1], positions[idx1 + 1], positions[idx1 + 2], positions[idx2], positions[idx2 + 1], positions[idx2 + 2]);
+        }
+        if (segments.length === 0) return null;
+        lineGeometry.setPositions(segments);
+        return lineGeometry;
+    }
+    static fromNonIndexedLine(positions, isLineSegments) {
+        const lineGeometry = new LineSegmentsGeometry;
+        const segments = [];
+        if (isLineSegments) {
+            for (let i = 0; i < positions.length; i += 6) {
+                if (i + 5 >= positions.length) break;
+                if (HighlighterUtils.isBreak(positions, i) || HighlighterUtils.isBreak(positions, i + 3)) continue;
+                segments.push(positions[i], positions[i + 1], positions[i + 2], positions[i + 3], positions[i + 4], positions[i + 5]);
+            }
+        } else {
+            let lastValidIndex = -1;
+            for (let i = 0; i < positions.length; i += 3) {
+                if (HighlighterUtils.isBreak(positions, i)) {
+                    lastValidIndex = -1;
+                    continue;
+                }
+                if (lastValidIndex !== -1) {
+                    segments.push(positions[lastValidIndex], positions[lastValidIndex + 1], positions[lastValidIndex + 2], positions[i], positions[i + 1], positions[i + 2]);
+                }
+                lastValidIndex = i;
+            }
+        }
+        if (segments.length === 0) return null;
+        lineGeometry.setPositions(segments);
+        return lineGeometry;
+    }
+}
+
+class HighlighterComponent {
+    constructor(viewer) {
+        this.geometryEnd = () => {
+            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor} = this.viewer.options;
+            this.highlightMaterial = new MeshBasicMaterial({
+                color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+                transparent: true,
+                opacity: (255 - facesTransparancy) / 255,
+                depthTest: false,
+                depthWrite: false
+            });
+            this.outlineMaterial = new LineMaterial({
+                color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
+                linewidth: 1.5,
+                depthTest: false,
+                depthWrite: false,
+                resolution: new Vector2(window.innerWidth, window.innerHeight)
+            });
+            this.highlightLineMaterial = new LineBasicMaterial({
+                color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+                depthTest: false,
+                depthWrite: false
+            });
+            this.highlightLineGlowMaterial = new LineMaterial({
+                color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+                linewidth: 5,
+                transparent: true,
+                opacity: .8,
+                depthTest: true,
+                depthWrite: true,
+                resolution: new Vector2(window.innerWidth, window.innerHeight)
+            });
+        };
+        this.optionsChange = () => {
+            const {facesColor: facesColor, facesTransparancy: facesTransparancy, edgesColor: edgesColor} = this.viewer.options;
+            this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+            this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
+            this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+            this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+            this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+            this.viewer.update();
+        };
+        this.viewer = viewer;
+        this.viewer.addEventListener("databasechunk", this.geometryEnd);
+        this.viewer.addEventListener("optionschange", this.optionsChange);
+        this.viewer.addEventListener("resize", this.viewerResize);
+        this.geometryEnd();
+    }
+    dispose() {
+        this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+        this.viewer.removeEventListener("optionschange", this.optionsChange);
+        this.viewer.removeEventListener("resize", this.viewerResize);
+    }
+    highlight(object) {
+        if (object.isHighlighted) return;
+        if (object.isLine || object.isLineSegments) {
+            const positions = object.geometry.attributes.position.array;
+            const indices = object.geometry.index ? object.geometry.index.array : null;
+            const lineGeometry = indices ? HighlighterUtils.fromIndexedLine(positions, indices) : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
+            const wireframe = new Wireframe(lineGeometry, this.highlightLineGlowMaterial);
+            wireframe.position.copy(object.position);
+            wireframe.rotation.copy(object.rotation);
+            wireframe.scale.copy(object.scale);
+            object.parent.add(wireframe);
+            object.userData.highlightwireframe = wireframe;
+            object.userData.originalMaterial = object.material;
+            object.material = this.highlightLineMaterial;
+            object.isHighlighted = true;
+        } else if (object.isMesh) {
+            const edgesGeometry = new EdgesGeometry(object.geometry, 30);
+            const lineGeometry = (new LineSegmentsGeometry).fromEdgesGeometry(edgesGeometry);
+            const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
+            wireframe.position.copy(object.position);
+            wireframe.rotation.copy(object.rotation);
+            wireframe.scale.copy(object.scale);
+            object.parent.add(wireframe);
+            object.userData.highlightwireframe = wireframe;
+            object.userData.originalMaterial = object.material;
+            object.material = this.highlightMaterial;
+            object.isHighlighted = true;
+        }
+    }
+    unhighlight(object) {
+        if (!object.isHighlighted) return;
+        object.isHighlighted = false;
+        object.material = object.userData.originalMaterial;
+        object.userData.highlightwireframe.removeFromParent();
+        delete object.userData.originalMaterial;
+        delete object.userData.highlightwireframe;
+    }
+    viewerResize(event) {
+        if (!this.outlineMaterial) return;
+        this.outlineMaterial.resolution.set(event.width, event.height);
+    }
+}
+
 class WCSHelper extends Object3D {
     constructor(camera) {
         super();
@@ -2238,6 +2377,8 @@ components.registerComponent("ResizeCanvasComponent", (viewer => new ResizeCanva
 
 components.registerComponent("RenderLoopComponent", (viewer => new RenderLoopComponent(viewer)));
 
+components.registerComponent("HighlighterComponent", (viewer => new HighlighterComponent(viewer)));
+
 components.registerComponent("SelectionComponent", (viewer => new SelectionComponent(viewer)));
 
 components.registerComponent("WCSHelperComponent", (viewer => new WCSHelperComponent(viewer)));
@@ -2274,30 +2415,30 @@ class GLTFLoadingManager extends LoadingManager {
     }
 }
 
-class GLTFModelLoader extends Loader {
+class GLTFFileLoader extends Loader {
     constructor(viewer) {
         super();
         this.viewer = viewer;
     }
-    isSupport(model) {
-        return typeof model === "object" && typeof model.database === "string" && typeof model.downloadResource === "function" && /.gltf$/i.test(model.database);
+    isSupport(file, format) {
+        return (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) && /(gltf|glb)$/i.test(format);
     }
-    async load(model) {
-        const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
-        const manager = new GLTFLoadingManager(url);
+    async load(file, format, params) {
+        const manager = new GLTFLoadingManager(file, params);
         const loader = new GLTFLoader(manager);
-        loader.setRequestHeader(model.httpClient.headers);
+        loader.setPath(manager.path);
+        loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
+        loader.setWithCredentials(params.withCredentials || loader.withCredentials);
         const progress = event => {
             const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
             const progress = lengthComputable ? loaded / total : 1;
             this.viewer.emitEvent({
                 type: "geometryprogress",
                 data: progress,
-                file: model.file,
-                model: model
+                file: file
             });
         };
-        const gltf = await loader.loadAsync(url, progress);
+        const gltf = await loader.loadAsync(manager.fileURL, progress);
         if (!this.viewer.scene) return this;
         this.viewer.scene.add(gltf.scene);
         this.viewer.models.push(gltf.scene);
@@ -2307,37 +2448,36 @@ class GLTFModelLoader extends Loader {
         this.viewer.emitEvent({
             type: "databasechunk",
             data: gltf.scene,
-            file: model.file,
-            model: model
+            file: file
         });
         return this;
     }
 }
 
-class GLTFFileLoader extends Loader {
+class GLTFCloudModelLoader extends Loader {
     constructor(viewer) {
         super();
         this.viewer = viewer;
     }
-    isSupport(file, format) {
-        return (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) && /(gltf|glb)$/i.test(format);
+    isSupport(model) {
+        return typeof model === "object" && typeof model.database === "string" && typeof model.downloadResource === "function" && /.gltf$/i.test(model.database);
     }
-    async load(buffer, format, params) {
-        const manager = new GLTFLoadingManager(buffer, params);
+    async load(model) {
+        const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
+        const manager = new GLTFLoadingManager(url);
         const loader = new GLTFLoader(manager);
-        loader.setPath(manager.path);
-        loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
-        loader.setWithCredentials(params.withCredentials || loader.withCredentials);
+        loader.setRequestHeader(model.httpClient.headers);
         const progress = event => {
             const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
             const progress = lengthComputable ? loaded / total : 1;
             this.viewer.emitEvent({
                 type: "geometryprogress",
                 data: progress,
-                file: buffer
+                file: model.file,
+                model: model
             });
         };
-        const gltf = await loader.loadAsync(manager.fileURL, progress);
+        const gltf = await loader.loadAsync(url, progress);
         if (!this.viewer.scene) return this;
         this.viewer.scene.add(gltf.scene);
         this.viewer.models.push(gltf.scene);
@@ -2347,7 +2487,8 @@ class GLTFFileLoader extends Loader {
         this.viewer.emitEvent({
             type: "databasechunk",
             data: gltf.scene,
-            file: buffer
+            file: model.file,
+            model: model
         });
         return this;
     }
@@ -2355,10 +2496,10 @@ class GLTFFileLoader extends Loader {
 
 const loaders = loadersRegistry("threejs");
 
-loaders.registerLoader("gltf", (viewer => new GLTFModelLoader(viewer)));
-
 loaders.registerLoader("gltf-file", (viewer => new GLTFFileLoader(viewer)));
 
+loaders.registerLoader("gltf-cloud-model", (viewer => new GLTFCloudModelLoader(viewer)));
+
 class Viewer extends EventEmitter2 {
     constructor(client) {
         super();
@@ -2436,24 +2577,24 @@ class Viewer extends EventEmitter2 {
     }
     dispose() {
         this.cancel();
+        this.clear();
         this.emitEvent({
             type: "dispose"
         });
+        this.removeAllListeners();
+        this.setActiveDragger();
         this._components.forEach((component => component.dispose()));
         this._components = [];
-        this.setActiveDragger();
-        this.removeAllListeners();
-        this.clear();
         this._markup.dispose();
         if (this.canvas) {
             this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
             this.canvas = undefined;
         }
         if (this.renderer) this.renderer.dispose();
+        this.helpers = undefined;
+        this.scene = undefined;
         this.renderer = undefined;
         this.camera = undefined;
-        this.scene = undefined;
-        this.helpers = undefined;
         return this;
     }
     isInitialized() {
@@ -2670,6 +2811,9 @@ class Viewer extends EventEmitter2 {
             this.setActiveDragger(dragger.name);
         }
     }
+    getComponent(name) {
+        return this._components.find((component => component.name === name));
+    }
     is3D() {
         return true;
     }
@@ -2715,9 +2859,6 @@ class Viewer extends EventEmitter2 {
     executeCommand(id, ...args) {
         return commands.executeCommand(id, this, ...args);
     }
-    getComponent(name) {
-        return this._components.find((component => component.name === name));
-    }
     drawViewpoint(viewpoint) {
         var _a, _b, _c;
         if (!this.renderer) return;