fix: improve ortho camera aspect update

ThatOpen · May 22, 2024 · 4c7c6fc · 4c7c6fc
1 parent 3c39e13
commit 4c7c6fc
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 29 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components",
   "description": "Collection of core functionalities to author BIM apps.",
-  "version": "2.0.0-alpha.17",
+  "version": "2.0.0-alpha.18",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",

diff --git a/packages/core/src/core/OrthoPerspectiveCamera/example.ts b/packages/core/src/core/OrthoPerspectiveCamera/example.ts
@@ -48,7 +48,12 @@ world.camera = new OBC.OrthoPerspectiveCamera(components);
 
 world.scene.setup();
 
-await world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+async function test() {
+  await world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+  await world.camera.projection.set("Orthographic");
+}
+
+test();
 
 // await world.camera.projection.set("Perspective");
 // await world.camera.projection.set("Orthographic");

diff --git a/packages/core/src/core/OrthoPerspectiveCamera/index.ts b/packages/core/src/core/OrthoPerspectiveCamera/index.ts
@@ -37,6 +37,8 @@ export class OrthoPerspectiveCamera extends SimpleCamera {
 
   protected readonly _navigationModes = new Map<NavModeID, NavigationMode>();
 
+  private previousSize: THREE.Vector2 | null = null;
+
   get mode() {
     if (!this._mode) {
       throw new Error("Mode not found, camera not initialized");
@@ -57,6 +59,7 @@ export class OrthoPerspectiveCamera extends SimpleCamera {
     this.projection.onChanged.add(
       (camera: THREE.PerspectiveCamera | THREE.OrthographicCamera) => {
         this.three = camera;
+        this.updateAspect();
       },
     );
 
@@ -67,6 +70,9 @@ export class OrthoPerspectiveCamera extends SimpleCamera {
       this._navigationModes.set("Plan", new PlanMode(this));
       this._mode = this._navigationModes.get("Orbit")!;
       this.mode.set(true, { preventTargetAdjustment: true });
+      if (this.currentWorld && this.currentWorld.renderer) {
+        this.previousSize = this.currentWorld.renderer.getSize().clone();
+      }
     });
   }
 
@@ -177,28 +183,25 @@ export class OrthoPerspectiveCamera extends SimpleCamera {
       return;
     }
 
+    if (!this.previousSize) return;
+
     const size = this.currentWorld.renderer.getSize();
-    this.threePersp.aspect = size.width / size.height;
-    this.threePersp.updateProjectionMatrix();
-
-    const lineOfSight = new THREE.Vector3();
-    this.threePersp.getWorldDirection(lineOfSight);
-    const target = new THREE.Vector3();
-    this.controls.getTarget(target);
-    const distance = target.clone().sub(this.threePersp.position);
-
-    const depth = distance.dot(lineOfSight);
-    const dims = this.currentWorld.renderer.getSize();
-    const aspect = dims.x / dims.y;
-    const camera = this.threePersp;
-    const height = depth * 2 * Math.atan((camera.fov * (Math.PI / 180)) / 2);
-    const width = height * aspect;
-
-    this.threeOrtho.zoom = 1;
-    this.threeOrtho.left = width / -2;
-    this.threeOrtho.right = width / 2;
-    this.threeOrtho.top = height / 2;
-    this.threeOrtho.bottom = height / -2;
+
+    const previousHeight = this.threeOrtho.top;
+    const previousWidth = this.threeOrtho.right;
+
+    const heightSizeFactor = size.y / this.previousSize.y;
+    const widthSizeFactor = size.x / this.previousSize.x;
+
+    const newHeight = previousHeight * heightSizeFactor;
+    const newWidth = previousWidth * widthSizeFactor;
+
+    this.threeOrtho.left = -newWidth;
+    this.threeOrtho.right = newWidth;
+    this.threeOrtho.top = newHeight;
+    this.threeOrtho.bottom = -newHeight;
     this.threeOrtho.updateProjectionMatrix();
+
+    this.previousSize.copy(size);
   }
 }
diff --git a/packages/front/package.json b/packages/front/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components-front",
   "description": "Collection of frontend tools to author BIM apps.",
-  "version": "2.0.0-alpha.17",
+  "version": "2.0.0-alpha.18",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",
@@ -47,7 +47,7 @@
     "web-ifc": "0.0.53"
   },
   "dependencies": {
-    "@thatopen/components": "2.0.0-alpha.17",
+    "@thatopen/components": "2.0.0-alpha.18",
     "camera-controls": "2.7.3",
     "dexie": "^4.0.4",
     "earcut": "^2.2.4",

diff --git a/yarn.lock b/yarn.lock
@@ -1291,7 +1291,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thatopen/components-front@workspace:packages/front"
   dependencies:
-    "@thatopen/components": 2.0.0-alpha.17
+    "@thatopen/components": 2.0.0-alpha.18
     "@thatopen/fragments": 2.0.0-alpha.5
     "@thatopen/ui": 2.0.0-alpha.12
     "@thatopen/ui-obc": 2.0.0-alpha.12
@@ -1311,7 +1311,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@thatopen/components@2.0.0-alpha.17, @thatopen/components@workspace:packages/core":
+"@thatopen/components@2.0.0-alpha.18, @thatopen/components@workspace:packages/core":
   version: 0.0.0-use.local
   resolution: "@thatopen/components@workspace:packages/core"
   dependencies:
@@ -1366,8 +1366,8 @@ __metadata:
     "@thatopen/ui": 2.0.0-alpha.12
     lit: 3.1.2
   peerDependencies:
-    "@thatopen/components": 2.0.0-alpha.17
-    "@thatopen/components-front": 2.0.0-alpha.17
+    "@thatopen/components": 2.0.0-alpha.18
+    "@thatopen/components-front": 2.0.0-alpha.18
     three: 0.160.1
     web-ifc: 0.0.53
   checksum: 8ba2af0f344af64362b88f44148babf3ba7a72fd68ced0072dd8b2948c592b8fc73ca8ae4daba8934adae6c6e888432263a47308b00a9bea73f1b703515dbcb3