I'm working on an Angular project that uses the Three.js library to render 3D scenes. I switch between perspective and orthographic cameras depending on user actions. However, I'm having a problem with the initial rendering of the orthographic camera: its view is very far from the scene, and I can't see anything.
The strange thing is that if I zoom in (using the mouse wheel, for example), the camera suddenly shows the scene correctly, and I can navigate normally. I've checked the camera's location and its look-at vector, and everything seems to be in order.
This is how I declare both cameras:
private setUpCamera() {
const aspect = window.innerWidth / window.innerHeight;
this.perspectiveCamera = new THREE.PerspectiveCamera(
45,
aspect,
1,
10000
);
this.orthoCamera = new THREE.OrthographicCamera(
-600 * aspect,
600 * aspect,
600,
-600,
0.01,
2000
);
this.orthoCamera.name = 'ortho';
this.orthoCamera.position.set(3, 1.5, -3);
this.orthoCamera.lookAt(0, 0, 0);
this.perspectiveCamera .position.set(3, 1.5, -3);
this.perspectiveCamera .lookAt(0, 0, 0);
this.activeCamera = this.perspectiveCamera as PerspectiveCamera;
}
Any help would be appreciated. Thank you!
I've checked the camera's position and its look-at vector, and they seem to be correct. I've also tried changing the near and far values when creating the camera, but it doesn't seem to affect the initial view.
I suspect that the problem may have to do with the way the camera is initialized and rendered, but I'm not sure what to look for.