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.

Vesuvianite

I dont understand what you mean with point 1. You don't want the camera orientation to change? you explicitly tell it to with the line camera.lookAt(look_at_position); in function ShowAll() – Denim

I've experimented a bit, but haven't come to any conclusions yet. I agree that the behaviour is strange. Maybe I just don't understand the code fully yet, but do you even need to call _reset_controls_after_camera_movement() in SetTopView()? seems to work fine after removing that line. Also found an open bug report regarding the reset() method of OrthographicTrackballControls. Maybe this could be causing the strange behaviour... – Denim

@Denim in point 1, what I mean is the following. With the SHOW ALL button I want to center the object to the screen, whatever its current orientation. With my code, the cube is "rotated" after pressing that button (when I do it as described in point 1). To be more exact, the camera is rotated, not the cube. – Vesuvianite

@Rabbid76 your solution adjusts the cube to the screen with the SHOW ALL button, but it always have the same orientation. That is not what I am looking for. I would like to adjust the cube to the screen, but preserving the orientation given by the user with the controls. I mean, to move and zoom it to center it in the screen, but with no rotation. – Vesuvianite

I could not reproduce #3 of the "three strange things" while using the Chrome browser. What browser did you use to view the vibrating objects? – Herc

I am using Google Chrome version 59.0.3071.115. – Vesuvianite

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

Denim

Amazing! Thank you so much! – Vesuvianite