@inweb/viewer-three 26.6.1 → 26.6.2

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)));
@@ -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;