Camera takes a while to get into the position it is assigned to when scene is loaded

Questions
,
1

Hi all. I do have a project that enables or disables the Three canvas at the users will, with the ability to place GLB on that canvas either outside or inside of the ‘3D mode’.

I’m implementing a functionality so the camera position gets saved whenever the user activates the canvas again. The camera uses OrbitControls. I’m saving the camera position, camera rotation.

The problem I’m finding is that whenever the user places a GLB on the scene outside of the 3D mode and then activates the 3D mode, the camera weirdly gets placed on position (0,0) for half a second. If no GLB is placed before turning to 3D, the camera is just placed on its position from the very begining.

Relevant code:

let cacheCameraPosition = null;
let cacheCameraRotation = null;
let cacheControllerTarget = null;

componentDidmount() {
    if ( cacheCameraPosition instanceof Vector3 ) {
      const { x: x_p, y: y_p, z: z_p } = cacheCameraPosition;
      const { x: x_r, y: y_r, z: z_r } = cacheCameraRotation;

      this.camera.position.set( x_p, y_p, z_p );
      this.camera.rotation.set( x_r, y_r, z_r );

    } else {
      const initialPositionX = - ( planData.boundingBox.max.x - planData.boundingBox.min.x ) / 150;
      const initialPositionY = ( planData.boundingBox.max.y - planData.boundingBox.min.y ) * 10;
      const initialPositionZ = ( planData.boundingBox.max.z - planData.boundingBox.min.z ) / 11;

      this.camera.position.set( initialPositionX, initialPositionY, initialPositionZ );
      this.camera.up = new THREE.Vector3( 0, 1, 0 );

    }

    scene.add( this.camera );
}

componentWillUnmount(){
       cacheCameraPosition = new Vector3();
    cacheCameraRotation = new Vector3();
    cacheControllerTarget = new Vector3();

    cacheCameraPosition.set(
      this.camera.position.x,
      this.camera.position.y,
      this.camera.position.z
    );

    cacheCameraRotation.set(
      this.camera.rotation.x,
      this.camera.rotation.y,
      this.camera.rotation.z,
    );

}
2

Could be that the half a second delay is the time required for the GLTF model to load.

3

Is there any chance to optimize the GLB so it does not take as long?

4

Probably, depends on your model and how you load it.

There is most likely a way to make the camera behavior independent of the loading process (if that’s what’s causing the delay) or to wait till the model is loaded before the rendering.

It’ll be easier to tell, if you provide a minimal live working example of your code, that includes the loading process and the camera positioning.

5

Thank you very much for the response :smile: I will work on a working live example so I can explain my issue on a better manner. Will look for ways to add the camera after everything is loaded