Skip to content

Fix orthographic camera near and far parameters #743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Fix orthographic camera near and far parameters #743

Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
812930a
Fix orthographic camera zoom
arjxn-py May 20, 2025
8b3c0aa
remove extra code
arjxn-py May 20, 2025
c9a9db3
lint
arjxn-py May 20, 2025
21e4c09
Start with camera from settings and update camera params in updateref…
arjxn-py May 20, 2025
dd6494a
lint
arjxn-py May 20, 2025
3f2cd50
Update packages/base/src/3dview/mainview.tsx
arjxn-py May 20, 2025
1bc2a74
Update packages/base/src/3dview/mainview.tsx
arjxn-py May 20, 2025
74341bb
Update camera position as well based upon reflength
arjxn-py May 23, 2025
e8a2b42
Push it to just try
arjxn-py May 23, 2025
c2f08f8
Apply suggestions from code review
arjxn-py May 28, 2025
5f39ecd
Apply suggestions from code review
arjxn-py May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 16 additions & 29 deletions packages/base/src/3dview/mainview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,7 @@ 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 { ClipSettings, ExplodedView, SplitScreenSettings } from '../types';
import { FollowIndicator } from './followindicator';
import {
BasicMesh,
Expand Down Expand Up @@ -254,28 +249,12 @@ export class MainView extends React.Component<IProps, IStates> {
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(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why we're removing the check for the current camera setting?

50,
2,
CAMERA_NEAR,
CAMERA_FAR
);
this._camera.position.set(8, 8, 8);
this._camera.up.set(0, 0, 1);

Expand Down Expand Up @@ -1075,6 +1054,8 @@ export class MainView extends React.Component<IProps, IStates> {
} else {
this._refLength = null;
}

this._updateCamera();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If possible, we shouldn't reset the camera entirely here (note we're already have some code in this method that updates some camera parameters).
Instead, we should only set the new near and far if it's an orthographic camera.

}

private async _objToMesh(
Expand Down Expand Up @@ -1756,11 +1737,17 @@ export class MainView extends React.Component<IProps, IStates> {
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();
Expand Down
Loading