three.js - really strange behaviour with camera changes

Question

I have developed a simple three.js application that renders a cube, and which have several buttons to set fixed camera positions. I have a demo of my code here: https://jsfiddle.net/ph0ropg7/9/

In my application I render a cube, and I can change to the top view (with the TOP VIEW button), and I can adjust the cube to the screen with the SHOW ALL button. However, I noticed three strange things:

• When I pan the cube and then I rotate it, if I press the SHOW ALL button, the camera orientation changes when the cube is adjusted to the screen size.

• When I set the top view with its corresponding button, the controls seems to be blocked or something like this.

• If I set the top view by clicking on the TOP VIEW button, and dragging before releasing the mouse left button, the controls seems to become crazy. The objects keeps vibrating in a very strange and annoying way.

I am very new to three.js and I cannot figure out why this three things are happening. Any help or suggestion to face any of these issues will be appreciated, thanks.

Answer 1

I looked at the OrthographicTrackballControls source and noticed that it uses the cameras lookAt method when performing a reset. The lookAt method will align the camera with its up vector. So what you need to do is remove the call to camera.lookAt(look_at_position); in your ShowAll & ShowTop functions and add controls.up0.copy(camera.up); in your _reset_controls_after_camera_movement method. The control will now have the correct up vector and can perform the lookat for you.

here's a modified fiddle