Make zoom to fit, update version

Author: agviegas

examples/simple-angular/package.json

@@ -26,7 +26,7 @@
     "three": "^0.129.0",
     "tslib": "^2.1.0",
     "web-ifc": "^0.0.20",
-    "web-ifc-viewer": "^1.0.11",
+    "web-ifc-viewer": "1.0.14",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

examples/simple-angular/src/app/services/ifc.service.ts

@@ -47,7 +47,7 @@ export class IfcService {
   }
 
   loadIfc(file: File) {
-    this.ifcViewer?.loadIfc(file);
+    this.ifcViewer?.loadIfc(file, true);
   }
 
   select(modelID: number, expressID: number, pick = true) {

examples/simple-angular/src/app/spatial-tree/spatial-tree.component.ts

@@ -1,6 +1,6 @@
 import { IfcService } from '../services/ifc.service';
 import { NestedTreeControl } from '@angular/cdk/tree';
-import { ChangeDetectionStrategy, Component, Output, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 
 /**

examples/simple-html/package.json

@@ -2,7 +2,7 @@
   "name": "web-ifc-viewer-basic-example",
   "private": true,
   "type": "module",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "A basic html example for web-ifc-viewer",
   "main": "index.html",
   "scripts": {
@@ -21,6 +21,6 @@
   },
   "dependencies": {
     "stats.js": "^0.17.0",
-    "web-ifc-viewer": "^1.0.11"
+    "web-ifc-viewer": "1.0.14"
   }
 }

examples/simple-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-ifc-viewer-simple-react",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "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.11",
+  "version": "1.0.14",
   "private": true,
   "author": "agviegas",
   "license": "MIT",

viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-ifc-viewer",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "description": "IFC viewer",
   "main": "dist/index.js",
   "scripts": {
@@ -31,7 +31,7 @@
     "@types/stats.js": "^0.17.0",
     "stats.js": "^0.17.0",
     "three": "^0.128.0",
-    "web-ifc-three": "^0.0.30"
+    "web-ifc-three": "0.0.31"
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",

viewer/src/components/context/camera.ts

@@ -1,4 +1,4 @@
-import { PerspectiveCamera, Vector3, MOUSE } from 'three';
+import { PerspectiveCamera, Vector3, MOUSE, Box3, MathUtils } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { IfcComponent, Context } from '../../base-types';
 
@@ -33,6 +33,30 @@ export class IfcCamera extends IfcComponent {
     this.controls.enabled = active;
   }
 
+  fitModelToFrame() {
+    const scene = this.context.getScene();
+    const box = new Box3().setFromObject(scene.children[scene.children.length - 1]);
+    const boxSize = box.getSize(new Vector3()).length();
+    const boxCenter = box.getCenter(new Vector3());
+
+    const halfSizeToFitOnScreen = boxSize * 0.5;
+    const halfFovY = MathUtils.degToRad(this.camera.fov * 0.5);
+    const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
+
+    const direction = new Vector3()
+      .subVectors(this.camera.position, boxCenter)
+      .multiply(new Vector3(1, 0, 1))
+      .normalize();
+
+    this.camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
+    this.camera.updateProjectionMatrix();
+    this.camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
+
+    // set target to newest loaded model
+    this.controls.target.copy(boxCenter);
+    this.controls.update();
+  }
+
   private setupCamera() {
     // camera.up = new Vector3(0, 0, 1);
     this.camera.position.z = 8;

viewer/src/components/context/context.ts

@@ -81,6 +81,10 @@ export class IfcContext implements Context {
     return this.ifcCaster.castRayIfc();
   }
 
+  fitToFrame() {
+    this.ifcCamera.fitModelToFrame();
+  }
+
   private render = () => {
     requestAnimationFrame(this.render);
     this.updateAllComponents();

viewer/src/ifc-viewer-api.ts

@@ -67,12 +67,14 @@ export class IfcViewerAPI {
   //   if(!this.edges) this.edges
   // }
 
-  loadIfc = async (file: File) => {
-    this.ifcManager.loadIfc(file);
+  loadIfc = async (file: File, fitToFrame = false) => {
+    await this.ifcManager.loadIfc(file);
+    if (fitToFrame) this.context.fitToFrame();
   };
 
-  loadIfcUrl = async (fileUrl: string) => {
-    this.ifcManager.loadIfcUrl(fileUrl);
+  loadIfcUrl = async (fileUrl: string, fitToFrame = false) => {
+    await this.ifcManager.loadIfcUrl(fileUrl);
+    if (fitToFrame) this.context.fitToFrame();
   };
 
   setWasmPath(path: string) {