Get properties with double click

Author: agviegas

examples/simple-html/main.js

@@ -22,6 +22,7 @@ inputElement.addEventListener('change', loadIfc, false);
 document.body.appendChild(inputElement);
 
 window.onmousemove = viewer.preselect;
+window.ondblclick = viewer.select;
 
 //Setup UI
 const loadButton = createSideMenuButton('./resources/folder-icon.svg');

viewer/src/components/raycaster.ts

@@ -15,7 +15,7 @@ export class IFCRaycaster {
     this.raycaster.firstHitOnly = true;
   }
 
-  castRay(event: any, onHit: (event: any, item: THREE.Intersection) => void ) {
+  castRay(event: any, onHit: (event: any, item: THREE.Intersection) => any ) {
     this.raycaster.setFromCamera(this.mouse, this.camera);
     const result = this.raycaster.intersectObjects(this.ifcModels);
     if(result.length > 0) onHit(event, result[0]);

viewer/src/core/IFC/ifc-manager.ts

@@ -9,21 +9,36 @@ export class IfcManager {
   private caster: IFCRaycaster;
   private scene: THREE.Scene;
   private preselection: IfcSelection;
-  // private selection: IfcSelection;
+  private selection: IfcSelection;
+
   private preselectMat = new THREE.MeshLambertMaterial({
     color: 0xffccff,
     transparent: true,
     opacity: 0.5,
-    depthTest: false
-});
+    depthTest: false,
+    side: THREE.DoubleSide
+  });
+
+  private selectMat = new THREE.MeshLambertMaterial({
+    color: 0xff33ff,
+    transparent: true,
+    opacity: 0.3,
+    depthTest: false,
+    side: THREE.DoubleSide
+  });
 
-  constructor(ifc_objects: THREE.Object3D[], scene: THREE.Scene, camera: THREE.PerspectiveCamera, mouse: THREE.Vector2) {
+  constructor(
+    ifc_objects: THREE.Object3D[],
+    scene: THREE.Scene,
+    camera: THREE.PerspectiveCamera,
+    mouse: THREE.Vector2
+  ) {
     this.loader = new IFCLoader();
     this.models = ifc_objects;
     this.scene = scene;
     this.caster = new IFCRaycaster(this.models, camera, mouse);
     this.preselection = new IfcSelection(this.loader, this.scene, this.preselectMat);
-    // this.selection = new IfcSelection(this.loader, this.models);
+    this.selection = new IfcSelection(this.loader, this.scene, this.selectMat);
   }
 
   async loadIfc(file: File, scene: THREE.Scene) {
@@ -43,6 +58,7 @@ export class IfcManager {
     this.caster.castRay(event, this.preselection.select);
   }
 
-
-  setModelDisplay() {}
+  select(event: any) {
+    this.caster.castRay(event, this.selection.selectProps);
+  }
 }

viewer/src/core/IFC/selection.ts

@@ -22,10 +22,25 @@ export class IfcSelection {
     this.selected = item.faceIndex;
     const mesh = item.object as IfcMesh;
     const id = this.ifcLoader.getExpressId(mesh.geometry, item.faceIndex);
-    if (id == undefined) return;
+    if (id == undefined) return null;
     this.removePreviousSelection(mesh);
     this.modelID = mesh.modelID;
     this.newSelection(id);
+    return id;
+  }
+
+  selectProps = (event: any, item: THREE.Intersection) => {
+    const id = this.select(event, item);
+    if(id) return this.getProperties(id);
+    return null;
+  }
+  
+  getProperties(id: number){
+    const props = this.ifcLoader.getItemProperties(this.modelID, id);
+    props.psets = this.ifcLoader.getPropertySets(this.modelID, id, true);
+    props.type = this.ifcLoader.getTypeProperties(this.modelID, id);
+    console.log(props);
+    return props;
   }
 
   newSelection = (id: number) => {

viewer/src/core/viewer.ts

@@ -118,6 +118,10 @@ export class Viewer {
         this.ifcManager.preselect(event);
     }
 
+    select = (event: any) => {
+        this.ifcManager.select(event);
+    }
+
     get ifcObjects() {
         return this.ifc_objects;
     };