@inweb/viewer-three 26.6.1 → 26.6.2

package/dist/viewer-three.js

@@ -18058,8 +18058,8 @@
 
     }
 
-    const _start = /*@__PURE__*/ new Vector3();
-    const _end = /*@__PURE__*/ new Vector3();
+    const _start$1 = /*@__PURE__*/ new Vector3();
+    const _end$1 = /*@__PURE__*/ new Vector3();
 
     class LineSegments extends Line$1 {
 
@@ -18086,11 +18086,11 @@
 
     			for ( let i = 0, l = positionAttribute.count; i < l; i += 2 ) {
 
-    				_start.fromBufferAttribute( positionAttribute, i );
-    				_end.fromBufferAttribute( positionAttribute, i + 1 );
+    				_start$1.fromBufferAttribute( positionAttribute, i );
+    				_end$1.fromBufferAttribute( positionAttribute, i + 1 );
 
     				lineDistances[ i ] = ( i === 0 ) ? 0 : lineDistances[ i - 1 ];
-    				lineDistances[ i + 1 ] = lineDistances[ i ] + _start.distanceTo( _end );
+    				lineDistances[ i + 1 ] = lineDistances[ i ] + _start$1.distanceTo( _end$1 );
 
     			}
 
@@ -36457,7 +36457,7 @@
 
     }
 
-    const _vector$1 = /*@__PURE__*/ new Vector3();
+    const _vector$1$1 = /*@__PURE__*/ new Vector3();
     const _color1 = /*@__PURE__*/ new Color();
     const _color2 = /*@__PURE__*/ new Color();
 
@@ -36529,7 +36529,7 @@
 
     		this.light.updateWorldMatrix( true, false );
 
-    		mesh.lookAt( _vector$1.setFromMatrixPosition( this.light.matrixWorld ).negate() );
+    		mesh.lookAt( _vector$1$1.setFromMatrixPosition( this.light.matrixWorld ).negate() );
 
     	}
 
@@ -37017,7 +37017,7 @@
 
     }
 
-    const _box = /*@__PURE__*/ new Box3();
+    const _box$5 = /*@__PURE__*/ new Box3();
 
     class BoxHelper extends LineSegments {
 
@@ -37051,14 +37051,14 @@
 
     		if ( this.object !== undefined ) {
 
-    			_box.setFromObject( this.object );
+    			_box$5.setFromObject( this.object );
 
     		}
 
-    		if ( _box.isEmpty() ) return;
+    		if ( _box$5.isEmpty() ) return;
 
-    		const min = _box.min;
-    		const max = _box.max;
+    		const min = _box$5.min;
+    		const max = _box$5.max;
 
     		/*
     			5____4
@@ -58881,7 +58881,7 @@ void main() {
     let _heightHalf;
     const _viewMatrix = new Matrix4();
     const _viewProjectionMatrix = new Matrix4();
-    const _vector = new Vector3();
+    const _vector$1 = new Vector3();
     const _vector1 = new Vector4();
     const _vector2 = new Vector4();
     const point = new Vector2();
@@ -58900,10 +58900,10 @@ void main() {
             _viewProjectionMatrix.multiplyMatrices(this.camera.projectionMatrix, _viewMatrix);
         }
         projectPoint(p) {
-            _vector.copy(p).applyMatrix4(_viewProjectionMatrix);
-            const visible = _vector.z >= -1 && _vector.z <= 1;
-            point.x = (_vector.x + 1) * _widthHalf;
-            point.y = (-_vector.y + 1) * _heightHalf;
+            _vector$1.copy(p).applyMatrix4(_viewProjectionMatrix);
+            const visible = _vector$1.z >= -1 && _vector$1.z <= 1;
+            point.x = (_vector$1.x + 1) * _widthHalf;
+            point.y = (-_vector$1.y + 1) * _heightHalf;
             return { point, visible };
         }
         projectLine(p1, p2) {
@@ -59740,31 +59740,22 @@ void main() {
                     return;
                 this.viewer.executeCommand("zoomToSelected");
             };
-            this.optionsChange = () => {
-                const { facesColor, 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, 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);
@@ -59791,14 +59782,13 @@ void main() {
             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;
         }
@@ -60325,261 +60315,1351 @@ void main() {
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    class CameraComponent {
+    class CameraComponent {
+        constructor(viewer) {
+            this.geometryEnd = () => {
+                const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+                const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
+                const rendererSize = this.viewer.renderer.getSize(new Vector2());
+                const aspect = rendererSize.x / rendererSize.y;
+                // TODO: do not change the camera and target after opening the second model in "append" mode
+                let sceneCamera;
+                this.viewer.scene.traverse((object) => {
+                    if (object.isCamera)
+                        if (!sceneCamera)
+                            sceneCamera = object;
+                        else if (object.isPerspectiveCamera && sceneCamera.isOrthographicCamera)
+                            sceneCamera = object;
+                });
+                if (sceneCamera) {
+                    this.viewer.camera = sceneCamera.clone();
+                    this.viewer.camera.up.set(0, 0, 1);
+                    this.viewer.camera.scale.set(1, 1, 1); // <- visualize fix
+                }
+                const camera = this.viewer.camera;
+                if (camera.isPerspectiveCamera) {
+                    camera.aspect = aspect;
+                    camera.near = extentsSize / 100;
+                    camera.far = extentsSize * 100;
+                    camera.updateProjectionMatrix();
+                }
+                if (camera.isOrthographicCamera) {
+                    camera.left = camera.bottom * aspect;
+                    camera.right = camera.top * aspect;
+                    camera.near = 0;
+                    camera.far = extentsSize * 100;
+                    camera.updateProjectionMatrix();
+                }
+                this.viewer.target.copy(extentsCenter);
+                if (!sceneCamera) {
+                    this.viewer.executeCommand("setDefaultViewPosition");
+                }
+            };
+            this.viewer = viewer;
+            this.viewer.addEventListener("databasechunk", this.geometryEnd);
+        }
+        dispose() {
+            this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    class ExtentsComponent {
+        constructor(viewer) {
+            this.syncExtents = () => {
+                const extents = new Box3();
+                this.viewer.scene.traverseVisible((object) => !object.children.length && extents.expandByObject(object));
+                this.viewer.extents.copy(extents);
+            };
+            this.viewer = viewer;
+            this.viewer.addEventListener("databasechunk", this.syncExtents);
+            this.viewer.addEventListener("clear", this.syncExtents);
+            this.viewer.on("explode", this.syncExtents);
+            this.viewer.on("isolate", this.syncExtents);
+            this.viewer.on("hide", this.syncExtents);
+            this.viewer.on("showall", this.syncExtents);
+        }
+        dispose() {
+            this.viewer.removeEventListener("databasechunk", this.syncExtents);
+            this.viewer.removeEventListener("clear", this.syncExtents);
+            this.viewer.off("explode", this.syncExtents);
+            this.viewer.off("isolate", this.syncExtents);
+            this.viewer.off("hide", this.syncExtents);
+            this.viewer.off("showall", this.syncExtents);
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    class LightComponent {
+        constructor(viewer) {
+            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;
+                this.directionalLight.position
+                    .set(0.5, 0, 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(0xffffff, 1);
+            this.viewer.scene.add(this.ambientLight);
+            this.directionalLight = new DirectionalLight(0xffffff, 1);
+            this.directionalLight.position.set(0.5, 0, 0.866); // ~60º
+            this.viewer.scene.add(this.directionalLight);
+            this.frontLight = new DirectionalLight(0xffffff, 1.25);
+            this.frontLight.position.set(0, 1, 0);
+            this.viewer.scene.add(this.frontLight);
+            this.hemisphereLight = new HemisphereLight(0xffffff, 0x444444, 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);
+        }
+        dispose() {
+            this.ambientLight.removeFromParent();
+            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);
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    class RenderLoopComponent {
+        constructor(viewer) {
+            this.animate = (time = 0) => {
+                this.requestId = requestAnimationFrame(this.animate);
+                this.viewer.render(time);
+            };
+            this.viewer = viewer;
+            this.animate();
+        }
+        dispose() {
+            cancelAnimationFrame(this.requestId);
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    class ResizeCanvasComponent {
+        constructor(viewer) {
+            this.resizeViewer = (entries) => {
+                const { width, height } = entries[0].contentRect;
+                if (!width || !height)
+                    return; // <- invisible viewer, or viewer with parent removed
+                const camera = this.viewer.camera;
+                const aspect = width / height;
+                if (camera.isPerspectiveCamera) {
+                    camera.aspect = aspect;
+                    camera.updateProjectionMatrix();
+                }
+                if (camera.isOrthographicCamera) {
+                    camera.left = camera.bottom * aspect;
+                    camera.right = camera.top * aspect;
+                    camera.updateProjectionMatrix();
+                }
+                this.viewer.renderer.setSize(width, height, true);
+                this.viewer.update(true);
+                this.viewer.emitEvent({ type: "resize", width, height });
+            };
+            this.viewer = viewer;
+            this.resizeObserver = new ResizeObserver(this.resizeViewer);
+            this.resizeObserver.observe(viewer.canvas.parentElement);
+        }
+        dispose() {
+            this.resizeObserver.disconnect();
+        }
+    }
+
+    const _box = new Box3();
+    const _vector = new Vector3();
+
+    class LineSegmentsGeometry extends InstancedBufferGeometry {
+
+    	constructor() {
+
+    		super();
+
+    		this.isLineSegmentsGeometry = true;
+
+    		this.type = 'LineSegmentsGeometry';
+
+    		const positions = [ -1, 2, 0, 1, 2, 0, -1, 1, 0, 1, 1, 0, -1, 0, 0, 1, 0, 0, -1, -1, 0, 1, -1, 0 ];
+    		const uvs = [ -1, 2, 1, 2, -1, 1, 1, 1, -1, -1, 1, -1, -1, -2, 1, -2 ];
+    		const index = [ 0, 2, 1, 2, 3, 1, 2, 4, 3, 4, 5, 3, 4, 6, 5, 6, 7, 5 ];
+
+    		this.setIndex( index );
+    		this.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+    		this.setAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
+
+    	}
+
+    	applyMatrix4( matrix ) {
+
+    		const start = this.attributes.instanceStart;
+    		const end = this.attributes.instanceEnd;
+
+    		if ( start !== undefined ) {
+
+    			start.applyMatrix4( matrix );
+
+    			end.applyMatrix4( matrix );
+
+    			start.needsUpdate = true;
+
+    		}
+
+    		if ( this.boundingBox !== null ) {
+
+    			this.computeBoundingBox();
+
+    		}
+
+    		if ( this.boundingSphere !== null ) {
+
+    			this.computeBoundingSphere();
+
+    		}
+
+    		return this;
+
+    	}
+
+    	setPositions( array ) {
+
+    		let lineSegments;
+
+    		if ( array instanceof Float32Array ) {
+
+    			lineSegments = array;
+
+    		} else if ( Array.isArray( array ) ) {
+
+    			lineSegments = new Float32Array( array );
+
+    		}
+
+    		const instanceBuffer = new InstancedInterleavedBuffer( lineSegments, 6, 1 ); // xyz, xyz
+
+    		this.setAttribute( 'instanceStart', new InterleavedBufferAttribute( instanceBuffer, 3, 0 ) ); // xyz
+    		this.setAttribute( 'instanceEnd', new InterleavedBufferAttribute( instanceBuffer, 3, 3 ) ); // xyz
+
+    		this.instanceCount = this.attributes.instanceStart.count;
+
+    		//
+
+    		this.computeBoundingBox();
+    		this.computeBoundingSphere();
+
+    		return this;
+
+    	}
+
+    	setColors( array ) {
+
+    		let colors;
+
+    		if ( array instanceof Float32Array ) {
+
+    			colors = array;
+
+    		} else if ( Array.isArray( array ) ) {
+
+    			colors = new Float32Array( array );
+
+    		}
+
+    		const instanceColorBuffer = new InstancedInterleavedBuffer( colors, 6, 1 ); // rgb, rgb
+
+    		this.setAttribute( 'instanceColorStart', new InterleavedBufferAttribute( instanceColorBuffer, 3, 0 ) ); // rgb
+    		this.setAttribute( 'instanceColorEnd', new InterleavedBufferAttribute( instanceColorBuffer, 3, 3 ) ); // rgb
+
+    		return this;
+
+    	}
+
+    	fromWireframeGeometry( geometry ) {
+
+    		this.setPositions( geometry.attributes.position.array );
+
+    		return this;
+
+    	}
+
+    	fromEdgesGeometry( geometry ) {
+
+    		this.setPositions( geometry.attributes.position.array );
+
+    		return this;
+
+    	}
+
+    	fromMesh( mesh ) {
+
+    		this.fromWireframeGeometry( new WireframeGeometry( mesh.geometry ) );
+
+    		// set colors, maybe
+
+    		return this;
+
+    	}
+
+    	fromLineSegments( lineSegments ) {
+
+    		const geometry = lineSegments.geometry;
+
+    		this.setPositions( geometry.attributes.position.array ); // assumes non-indexed
+
+    		// set colors, maybe
+
+    		return this;
+
+    	}
+
+    	computeBoundingBox() {
+
+    		if ( this.boundingBox === null ) {
+
+    			this.boundingBox = new Box3();
+
+    		}
+
+    		const start = this.attributes.instanceStart;
+    		const end = this.attributes.instanceEnd;
+
+    		if ( start !== undefined && end !== undefined ) {
+
+    			this.boundingBox.setFromBufferAttribute( start );
+
+    			_box.setFromBufferAttribute( end );
+
+    			this.boundingBox.union( _box );
+
+    		}
+
+    	}
+
+    	computeBoundingSphere() {
+
+    		if ( this.boundingSphere === null ) {
+
+    			this.boundingSphere = new Sphere();
+
+    		}
+
+    		if ( this.boundingBox === null ) {
+
+    			this.computeBoundingBox();
+
+    		}
+
+    		const start = this.attributes.instanceStart;
+    		const end = this.attributes.instanceEnd;
+
+    		if ( start !== undefined && end !== undefined ) {
+
+    			const center = this.boundingSphere.center;
+
+    			this.boundingBox.getCenter( center );
+
+    			let maxRadiusSq = 0;
+
+    			for ( let i = 0, il = start.count; i < il; i ++ ) {
+
+    				_vector.fromBufferAttribute( start, i );
+    				maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared( _vector ) );
+
+    				_vector.fromBufferAttribute( end, i );
+    				maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared( _vector ) );
+
+    			}
+
+    			this.boundingSphere.radius = Math.sqrt( maxRadiusSq );
+
+    			if ( isNaN( this.boundingSphere.radius ) ) {
+
+    				console.error( 'THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values.', this );
+
+    			}
+
+    		}
+
+    	}
+
+    	toJSON() {
+
+    		// todo
+
+    	}
+
+    	applyMatrix( matrix ) {
+
+    		console.warn( 'THREE.LineSegmentsGeometry: applyMatrix() has been renamed to applyMatrix4().' );
+
+    		return this.applyMatrix4( matrix );
+
+    	}
+
+    }
+
+    UniformsLib.line = {
+
+    	worldUnits: { value: 1 },
+    	linewidth: { value: 1 },
+    	resolution: { value: new Vector2( 1, 1 ) },
+    	dashOffset: { value: 0 },
+    	dashScale: { value: 1 },
+    	dashSize: { value: 1 },
+    	gapSize: { value: 1 } // todo FIX - maybe change to totalSize
+
+    };
+
+    ShaderLib[ 'line' ] = {
+
+    	uniforms: UniformsUtils.merge( [
+    		UniformsLib.common,
+    		UniformsLib.fog,
+    		UniformsLib.line
+    	] ),
+
+    	vertexShader:
+    	/* glsl */`
+		#include <common>
+		#include <color_pars_vertex>
+		#include <fog_pars_vertex>
+		#include <logdepthbuf_pars_vertex>
+		#include <clipping_planes_pars_vertex>
+
+		uniform float linewidth;
+		uniform vec2 resolution;
+
+		attribute vec3 instanceStart;
+		attribute vec3 instanceEnd;
+
+		attribute vec3 instanceColorStart;
+		attribute vec3 instanceColorEnd;
+
+		#ifdef WORLD_UNITS
+
+			varying vec4 worldPos;
+			varying vec3 worldStart;
+			varying vec3 worldEnd;
+
+			#ifdef USE_DASH
+
+				varying vec2 vUv;
+
+			#endif
+
+		#else
+
+			varying vec2 vUv;
+
+		#endif
+
+		#ifdef USE_DASH
+
+			uniform float dashScale;
+			attribute float instanceDistanceStart;
+			attribute float instanceDistanceEnd;
+			varying float vLineDistance;
+
+		#endif
+
+		void trimSegment( const in vec4 start, inout vec4 end ) {
+
+			// trim end segment so it terminates between the camera plane and the near plane
+
+			// conservative estimate of the near plane
+			float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
+			float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
+			float nearEstimate = - 0.5 * b / a;
+
+			float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
+
+			end.xyz = mix( start.xyz, end.xyz, alpha );
+
+		}
+
+		void main() {
+
+			#ifdef USE_COLOR
+
+				vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;
+
+			#endif
+
+			#ifdef USE_DASH
+
+				vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
+				vUv = uv;
+
+			#endif
+
+			float aspect = resolution.x / resolution.y;
+
+			// camera space
+			vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
+			vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
+
+			#ifdef WORLD_UNITS
+
+				worldStart = start.xyz;
+				worldEnd = end.xyz;
+
+			#else
+
+				vUv = uv;
+
+			#endif
+
+			// special case for perspective projection, and segments that terminate either in, or behind, the camera plane
+			// clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
+			// but we need to perform ndc-space calculations in the shader, so we must address this issue directly
+			// perhaps there is a more elegant solution -- WestLangley
+
+			bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column
+
+			if ( perspective ) {
+
+				if ( start.z < 0.0 && end.z >= 0.0 ) {
+
+					trimSegment( start, end );
+
+				} else if ( end.z < 0.0 && start.z >= 0.0 ) {
+
+					trimSegment( end, start );
+
+				}
+
+			}
+
+			// clip space
+			vec4 clipStart = projectionMatrix * start;
+			vec4 clipEnd = projectionMatrix * end;
+
+			// ndc space
+			vec3 ndcStart = clipStart.xyz / clipStart.w;
+			vec3 ndcEnd = clipEnd.xyz / clipEnd.w;
+
+			// direction
+			vec2 dir = ndcEnd.xy - ndcStart.xy;
+
+			// account for clip-space aspect ratio
+			dir.x *= aspect;
+			dir = normalize( dir );
+
+			#ifdef WORLD_UNITS
+
+				vec3 worldDir = normalize( end.xyz - start.xyz );
+				vec3 tmpFwd = normalize( mix( start.xyz, end.xyz, 0.5 ) );
+				vec3 worldUp = normalize( cross( worldDir, tmpFwd ) );
+				vec3 worldFwd = cross( worldDir, worldUp );
+				worldPos = position.y < 0.5 ? start: end;
+
+				// height offset
+				float hw = linewidth * 0.5;
+				worldPos.xyz += position.x < 0.0 ? hw * worldUp : - hw * worldUp;
+
+				// don't extend the line if we're rendering dashes because we
+				// won't be rendering the endcaps
+				#ifndef USE_DASH
+
+					// cap extension
+					worldPos.xyz += position.y < 0.5 ? - hw * worldDir : hw * worldDir;
+
+					// add width to the box
+					worldPos.xyz += worldFwd * hw;
+
+					// endcaps
+					if ( position.y > 1.0 || position.y < 0.0 ) {
+
+						worldPos.xyz -= worldFwd * 2.0 * hw;
+
+					}
+
+				#endif
+
+				// project the worldpos
+				vec4 clip = projectionMatrix * worldPos;
+
+				// shift the depth of the projected points so the line
+				// segments overlap neatly
+				vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd;
+				clip.z = clipPose.z * clip.w;
+
+			#else
+
+				vec2 offset = vec2( dir.y, - dir.x );
+				// undo aspect ratio adjustment
+				dir.x /= aspect;
+				offset.x /= aspect;
+
+				// sign flip
+				if ( position.x < 0.0 ) offset *= - 1.0;
+
+				// endcaps
+				if ( position.y < 0.0 ) {
+
+					offset += - dir;
+
+				} else if ( position.y > 1.0 ) {
+
+					offset += dir;
+
+				}
+
+				// adjust for linewidth
+				offset *= linewidth;
+
+				// adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
+				offset /= resolution.y;
+
+				// select end
+				vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
+
+				// back to clip space
+				offset *= clip.w;
+
+				clip.xy += offset;
+
+			#endif
+
+			gl_Position = clip;
+
+			vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation
+
+			#include <logdepthbuf_vertex>
+			#include <clipping_planes_vertex>
+			#include <fog_vertex>
+
+		}
+		`,
+
+    	fragmentShader:
+    	/* glsl */`
+		uniform vec3 diffuse;
+		uniform float opacity;
+		uniform float linewidth;
+
+		#ifdef USE_DASH
+
+			uniform float dashOffset;
+			uniform float dashSize;
+			uniform float gapSize;
+
+		#endif
+
+		varying float vLineDistance;
+
+		#ifdef WORLD_UNITS
+
+			varying vec4 worldPos;
+			varying vec3 worldStart;
+			varying vec3 worldEnd;
+
+			#ifdef USE_DASH
+
+				varying vec2 vUv;
+
+			#endif
+
+		#else
+
+			varying vec2 vUv;
+
+		#endif
+
+		#include <common>
+		#include <color_pars_fragment>
+		#include <fog_pars_fragment>
+		#include <logdepthbuf_pars_fragment>
+		#include <clipping_planes_pars_fragment>
+
+		vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) {
+
+			float mua;
+			float mub;
+
+			vec3 p13 = p1 - p3;
+			vec3 p43 = p4 - p3;
+
+			vec3 p21 = p2 - p1;
+
+			float d1343 = dot( p13, p43 );
+			float d4321 = dot( p43, p21 );
+			float d1321 = dot( p13, p21 );
+			float d4343 = dot( p43, p43 );
+			float d2121 = dot( p21, p21 );
+
+			float denom = d2121 * d4343 - d4321 * d4321;
+
+			float numer = d1343 * d4321 - d1321 * d4343;
+
+			mua = numer / denom;
+			mua = clamp( mua, 0.0, 1.0 );
+			mub = ( d1343 + d4321 * ( mua ) ) / d4343;
+			mub = clamp( mub, 0.0, 1.0 );
+
+			return vec2( mua, mub );
+
+		}
+
+		void main() {
+
+			#include <clipping_planes_fragment>
+
+			#ifdef USE_DASH
+
+				if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps
+
+				if ( mod( vLineDistance + dashOffset, dashSize + gapSize ) > dashSize ) discard; // todo - FIX
+
+			#endif
+
+			float alpha = opacity;
+
+			#ifdef WORLD_UNITS
+
+				// Find the closest points on the view ray and the line segment
+				vec3 rayEnd = normalize( worldPos.xyz ) * 1e5;
+				vec3 lineDir = worldEnd - worldStart;
+				vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd );
+
+				vec3 p1 = worldStart + lineDir * params.x;
+				vec3 p2 = rayEnd * params.y;
+				vec3 delta = p1 - p2;
+				float len = length( delta );
+				float norm = len / linewidth;
+
+				#ifndef USE_DASH
+
+					#ifdef USE_ALPHA_TO_COVERAGE
+
+						float dnorm = fwidth( norm );
+						alpha = 1.0 - smoothstep( 0.5 - dnorm, 0.5 + dnorm, norm );
+
+					#else
+
+						if ( norm > 0.5 ) {
+
+							discard;
+
+						}
+
+					#endif
+
+				#endif
+
+			#else
+
+				#ifdef USE_ALPHA_TO_COVERAGE
+
+					// artifacts appear on some hardware if a derivative is taken within a conditional
+					float a = vUv.x;
+					float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
+					float len2 = a * a + b * b;
+					float dlen = fwidth( len2 );
+
+					if ( abs( vUv.y ) > 1.0 ) {
+
+						alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 );
+
+					}
+
+				#else
+
+					if ( abs( vUv.y ) > 1.0 ) {
+
+						float a = vUv.x;
+						float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
+						float len2 = a * a + b * b;
+
+						if ( len2 > 1.0 ) discard;
+
+					}
+
+				#endif
+
+			#endif
+
+			vec4 diffuseColor = vec4( diffuse, alpha );
+
+			#include <logdepthbuf_fragment>
+			#include <color_fragment>
+
+			gl_FragColor = vec4( diffuseColor.rgb, alpha );
+
+			#include <tonemapping_fragment>
+			#include <colorspace_fragment>
+			#include <fog_fragment>
+			#include <premultiplied_alpha_fragment>
+
+		}
+		`
+    };
+
+    class LineMaterial extends ShaderMaterial {
+
+    	constructor( parameters ) {
+
+    		super( {
+
+    			type: 'LineMaterial',
+    			uniforms: UniformsUtils.clone( ShaderLib[ 'line' ].uniforms ),
+
+    			vertexShader: ShaderLib[ 'line' ].vertexShader,
+    			fragmentShader: ShaderLib[ 'line' ].fragmentShader,
+
+    			clipping: true // required for clipping support
+
+    		} );
+
+    		this.isLineMaterial = true;
+
+    		this.setValues( parameters );
+
+    	}
+
+    	get color() {
+
+    		return this.uniforms.diffuse.value;
+
+    	}
+
+    	set color( value ) {
+
+    		this.uniforms.diffuse.value = value;
+
+    	}
+
+    	get worldUnits() {
+
+    		return 'WORLD_UNITS' in this.defines;
+
+    	}
+
+    	set worldUnits( value ) {
+
+    		if ( value === true ) {
+
+    			this.defines.WORLD_UNITS = '';
+
+    		} else {
+
+    			delete this.defines.WORLD_UNITS;
+
+    		}
+
+    	}
+
+    	get linewidth() {
+
+    		return this.uniforms.linewidth.value;
+
+    	}
+
+    	set linewidth( value ) {
+
+    		if ( ! this.uniforms.linewidth ) return;
+    		this.uniforms.linewidth.value = value;
+
+    	}
+
+    	get dashed() {
+
+    		return 'USE_DASH' in this.defines;
+
+    	}
+
+    	set dashed( value ) {
+
+    		if ( ( value === true ) !== this.dashed ) {
+
+    			this.needsUpdate = true;
+
+    		}
+
+    		if ( value === true ) {
+
+    			this.defines.USE_DASH = '';
+
+    		} else {
+
+    			delete this.defines.USE_DASH;
+
+    		}
+
+    	}
+
+    	get dashScale() {
+
+    		return this.uniforms.dashScale.value;
+
+    	}
+
+    	set dashScale( value ) {
+
+    		this.uniforms.dashScale.value = value;
+
+    	}
+
+    	get dashSize() {
+
+    		return this.uniforms.dashSize.value;
+
+    	}
+
+    	set dashSize( value ) {
+
+    		this.uniforms.dashSize.value = value;
+
+    	}
+
+    	get dashOffset() {
+
+    		return this.uniforms.dashOffset.value;
+
+    	}
+
+    	set dashOffset( value ) {
+
+    		this.uniforms.dashOffset.value = value;
+
+    	}
+
+    	get gapSize() {
+
+    		return this.uniforms.gapSize.value;
+
+    	}
+
+    	set gapSize( value ) {
+
+    		this.uniforms.gapSize.value = value;
+
+    	}
+
+    	get opacity() {
+
+    		return this.uniforms.opacity.value;
+
+    	}
+
+    	set opacity( value ) {
+
+    		if ( ! this.uniforms ) return;
+    		this.uniforms.opacity.value = value;
+
+    	}
+
+    	get resolution() {
+
+    		return this.uniforms.resolution.value;
+
+    	}
+
+    	set resolution( value ) {
+
+    		this.uniforms.resolution.value.copy( value );
+
+    	}
+
+    	get alphaToCoverage() {
+
+    		return 'USE_ALPHA_TO_COVERAGE' in this.defines;
+
+    	}
+
+    	set alphaToCoverage( value ) {
+
+    		if ( ! this.defines ) return;
+
+    		if ( ( value === true ) !== this.alphaToCoverage ) {
+
+    			this.needsUpdate = true;
+
+    		}
+
+    		if ( value === true ) {
+
+    			this.defines.USE_ALPHA_TO_COVERAGE = '';
+
+    		} else {
+
+    			delete this.defines.USE_ALPHA_TO_COVERAGE;
+
+    		}
+
+    	}
+
+    }
+
+    const _start = new Vector3();
+    const _end = new Vector3();
+    const _viewport = new Vector4();
+
+    class Wireframe extends Mesh {
+
+    	constructor( geometry = new LineSegmentsGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
+
+    		super( geometry, material );
+
+    		this.isWireframe = true;
+
+    		this.type = 'Wireframe';
+
+    	}
+
+    	// for backwards-compatibility, but could be a method of LineSegmentsGeometry...
+
+    	computeLineDistances() {
+
+    		const geometry = this.geometry;
+
+    		const instanceStart = geometry.attributes.instanceStart;
+    		const instanceEnd = geometry.attributes.instanceEnd;
+    		const lineDistances = new Float32Array( 2 * instanceStart.count );
+
+    		for ( let i = 0, j = 0, l = instanceStart.count; i < l; i ++, j += 2 ) {
+
+    			_start.fromBufferAttribute( instanceStart, i );
+    			_end.fromBufferAttribute( instanceEnd, i );
+
+    			lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
+    			lineDistances[ j + 1 ] = lineDistances[ j ] + _start.distanceTo( _end );
+
+    		}
+
+    		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
+
+    		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
+    		geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
+
+    		return this;
+
+    	}
+
+    	onBeforeRender( renderer ) {
+
+    		const uniforms = this.material.uniforms;
+
+    		if ( uniforms && uniforms.resolution ) {
+
+    			renderer.getViewport( _viewport );
+    			this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
+
+    		}
+
+    	}
+
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    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;
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    class HighlighterComponent {
         constructor(viewer) {
             this.geometryEnd = () => {
-                const extentsCenter = this.viewer.extents.getCenter(new Vector3());
-                const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
-                const rendererSize = this.viewer.renderer.getSize(new Vector2());
-                const aspect = rendererSize.x / rendererSize.y;
-                // TODO: do not change the camera and target after opening the second model in "append" mode
-                let sceneCamera;
-                this.viewer.scene.traverse((object) => {
-                    if (object.isCamera)
-                        if (!sceneCamera)
-                            sceneCamera = object;
-                        else if (object.isPerspectiveCamera && sceneCamera.isOrthographicCamera)
-                            sceneCamera = object;
+                const { facesColor, facesTransparancy, 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: 0.8,
+                    depthTest: true,
+                    depthWrite: true,
+                    resolution: new Vector2(window.innerWidth, window.innerHeight),
                 });
-                if (sceneCamera) {
-                    this.viewer.camera = sceneCamera.clone();
-                    this.viewer.camera.up.set(0, 0, 1);
-                    this.viewer.camera.scale.set(1, 1, 1); // <- visualize fix
-                }
-                const camera = this.viewer.camera;
-                if (camera.isPerspectiveCamera) {
-                    camera.aspect = aspect;
-                    camera.near = extentsSize / 100;
-                    camera.far = extentsSize * 100;
-                    camera.updateProjectionMatrix();
-                }
-                if (camera.isOrthographicCamera) {
-                    camera.left = camera.bottom * aspect;
-                    camera.right = camera.top * aspect;
-                    camera.near = 0;
-                    camera.far = extentsSize * 100;
-                    camera.updateProjectionMatrix();
-                }
-                this.viewer.target.copy(extentsCenter);
-                if (!sceneCamera) {
-                    this.viewer.executeCommand("setDefaultViewPosition");
-                }
-            };
-            this.viewer = viewer;
-            this.viewer.addEventListener("databasechunk", this.geometryEnd);
-        }
-        dispose() {
-            this.viewer.removeEventListener("databasechunk", this.geometryEnd);
-        }
-    }
-
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    class ExtentsComponent {
-        constructor(viewer) {
-            this.syncExtents = () => {
-                const extents = new Box3();
-                this.viewer.scene.traverseVisible((object) => !object.children.length && extents.expandByObject(object));
-                this.viewer.extents.copy(extents);
             };
-            this.viewer = viewer;
-            this.viewer.addEventListener("databasechunk", this.syncExtents);
-            this.viewer.addEventListener("clear", this.syncExtents);
-            this.viewer.on("explode", this.syncExtents);
-            this.viewer.on("isolate", this.syncExtents);
-            this.viewer.on("hide", this.syncExtents);
-            this.viewer.on("showall", this.syncExtents);
-        }
-        dispose() {
-            this.viewer.removeEventListener("databasechunk", this.syncExtents);
-            this.viewer.removeEventListener("clear", this.syncExtents);
-            this.viewer.off("explode", this.syncExtents);
-            this.viewer.off("isolate", this.syncExtents);
-            this.viewer.off("hide", this.syncExtents);
-            this.viewer.off("showall", this.syncExtents);
-        }
-    }
-
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    class LightComponent {
-        constructor(viewer) {
-            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;
-                this.directionalLight.position
-                    .set(0.5, 0, 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.optionsChange = () => {
+                const { facesColor, facesTransparancy, 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.ambientLight = new AmbientLight(0xffffff, 1);
-            this.viewer.scene.add(this.ambientLight);
-            this.directionalLight = new DirectionalLight(0xffffff, 1);
-            this.directionalLight.position.set(0.5, 0, 0.866); // ~60º
-            this.viewer.scene.add(this.directionalLight);
-            this.frontLight = new DirectionalLight(0xffffff, 1.25);
-            this.frontLight.position.set(0, 1, 0);
-            this.viewer.scene.add(this.frontLight);
-            this.hemisphereLight = new HemisphereLight(0xffffff, 0x444444, 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);
+            this.viewer.addEventListener("optionschange", this.optionsChange);
+            this.viewer.addEventListener("resize", this.viewerResize);
+            this.geometryEnd();
         }
         dispose() {
-            this.ambientLight.removeFromParent();
-            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);
-        }
-    }
-
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    class RenderLoopComponent {
-        constructor(viewer) {
-            this.animate = (time = 0) => {
-                this.requestId = requestAnimationFrame(this.animate);
-                this.viewer.render(time);
-            };
-            this.viewer = viewer;
-            this.animate();
+            this.viewer.removeEventListener("optionschange", this.optionsChange);
+            this.viewer.removeEventListener("resize", this.viewerResize);
         }
-        dispose() {
-            cancelAnimationFrame(this.requestId);
+        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;
+            }
         }
-    }
-
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    class ResizeCanvasComponent {
-        constructor(viewer) {
-            this.resizeViewer = (entries) => {
-                const { width, height } = entries[0].contentRect;
-                if (!width || !height)
-                    return; // <- invisible viewer, or viewer with parent removed
-                const camera = this.viewer.camera;
-                const aspect = width / height;
-                if (camera.isPerspectiveCamera) {
-                    camera.aspect = aspect;
-                    camera.updateProjectionMatrix();
-                }
-                if (camera.isOrthographicCamera) {
-                    camera.left = camera.bottom * aspect;
-                    camera.right = camera.top * aspect;
-                    camera.updateProjectionMatrix();
-                }
-                this.viewer.renderer.setSize(width, height, true);
-                this.viewer.update(true);
-                this.viewer.emitEvent({ type: "resize", width, height });
-            };
-            this.viewer = viewer;
-            this.resizeObserver = new ResizeObserver(this.resizeViewer);
-            this.resizeObserver.observe(viewer.canvas.parentElement);
+        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;
         }
-        dispose() {
-            this.resizeObserver.disconnect();
+        viewerResize(event) {
+            if (!this.outlineMaterial)
+                return;
+            this.outlineMaterial.resolution.set(event.width, event.height);
         }
     }
 
@@ -60783,6 +61863,7 @@ void main() {
     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));
 
@@ -77816,7 +78897,7 @@ void main() {
                 let wcsPoints = this._ref.getAttr("wcsPoints");
                 if (!wcsPoints) {
                     wcsPoints = [];
-                    let points = this._ref.points();
+                    const points = this._ref.points();
                     let wcsPoint;
                     for (let i = 0; i < points.length; i += 2) {
                         wcsPoint = this._worldTransformer.screenToWorld({
@@ -77845,7 +78926,7 @@ void main() {
             const wcsPoints = [];
             params.points.forEach((point => {
                 konvaPoints.push(point.x, point.y);
-                let wcsPoint = this._worldTransformer.screenToWorld({
+                const wcsPoint = this._worldTransformer.screenToWorld({
                     x: point.x,
                     y: point.y
                 });
@@ -77873,8 +78954,8 @@ void main() {
             }));
             this._ref.on("transformend", (e => {
                 const absoluteTransform = this._ref.getAbsoluteTransform();
-                let wcsPoints = [];
-                let points = this._ref.points();
+                const wcsPoints = [];
+                const points = this._ref.points();
                 let wcsPoint;
                 for (let i = 0; i < points.length; i += 2) {
                     const position = absoluteTransform.point({
@@ -77895,8 +78976,8 @@ void main() {
             }));
             this._ref.on("dragend", (e => {
                 const absoluteTransform = this._ref.getAbsoluteTransform();
-                let wcsPoints = [];
-                let points = this._ref.points();
+                const wcsPoints = [];
+                const points = this._ref.points();
                 let wcsPoint;
                 for (let i = 0; i < points.length; i += 2) {
                     const position = absoluteTransform.point({
@@ -77984,17 +79065,17 @@ void main() {
         }
         addPoints(points) {
             let newPoints = this._ref.points();
-            let wcsPoints = this._ref.getAttr("wcsPoints");
+            const wcsPoints = this._ref.getAttr("wcsPoints");
             points.forEach((point => {
                 newPoints = newPoints.concat([ point.x, point.y ]);
-                let wcsPoint = this._worldTransformer.screenToWorld(point);
+                const wcsPoint = this._worldTransformer.screenToWorld(point);
                 wcsPoints.push(wcsPoint);
             }));
             this._ref.points(newPoints);
         }
         updateScreenCoordinates() {
-            let wcsPoints = this._ref.getAttr("wcsPoints");
-            let points = [];
+            const wcsPoints = this._ref.getAttr("wcsPoints");
+            const points = [];
             let invert = this._ref.getAbsoluteTransform().copy();
             invert = invert.invert();
             wcsPoints.forEach((point => {
@@ -78153,7 +79234,7 @@ void main() {
             this._ref.fontSize(size);
         }
         updateScreenCoordinates() {
-            let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+            const screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
             let invert = this._ref.getStage().getAbsoluteTransform().copy();
             invert = invert.invert();
             const positionStart = invert.point(screenPositionStart);
@@ -78369,8 +79450,8 @@ void main() {
             return this._ref.strokeWidth();
         }
         updateScreenCoordinates() {
-            let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
-            let screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+            const screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+            const screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
             let invert = this._ref.getStage().getAbsoluteTransform().copy();
             invert = invert.invert();
             const positionStart = invert.point(screenPositionStart);
@@ -78608,9 +79689,9 @@ void main() {
             this._ref = null;
         }
         updateScreenCoordinates() {
-            let screenPosition = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsPosition"));
-            let radiusX = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsRadiusX"));
-            let radiusY = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsRadiusY"));
+            const screenPosition = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsPosition"));
+            const radiusX = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsRadiusX"));
+            const radiusY = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsRadiusY"));
             let invert = this._ref.getStage().getAbsoluteTransform().copy();
             invert = invert.invert();
             const position = invert.point({
@@ -78795,8 +79876,8 @@ void main() {
             }));
         }
         updateScreenCoordinates() {
-            let screenStartPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
-            let screenEndPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+            const screenStartPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+            const screenEndPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
             let invert = this._ref.getAbsoluteTransform().copy();
             invert = invert.invert();
             const startPoint = invert.point({
@@ -79034,8 +80115,8 @@ void main() {
             this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
         }
         updateScreenCoordinates() {
-            let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
-            let screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+            const screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+            const screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
             let invert = this._ref.getStage().getAbsoluteTransform().copy();
             invert = invert.invert();
             const positionStart = invert.point(screenPositionStart);
@@ -79333,8 +80414,8 @@ void main() {
             this._ref.strokeWidth(size);
         }
         updateScreenCoordinates() {
-            let screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
-            let screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
+            const screenPositionStart = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
+            const screenPositionEnd = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
             let invert = this._ref.getStage().getAbsoluteTransform().copy();
             invert = invert.invert();
             const positionStart = invert.point(screenPositionStart);
@@ -80627,6 +81708,9 @@ void main() {
                 this.setActiveDragger(dragger.name);
             }
         }
+        getComponent(name) {
+            return this._components.find((component) => component.name === name);
+        }
         is3D() {
             return true;
         }
@@ -80656,9 +81740,6 @@ void main() {
         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)