@inweb/viewer-three 26.7.2 → 26.8.0

package/lib/Viewer/components/HighlighterComponent.d.ts

@@ -1,11 +1,11 @@
-import { LineBasicMaterial, MeshBasicMaterial, Object3D, WebGLRenderTarget } from "three";
+import { LineBasicMaterial, MeshPhongMaterial, Object3D, WebGLRenderTarget } from "three";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 import { IComponent, ResizeEvent } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 export declare class HighlighterComponent implements IComponent {
     protected viewer: Viewer;
     renderTarget: WebGLRenderTarget;
-    highlightMaterial: MeshBasicMaterial;
+    highlightMaterial: MeshPhongMaterial;
     outlineMaterial: LineMaterial;
     highlightLineMaterial: LineBasicMaterial;
     highlightLineGlowMaterial: LineMaterial;

package/lib/Viewer/loaders/GLTFCloudDynamicLoader.d.ts

@@ -1,10 +1,8 @@
-import { Group } from "three";
 import { ILoader, LoadParams } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 import { DynamicGltfLoader } from "./DynamicGltfLoader/DynamicGltfLoader.js";
 export declare class GLTFCloudDynamicLoader implements ILoader {
     viewer: Viewer;
-    scene: Group;
     gltfLoader: DynamicGltfLoader;
     requestId: number;
     constructor(viewer: Viewer);

package/lib/Viewer/loaders/index.d.ts

@@ -11,7 +11,7 @@ import { ILoadersRegistry } from "@inweb/viewer-core";
  *
  *    The loader should do:
  *
- *    - Load scene from file. The scene must be a Three.js object of type `Object3D` or a descendant of it.
+ *    - Load raw data from file and convert it to the `Three.js` scene.
  *    - Add scene to the viewer `scene`.
  *    - Create `ModelImpl` for the scene and to the viewer `models` list.
  *    - Synchronize viewer options and overlay.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.7.2",
+  "version": "26.8.0",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.7.2",
-    "@inweb/eventemitter2": "~26.7.2",
-    "@inweb/markup": "~26.7.2",
-    "@inweb/viewer-core": "~26.7.2"
+    "@inweb/client": "~26.8.0",
+    "@inweb/eventemitter2": "~26.8.0",
+    "@inweb/markup": "~26.8.0",
+    "@inweb/viewer-core": "~26.8.0"
   },
   "devDependencies": {
     "@types/three": "^0.173.0",

package/src/Viewer/Viewer.ts

@@ -154,14 +154,19 @@ export class Viewer
 
     this.scene = new Scene();
     this.helpers = new Scene();
+    this.target = new Vector3();
 
     const pixelRatio = window.devicePixelRatio;
     const rect = canvas.parentElement.getBoundingClientRect();
     const width = rect.width || 1;
     const height = rect.height || 1;
     const aspect = width / height;
+
     this.camera = new PerspectiveCamera(45, aspect, 0.01, 1000);
-    this.camera.up.set(0, 0, 1);
+    this.camera.up.set(0, 1, 0);
+    this.camera.position.set(0, 0, 1);
+    this.camera.lookAt(this.target);
+    this.camera.updateProjectionMatrix();
 
     this.renderer = new WebGLRenderer({
       canvas,

package/src/Viewer/commands/SetSelected.ts

@@ -30,6 +30,7 @@ export function setSelected(viewer: Viewer, handles: string[] = []): void {
 
   viewer.models.forEach((model) => {
     const objects = model.getObjectsByHandles(handles);
+    model.showObjects(objects);
     selection.select(objects, model);
   });
 

package/src/Viewer/commands/index.ts

@@ -80,9 +80,9 @@ commands.registerCommand("applyModelTransform", applyModelTransform);
 commands.registerCommand("clearMarkup", clearMarkup);
 commands.registerCommand("clearSelected", clearSelected);
 commands.registerCommand("clearSlices", clearSlices);
+commands.registerCommand("collect", collect);
 commands.registerCommand("createPreview", createPreview);
 commands.registerCommand("explode", explode);
-commands.registerCommand("collect", collect);
 commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
 commands.registerCommand("getModels", getModels);
 commands.registerCommand("getSelected", getSelected);

package/src/Viewer/components/CameraComponent.ts

@@ -53,7 +53,6 @@ export class CameraComponent implements IComponent {
     });
     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
     }
 

package/src/Viewer/components/HighlighterComponent.ts

@@ -25,7 +25,7 @@ import {
   Color,
   EdgesGeometry,
   LineBasicMaterial,
-  MeshBasicMaterial,
+  MeshPhongMaterial,
   Object3D,
   RGBAFormat,
   UnsignedByteType,
@@ -43,7 +43,7 @@ import { HighlighterUtils } from "./HighlighterUtils";
 export class HighlighterComponent implements IComponent {
   protected viewer: Viewer;
   public renderTarget: WebGLRenderTarget;
-  public highlightMaterial: MeshBasicMaterial;
+  public highlightMaterial: MeshPhongMaterial;
   public outlineMaterial: LineMaterial;
   public highlightLineMaterial: LineBasicMaterial;
   public highlightLineGlowMaterial: LineMaterial;
@@ -76,6 +76,8 @@ export class HighlighterComponent implements IComponent {
   }
 
   highlight(objects: Object3D | Object3D[]) {
+    const { edgesVisibility } = this.viewer.options;
+
     if (!Array.isArray(objects)) objects = [objects];
     if (!objects.length) return;
 
@@ -93,25 +95,27 @@ export class HighlighterComponent implements IComponent {
         wireframe.position.copy(object.position);
         wireframe.rotation.copy(object.rotation);
         wireframe.scale.copy(object.scale);
+        wireframe.visible = edgesVisibility;
 
         object.parent.add(wireframe);
+        object.userData.highlightWireframe = 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 edgesGeometry = new EdgesGeometry(object.geometry, 60);
         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);
+        wireframe.visible = edgesVisibility;
 
         object.parent.add(wireframe);
+        object.userData.highlightWireframe = wireframe;
 
-        object.userData.highlightwireframe = wireframe;
         object.userData.originalMaterial = object.material;
         object.material = this.highlightMaterial;
         object.isHighlighted = true;
@@ -128,29 +132,35 @@ export class HighlighterComponent implements IComponent {
 
       object.isHighlighted = false;
       object.material = object.userData.originalMaterial;
-      object.userData.highlightwireframe.removeFromParent();
+      object.userData.highlightWireframe.removeFromParent();
 
       delete object.userData.originalMaterial;
-      delete object.userData.highlightwireframe;
+      delete object.userData.highlightWireframe;
     });
   }
 
   geometryEnd = () => {
-    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+    const { facesColor, facesTransparancy, edgesColor, edgesOverlap, facesOverlap } = this.viewer.options;
 
-    this.highlightMaterial = new MeshBasicMaterial({
+    this.highlightMaterial = new MeshPhongMaterial({
       color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
       transparent: true,
       opacity: (255 - facesTransparancy) / 255,
-      depthTest: false,
-      depthWrite: false,
+      depthTest: !facesOverlap,
+      depthWrite: !facesOverlap,
+      specular: 0x222222,
+      shininess: 10,
+      reflectivity: 0.05,
+      polygonOffset: true,
+      polygonOffsetFactor: 1,
+      polygonOffsetUnits: 1,
     });
 
     this.outlineMaterial = new LineMaterial({
       color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
       linewidth: 1.5,
-      depthTest: false,
-      depthWrite: false,
+      depthTest: !edgesOverlap,
+      depthWrite: !edgesOverlap,
       resolution: new Vector2(window.innerWidth, window.innerHeight),
     });
 
@@ -165,21 +175,33 @@ export class HighlighterComponent implements IComponent {
       linewidth: 5,
       transparent: true,
       opacity: 0.8,
-      depthTest: true,
-      depthWrite: true,
+      depthTest: !edgesOverlap,
+      depthWrite: !edgesOverlap,
       resolution: new Vector2(window.innerWidth, window.innerHeight),
     });
   };
 
   optionsChange = () => {
-    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+    const { facesColor, facesTransparancy, edgesColor, edgesVisibility, edgesOverlap, facesOverlap } =
+      this.viewer.options;
 
     this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
     this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
+    this.highlightMaterial.depthTest = !facesOverlap;
+    this.highlightMaterial.depthWrite = !facesOverlap;
+
     this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.outlineMaterial.depthTest = !edgesOverlap;
+    this.outlineMaterial.depthWrite = !edgesOverlap;
+
     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.selected.forEach((selected) => {
+      const wireframe = selected.userData.highlightWireframe;
+      if (wireframe) wireframe.visible = edgesVisibility;
+    });
+
     this.viewer.update();
   };
 

package/src/Viewer/components/LightComponent.ts

@@ -36,20 +36,10 @@ export class LightComponent implements IComponent {
   constructor(viewer: Viewer) {
     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.ambientLight = new AmbientLight(0xffffff, 1.0);
+    this.directionalLight = new DirectionalLight(0xffffff, 1.0);
     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);
@@ -84,15 +74,21 @@ export class LightComponent implements IComponent {
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius;
 
     this.directionalLight.position
-      .set(0.5, 0, 0.866)
+      .set(0.5, 0.866, 0) // ~60º
       .multiplyScalar(extentsSize * 2)
       .add(extentsCenter);
     this.directionalLight.target.position.copy(extentsCenter);
 
-    this.frontLight.position.set(0, extentsSize * 2, 0).add(extentsCenter);
+    this.frontLight.position
+      .set(0, 0, 1)
+      .multiplyScalar(extentsSize * 2)
+      .add(extentsCenter);
     this.frontLight.target.position.copy(extentsCenter);
 
-    this.hemisphereLight.position.set(0, extentsSize * 3, 0).add(extentsCenter);
+    this.hemisphereLight.position
+      .set(0, 0, 1)
+      .multiplyScalar(extentsSize * 3)
+      .add(extentsCenter);
 
     this.viewer.scene.add(this.ambientLight);
     this.viewer.scene.add(this.directionalLight);

package/src/Viewer/components/SelectionComponent.ts

@@ -68,7 +68,7 @@ export class SelectionComponent implements IComponent {
     this.viewer.models.forEach((model) => {
       const objects = model.getVisibleObjects();
       const intersects = this.getPointerIntersects(upPosition, objects);
-      intersections.push(...intersects.map((x) => ({ ...x, model })));
+      if (intersects.length > 0) intersections.push({ ...intersects[0], model });
     });
     intersections = intersections.sort((a, b) => a.distance - b.distance);
 
@@ -126,7 +126,6 @@ export class SelectionComponent implements IComponent {
     if (!Array.isArray(objects)) objects = [objects];
     if (!objects.length) return;
 
-    model.showObjects(objects);
     model.showOriginalObjects(objects);
     this.highlighter.highlight(objects);