From 812930aef6800d6ff583d9e73a16cc8f39a7d8e1 Mon Sep 17 00:00:00 2001 From: arjxn-py Date: Tue, 20 May 2025 14:35:59 +0530 Subject: [PATCH 01/11] Fix orthographic camera zoom --- packages/base/src/3dview/mainview.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index 5c708eb4..0062da9f 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -1075,6 +1075,8 @@ export class MainView extends React.Component { } else { this._refLength = null; } + + this._updateCamera(); } private async _objToMesh( @@ -1756,11 +1758,17 @@ export class MainView extends React.Component { const distance = position.distanceTo(target); const zoomFactor = 1000 / distance; + const refLength = this._refLength ?? 1000; // Fallback value if undefined + const near = Math.max(refLength / 20, 0.01); + const far = refLength * 20; + this._camera = new THREE.OrthographicCamera( width / -2, width / 2, height / 2, - height / -2 + height / -2, + near, + far ); this._camera.zoom = zoomFactor; this._camera.updateProjectionMatrix(); From 8b3c0aae4cfa8f896b9717b8838b22254d61be9d Mon Sep 17 00:00:00 2001 From: arjxn-py Date: Tue, 20 May 2025 14:40:19 +0530 Subject: [PATCH 02/11] remove extra code --- packages/base/src/3dview/mainview.tsx | 29 ++++++--------------------- 1 file changed, 6 insertions(+), 23 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index 0062da9f..be187f28 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -26,7 +26,6 @@ import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'; import { FloatingAnnotation } from '../annotation'; import { getCSSVariableColor, throttle } from '../tools'; import { - CameraSettings, ClipSettings, ExplodedView, SplitScreenSettings @@ -254,28 +253,12 @@ export class MainView extends React.Component { SPLITVIEW_BACKGROUND_COLOR.set( getCSSVariableColor(SPLITVIEW_BACKGROUND_COLOR_CSS) ); - if (this._mainViewModel.viewSettings.cameraSettings) { - const cameraSettings = this._mainViewModel.viewSettings - .cameraSettings as CameraSettings; - if (cameraSettings.type === 'Perspective') { - this._camera = new THREE.PerspectiveCamera( - 50, - 2, - CAMERA_NEAR, - CAMERA_FAR - ); - } else if (cameraSettings.type === 'Orthographic') { - const width = this._divRef.current?.clientWidth || 0; - const height = this._divRef.current?.clientHeight || 0; - this._camera = new THREE.OrthographicCamera( - width / -2, - width / 2, - height / 2, - height / -2 - ); - this._camera.updateProjectionMatrix(); - } - } + this._camera = new THREE.PerspectiveCamera( + 50, + 2, + CAMERA_NEAR, + CAMERA_FAR + ); this._camera.position.set(8, 8, 8); this._camera.up.set(0, 0, 1); From c9a9db376c18df5c6a9565dfaed9a3e90ab07228 Mon Sep 17 00:00:00 2001 From: arjxn-py Date: Tue, 20 May 2025 14:42:17 +0530 Subject: [PATCH 03/11] lint --- packages/base/src/3dview/mainview.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index be187f28..9733aa83 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -25,11 +25,7 @@ import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'; import { FloatingAnnotation } from '../annotation'; import { getCSSVariableColor, throttle } from '../tools'; -import { - ClipSettings, - ExplodedView, - SplitScreenSettings -} from '../types'; +import { ClipSettings, ExplodedView, SplitScreenSettings } from '../types'; import { FollowIndicator } from './followindicator'; import { BasicMesh, @@ -1744,7 +1740,7 @@ export class MainView extends React.Component { const refLength = this._refLength ?? 1000; // Fallback value if undefined const near = Math.max(refLength / 20, 0.01); const far = refLength * 20; - + this._camera = new THREE.OrthographicCamera( width / -2, width / 2, From 21e4c09b0f9c06a0e1ce9aa4f2e30443e1f73c5e Mon Sep 17 00:00:00 2001 From: arjxn-py Date: Tue, 20 May 2025 16:36:04 +0530 Subject: [PATCH 04/11] Start with camera from settings and update camera params in updatereflength --- packages/base/src/3dview/mainview.tsx | 51 ++++++++++++++++++++++----- 1 file changed, 42 insertions(+), 9 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index 9733aa83..81272e80 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -25,7 +25,7 @@ import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'; import { FloatingAnnotation } from '../annotation'; import { getCSSVariableColor, throttle } from '../tools'; -import { ClipSettings, ExplodedView, SplitScreenSettings } from '../types'; +import { CameraSettings, ClipSettings, ExplodedView, SplitScreenSettings } from '../types'; import { FollowIndicator } from './followindicator'; import { BasicMesh, @@ -249,12 +249,28 @@ export class MainView extends React.Component { SPLITVIEW_BACKGROUND_COLOR.set( getCSSVariableColor(SPLITVIEW_BACKGROUND_COLOR_CSS) ); - this._camera = new THREE.PerspectiveCamera( - 50, - 2, - CAMERA_NEAR, - CAMERA_FAR - ); + if (this._mainViewModel.viewSettings.cameraSettings) { + const cameraSettings = this._mainViewModel.viewSettings + .cameraSettings as CameraSettings; + if (cameraSettings.type === 'Perspective') { + this._camera = new THREE.PerspectiveCamera( + 50, + 2, + CAMERA_NEAR, + CAMERA_FAR + ); + } else if (cameraSettings.type === 'Orthographic') { + const width = this._divRef.current?.clientWidth || 0; + const height = this._divRef.current?.clientHeight || 0; + this._camera = new THREE.OrthographicCamera( + width / -2, + width / 2, + height / 2, + height / -2 + ); + this._camera.updateProjectionMatrix(); + } + } this._camera.position.set(8, 8, 8); this._camera.up.set(0, 0, 1); @@ -1044,6 +1060,25 @@ export class MainView extends React.Component { ); } + // Update near and far for orthographic camera if applicable + if ( + this._camera instanceof THREE.OrthographicCamera + ) { + const near = Math.max(this._refLength / 20, 0.01); + const far = this._refLength * 20; + + const distance = this._camera.position.distanceTo(this._controls.target); + const zoomFactor = 1000 / distance; + this._camera.zoom = zoomFactor; + + console.log(near, far); + + + this._camera.near = near; + this._camera.far = far; + this._camera.updateProjectionMatrix(); + } + // Update clip plane size this._clippingPlaneMeshControl.geometry = new THREE.PlaneGeometry( this._refLength * 10, @@ -1054,8 +1089,6 @@ export class MainView extends React.Component { } else { this._refLength = null; } - - this._updateCamera(); } private async _objToMesh( From dd6494a77f85e3ee800472010eafb14e391bcf91 Mon Sep 17 00:00:00 2001 From: arjxn-py Date: Tue, 20 May 2025 16:36:10 +0530 Subject: [PATCH 05/11] lint --- packages/base/src/3dview/mainview.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index 81272e80..d96c6899 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -25,7 +25,12 @@ import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'; import { FloatingAnnotation } from '../annotation'; import { getCSSVariableColor, throttle } from '../tools'; -import { CameraSettings, ClipSettings, ExplodedView, SplitScreenSettings } from '../types'; +import { + CameraSettings, + ClipSettings, + ExplodedView, + SplitScreenSettings +} from '../types'; import { FollowIndicator } from './followindicator'; import { BasicMesh, @@ -1061,18 +1066,17 @@ export class MainView extends React.Component { } // Update near and far for orthographic camera if applicable - if ( - this._camera instanceof THREE.OrthographicCamera - ) { + if (this._camera instanceof THREE.OrthographicCamera) { const near = Math.max(this._refLength / 20, 0.01); const far = this._refLength * 20; - const distance = this._camera.position.distanceTo(this._controls.target); + const distance = this._camera.position.distanceTo( + this._controls.target + ); const zoomFactor = 1000 / distance; this._camera.zoom = zoomFactor; console.log(near, far); - this._camera.near = near; this._camera.far = far; From 3f2cd50ef3c173217e5267acec725fdab395d7ed Mon Sep 17 00:00:00 2001 From: Arjun Verma Date: Tue, 20 May 2025 17:42:13 +0530 Subject: [PATCH 06/11] Update packages/base/src/3dview/mainview.tsx Co-authored-by: martinRenou --- packages/base/src/3dview/mainview.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index d96c6899..ca0c160e 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -1074,7 +1074,9 @@ export class MainView extends React.Component { this._controls.target ); const zoomFactor = 1000 / distance; - this._camera.zoom = zoomFactor; + if (updateCamera) { + this._camera.zoom = zoomFactor; + } console.log(near, far); From 1bc2a74ec6bdb9d0573dc16e696ecd555e3d04ce Mon Sep 17 00:00:00 2001 From: Arjun Verma Date: Tue, 20 May 2025 21:11:58 +0530 Subject: [PATCH 07/11] Update packages/base/src/3dview/mainview.tsx --- packages/base/src/3dview/mainview.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index ca0c160e..ce8cfd8c 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -1078,8 +1078,6 @@ export class MainView extends React.Component { this._camera.zoom = zoomFactor; } - console.log(near, far); - this._camera.near = near; this._camera.far = far; this._camera.updateProjectionMatrix(); From 74341bb2fdbb97c50fd627d477ffc796254acd28 Mon Sep 17 00:00:00 2001 From: arjxn-py Date: Fri, 23 May 2025 15:13:45 +0530 Subject: [PATCH 08/11] Update camera position as well based upon reflength --- packages/base/src/3dview/mainview.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index ce8cfd8c..2754a1b6 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -1078,6 +1078,12 @@ export class MainView extends React.Component { this._camera.zoom = zoomFactor; } + this._camera.position.set( + 10 * this._refLength, + 10 * this._refLength, + 10 * this._refLength + ); + this._camera.near = near; this._camera.far = far; this._camera.updateProjectionMatrix(); From e8a2b4250cc856b62f5cafccda123330369990d6 Mon Sep 17 00:00:00 2001 From: arjxn-py Date: Fri, 23 May 2025 17:41:43 +0530 Subject: [PATCH 09/11] Push it to just try --- packages/base/src/3dview/mainview.tsx | 78 +++++++++++++++++++-------- 1 file changed, 55 insertions(+), 23 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index 2754a1b6..28c650e9 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -1065,10 +1065,35 @@ export class MainView extends React.Component { ); } - // Update near and far for orthographic camera if applicable if (this._camera instanceof THREE.OrthographicCamera) { - const near = Math.max(this._refLength / 20, 0.01); - const far = this._refLength * 20; + const boundingSphere = new THREE.Sphere(); + this._boundingGroup.getBoundingSphere(boundingSphere); + const center = boundingSphere.center; + const radius = boundingSphere.radius; + + const aspect = + this._renderer.domElement.clientWidth / + this._renderer.domElement.clientHeight; + const frustumSize = radius * 2; + + // Position the camera at an angle away from the center + const offset = radius * 2; + this._camera.position.set( + center.x + offset, + center.y + offset, + center.z + offset + ); + this._camera.lookAt(center); + + // Update orthographic frustum + this._camera.left = (-frustumSize * aspect) / 2; + this._camera.right = (frustumSize * aspect) / 2; + this._camera.top = frustumSize / 2; + this._camera.bottom = -frustumSize / 2; + + // Set near/far conservatively + this._camera.near = 0.01; + this._camera.far = offset * 5; const distance = this._camera.position.distanceTo( this._controls.target @@ -1077,15 +1102,6 @@ export class MainView extends React.Component { if (updateCamera) { this._camera.zoom = zoomFactor; } - - this._camera.position.set( - 10 * this._refLength, - 10 * this._refLength, - 10 * this._refLength - ); - - this._camera.near = near; - this._camera.far = far; this._camera.updateProjectionMatrix(); } @@ -1776,24 +1792,40 @@ export class MainView extends React.Component { } else { const width = this._divRef.current?.clientWidth || 0; const height = this._divRef.current?.clientHeight || 0; - + const aspect = width / height || 1; const distance = position.distanceTo(target); const zoomFactor = 1000 / distance; - const refLength = this._refLength ?? 1000; // Fallback value if undefined - const near = Math.max(refLength / 20, 0.01); - const far = refLength * 20; + const refLength = this._refLength ?? 1000; + + // Fallback bounding sphere if _boundingGroup isn't available yet + const boundingSphere = new THREE.Sphere(); + this._boundingGroup?.getBoundingSphere(boundingSphere); + const center = boundingSphere.center; + const radius = boundingSphere.radius || refLength; + + const frustumSize = radius * 2; this._camera = new THREE.OrthographicCamera( - width / -2, - width / 2, - height / 2, - height / -2, - near, - far + (-frustumSize * aspect) / 2, + (frustumSize * aspect) / 2, + frustumSize / 2, + -frustumSize / 2, + 0.01, + radius * 10 ); - this._camera.zoom = zoomFactor; + this._camera.updateProjectionMatrix(); + + // Position and lookAt based on bounding sphere + const offset = radius * 2; + this._camera.position.set( + center.x + offset, + center.y + offset, + center.z + offset + ); + this._camera.zoom = zoomFactor; + this._camera.lookAt(center); } this._camera.add(this._cameraLight); From c2f08f821a099ab9efb0bdad83a45ec11154799f Mon Sep 17 00:00:00 2001 From: Arjun Verma Date: Wed, 28 May 2025 19:21:25 +0530 Subject: [PATCH 10/11] Apply suggestions from code review Co-authored-by: martinRenou --- packages/base/src/3dview/mainview.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index 28c650e9..5c904662 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -1078,12 +1078,6 @@ export class MainView extends React.Component { // Position the camera at an angle away from the center const offset = radius * 2; - this._camera.position.set( - center.x + offset, - center.y + offset, - center.z + offset - ); - this._camera.lookAt(center); // Update orthographic frustum this._camera.left = (-frustumSize * aspect) / 2; @@ -1092,16 +1086,9 @@ export class MainView extends React.Component { this._camera.bottom = -frustumSize / 2; // Set near/far conservatively - this._camera.near = 0.01; + this._camera.near = 0; this._camera.far = offset * 5; - const distance = this._camera.position.distanceTo( - this._controls.target - ); - const zoomFactor = 1000 / distance; - if (updateCamera) { - this._camera.zoom = zoomFactor; - } this._camera.updateProjectionMatrix(); } From 5f39ecddb1d6a5e3373818528f938efec7c5dc92 Mon Sep 17 00:00:00 2001 From: Arjun Verma Date: Wed, 28 May 2025 20:29:39 +0530 Subject: [PATCH 11/11] Apply suggestions from code review Co-authored-by: martinRenou --- packages/base/src/3dview/mainview.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index 5c904662..d9c2a664 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -1074,10 +1074,7 @@ export class MainView extends React.Component { const aspect = this._renderer.domElement.clientWidth / this._renderer.domElement.clientHeight; - const frustumSize = radius * 2; - - // Position the camera at an angle away from the center - const offset = radius * 2; + const frustumSize = radius * 200; // Update orthographic frustum this._camera.left = (-frustumSize * aspect) / 2; @@ -1087,7 +1084,7 @@ export class MainView extends React.Component { // Set near/far conservatively this._camera.near = 0; - this._camera.far = offset * 5; + this._camera.far = frustumSize; this._camera.updateProjectionMatrix(); } @@ -1798,8 +1795,8 @@ export class MainView extends React.Component { (frustumSize * aspect) / 2, frustumSize / 2, -frustumSize / 2, - 0.01, - radius * 10 + 0, + radius * 5 ); this._camera.updateProjectionMatrix();