@inweb/viewer-three 26.6.0 → 26.6.2

package/dist/viewer-three.module.js

@@ -2,11 +2,15 @@ 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, PMREMGenerator, AmbientLight, DirectionalLight, 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 { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.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";
 
@@ -1662,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);
@@ -1718,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;
     }
@@ -1957,19 +1951,6 @@ class BackgroundComponent {
     }
 }
 
-class RoomEnvironmentComponent {
-    constructor(viewer) {
-        this.viewer = viewer;
-        const environment = new RoomEnvironment;
-        const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
-        this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
-        environment.dispose();
-    }
-    dispose() {
-        this.viewer.scene.environment = undefined;
-    }
-}
-
 class CameraComponent {
     constructor(viewer) {
         this.geometryEnd = () => {
@@ -2043,20 +2024,33 @@ class LightComponent {
         this.geometryEnd = () => {
             this.ambientLight.removeFromParent();
             this.directionalLight.removeFromParent();
+            this.frontLight.removeFromParent();
+            this.hemisphereLight.removeFromParent();
             if (this.viewer.extents.isEmpty()) return;
             const extentsCenter = this.viewer.extents.getCenter(new Vector3);
-            const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius * 2;
-            this.directionalLight.position.set(.5, 0, .866).multiplyScalar(extentsSize).add(extentsCenter);
+            const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius;
+            this.directionalLight.position.set(.5, 0, .866).multiplyScalar(extentsSize * 2).add(extentsCenter);
             this.directionalLight.target.position.copy(extentsCenter);
+            this.frontLight.position.set(0, extentsSize * 2, 0).add(extentsCenter);
+            this.frontLight.target.position.copy(extentsCenter);
+            this.hemisphereLight.position.set(0, extentsSize * 3, 0).add(extentsCenter);
             this.viewer.scene.add(this.ambientLight);
             this.viewer.scene.add(this.directionalLight);
+            this.viewer.scene.add(this.frontLight);
+            this.viewer.scene.add(this.hemisphereLight);
         };
         this.viewer = viewer;
-        this.ambientLight = new AmbientLight(16777215, 0);
+        this.ambientLight = new AmbientLight(16777215, 1);
         this.viewer.scene.add(this.ambientLight);
         this.directionalLight = new DirectionalLight(16777215, 1);
         this.directionalLight.position.set(.5, 0, .866);
         this.viewer.scene.add(this.directionalLight);
+        this.frontLight = new DirectionalLight(16777215, 1.25);
+        this.frontLight.position.set(0, 1, 0);
+        this.viewer.scene.add(this.frontLight);
+        this.hemisphereLight = new HemisphereLight(16777215, 4473924, 1.25);
+        this.hemisphereLight.position.set(0, 0, 1);
+        this.viewer.scene.add(this.hemisphereLight);
         this.viewer.addEventListener("databasechunk", this.geometryEnd);
         this.viewer.addEventListener("clear", this.geometryEnd);
     }
@@ -2065,6 +2059,10 @@ class LightComponent {
         this.ambientLight.dispose();
         this.directionalLight.removeFromParent();
         this.directionalLight.dispose();
+        this.frontLight.removeFromParent();
+        this.frontLight.dispose();
+        this.hemisphereLight.removeFromParent();
+        this.hemisphereLight.dispose();
         this.viewer.removeEventListener("databasechunk", this.geometryEnd);
         this.viewer.removeEventListener("clear", this.geometryEnd);
     }
@@ -2117,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();
@@ -2230,14 +2371,14 @@ components.registerComponent("CameraComponent", (viewer => new CameraComponent(v
 
 components.registerComponent("BackgroundComponent", (viewer => new BackgroundComponent(viewer)));
 
-components.registerComponent("RoomEnvironmentComponent", (viewer => new RoomEnvironmentComponent(viewer)));
-
 components.registerComponent("LightComponent", (viewer => new LightComponent(viewer)));
 
 components.registerComponent("ResizeCanvasComponent", (viewer => new ResizeCanvasComponent(viewer)));
 
 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;