Three.JS: First time Orthographic Camera is rendered, her view is broken

154 Views Asked by At

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.

0

There are 0 best solutions below