Correct raycaster, make scene background color type also a number

Author: agviegas

examples/simple-html/package.json

@@ -2,7 +2,7 @@
   "name": "web-ifc-viewer-basic-example",
   "private": true,
   "type": "module",
- "version": "1.0.9",
+  "version": "1.0.11",
   "description": "A basic html example for web-ifc-viewer",
   "main": "index.html",
   "scripts": {

examples/simple-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-ifc-viewer-simple-react",
-  "version": "0.1.7",
+  "version": "1.0.11",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "web-ifc-viewer-root",
   "description": "IFC viewer",
- "version": "1.0.9",
+  "version": "1.0.11",
   "private": true,
   "author": "agviegas",
   "license": "MIT",

viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-ifc-viewer",
- "version": "1.0.9",
+  "version": "1.0.11",
   "description": "IFC viewer",
   "main": "dist/index.js",
   "scripts": {

viewer/src/components/raycaster.ts

@@ -4,19 +4,23 @@ export class IFCRaycaster {
   private camera: THREE.Camera;
   private ifcModels: THREE.Object3D[];
   private raycaster: THREE.Raycaster;
-  private mouse: THREE.Vector2;
+  private canvas: HTMLCanvasElement;
 
-  constructor(ifcModels: THREE.Object3D[], camera: THREE.Camera, mouse: THREE.Vector2) {
+  constructor(ifcModels: THREE.Object3D[], camera: THREE.Camera, renderer: THREE.WebGLRenderer) {
     this.camera = camera;
-    this.mouse = mouse;
+    this.canvas = renderer.domElement;
     this.ifcModels = ifcModels;
     this.raycaster = new THREE.Raycaster();
     //@ts-ignore
     this.raycaster.firstHitOnly = true;
   }
 
   castRay(event: any, onHit: (event: any, item: THREE.Intersection) => any ) {
-    this.raycaster.setFromCamera(this.mouse, this.camera);
+    const mouse = new THREE.Vector2();
+    const canvasBounds = this.canvas.getBoundingClientRect();
+    mouse.x = ((event.clientX - canvasBounds.left) / (canvasBounds.right - canvasBounds.left)) * 2 - 1;
+    mouse.y = -((event.clientY - canvasBounds.top) / (canvasBounds.bottom - canvasBounds.top)) * 2 + 1; 
+    this.raycaster.setFromCamera(mouse, this.camera);
     const result = this.raycaster.intersectObjects(this.ifcModels);
     if(result.length > 0) return onHit(event, result[0]);
   }

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

@@ -31,12 +31,12 @@ export class IfcManager {
     ifc_objects: THREE.Object3D[],
     scene: THREE.Scene,
     camera: THREE.PerspectiveCamera,
-    mouse: THREE.Vector2
+    renderer: THREE.WebGLRenderer
   ) {
     this.loader = new IFCLoader();
     this.models = ifc_objects;
     this.scene = scene;
-    this.caster = new IFCRaycaster(this.models, camera, mouse);
+    this.caster = new IFCRaycaster(this.models, camera, renderer);
     this.preselection = new IfcSelection(this.loader, this.scene, this.preselectMat);
     this.selection = new IfcSelection(this.loader, this.scene, this.selectMat);
   }
@@ -58,30 +58,32 @@ export class IfcManager {
     }
   }
 
-  setWasmPath(path: string){
+  setWasmPath(path: string) {
     this.loader.setWasmPath(path);
   }
 
   getSpatialStructure(modelID: number, recursive = false) {
     return this.loader.getSpatialStructure(modelID, recursive);
   }
 
-  getProperties(modelID: number, id: number, indirect = false) {
+  getProperties(modelID: number, id: number, indirect: boolean, recursive: boolean) {
+    if(modelID == null || id == null ) return null;
     const props = this.loader.getItemProperties(modelID, id);
-    if(indirect){
-      props.psets = this.loader.getPropertySets(modelID, id, true);
+    if (indirect) {
+      props.psets = this.loader.getPropertySets(modelID, id, recursive);
       props.type = this.loader.getTypeProperties(modelID, id);
     }
     console.log(props);
     return props;
   }
 
   preselect(event: any) {
-    const { modelID, id } = this.caster.castRay(event, this.preselection.select);
+    this.caster.castRay(event, this.preselection.select);
   }
 
-  select(event: any) {
-    const { modelID, id } = this.caster.castRay(event, this.selection.select);
-    return this.getProperties(modelID, id, true);
+  select(event: any, indirect: boolean, recursive: boolean) {
+    const result = this.caster.castRay(event, this.selection.select);
+    if(result == null || result.modelID == null || result.id == null) return null;
+    return this.getProperties(result.modelID, result.id, indirect, recursive);
   }
 }

viewer/src/core/viewer.ts

@@ -6,7 +6,7 @@ import { VisualizationInfo } from '@parametricos/bcf-js';
 import { IfcManager } from './IFC/ifc-manager';
 
 export interface ViewerOptions {
-    backgroundColor?: THREE.Color
+    backgroundColor?: THREE.Color | number
 }
 
 export class Viewer {
@@ -54,6 +54,10 @@ export class Viewer {
         this.controls = controls;
 
         //Scene
+        if(typeof options?.backgroundColor == 'number') {
+            const color = options?.backgroundColor as number;
+            options.backgroundColor = new THREE.Color(color);
+        }
         scene.background = options?.backgroundColor || new THREE.Color(0xa9a9a9);
 
         //Renderer
@@ -102,7 +106,7 @@ export class Viewer {
         this.render();
 
         //IFC management
-        this.ifcManager = new IfcManager(this.ifc_objects, this.scene, this.camera, this.mouse);
+        this.ifcManager = new IfcManager(this.ifc_objects, this.scene, this.camera, this.renderer);
     }
 
     render = () => {
@@ -131,8 +135,8 @@ export class Viewer {
         this.ifcManager.preselect(event);
     }
 
-    select = (event: any) => {
-        this.ifcManager.select(event);
+    select = (event: any, indirect = true, recursive = false) => {
+        this.ifcManager.select(event, indirect, recursive);
     }
 
     get ifcObjects() {