From 4c7c6fc66919e1083ef195ca9969553c31f310ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antonio=20Gonz=C3=A1lez=20Viegas?= Date: Wed, 22 May 2024 20:49:00 +0200 Subject: [PATCH] fix: improve ortho camera aspect update --- packages/core/package.json | 2 +- .../core/OrthoPerspectiveCamera/example.ts | 7 ++- .../src/core/OrthoPerspectiveCamera/index.ts | 45 ++++++++++--------- packages/front/package.json | 4 +- yarn.lock | 8 ++-- 5 files changed, 37 insertions(+), 29 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index d6a79b5ad..abf2bcc6b 100644 --- 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 index 0adf69cd9..4c3ab57d5 100644 --- 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 index 94dea4c13..282ea81ad 100644 --- 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(); + 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 index 696d8590f..32c86efb8 100644 --- 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 index 1a20bd967..f6e3cebd6 100644 --- 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