CODEWITHSUNDEEP
three.js
pythonjsgeo
pythonjsgeo

Reputation: 5411

three.js Orbit camera control plus roll (like Blender)

Orbit controls are great, but they have the limitation that the Y axis always points UP on the screen.

I want to add a "roll" to the camera and retain it while orbiting. If I change the camera.up vector it will add a roll but as I orbit around the object the appearance of the roll vector changes. e.g. If it starts tilted to the left on the screen, when I orbit around to the other side the camera.up is unchanged, but it now tilts to the right on the screen.

I noticed this is exactly how the camera works in Blender, per screenshot.

enter image description here

Any idea how to achieve this in threejs?

(Bonus points: In Blender the orbit control is also able to continue orbiting smoothly over the top of the sphere, whereas the orbit control in three.js gets stuck at the top of the sphere. It would be great to know that too)

Upvotes: 2

Views: 1595

Answers (2)

WestLangley
WestLangley

Reputation: 104783

You can use OrbitControls and "tilt" the camera using a pattern like so:

var tilt = Math.PI / 8;
camera.rotation.order = 'YXZ';

In your animation loop, do this:

controls.update();
camera.rotation.z = tilt;

This works because, with rotation.order set to YXZ, the camera orientation, as set by OrbitControls, has camera.rotation.z = 0. So in this case, there is no harm in changing it.

fiddle: http://jsfiddle.net/ar5rfydj/

three.js r.86

Upvotes: 1

Falk Thiele
Falk Thiele

Reputation: 4494

TrackballControls for threejs does what you want: Y-Axis not always UP and you can orbit over the top.

This is the official example: https://threejs.org/examples/?q=trackbal#misc_controls_trackball

Upvotes: 2

Related Questions