Use orbit controls to rotate perpendicular to the screen

Questions
1

I’m using the orbit controls which are great, is there any way to make it rotate perpendicular to the screen? This would not be about a particular set axis, but in the direction you are looking…imagine physically rotating your monitor.

I would perhaps call it a roll, though not sure if that’s technically correct, if anyone could point me in the right direction I would appreciate it.

2

OrbitControls is made to maintain the Camera up direction always pointing up, that is the Camera up direction always points as close to the vector (0, 1, 0) as possible: just like in real life we normally keep the camera parallel to the horizon and we rarely roll it.
If you want the Camera to roll (rotate along the axis it looks to) you need to change the up direction of the camera.
You may define a variable ‘roll’ that takes values from
-Math.PI to Math.PI and then use something like this to change the camera up direction:

camera.up.set ( 0, Math.cos ( roll ) , Math.sin ( roll ) );
controls.update ( ) ;

I remember I tried it once, don’t know if there are other solutions.

Edit: My code is just an example,
you may need to set the up direction in a circle perpendicular to the direction the camera looks to.

1 Like
3

More precicely,

// y direction
var yDir = new THREE.Vector3 ( 0, 1, 0 );

// direction camera is looking to
var looksTo = new THREE.Vector3 ( ) ;
camera.getWorldDirection ( looksTo  ) ;

// direction perpendicular to both yDir and looksTo
var b = new THREE.Vector3 ( ) ;
b.crossVectors ( yDir, looksTo ).normalize();

// direction perpendicular to both looksTo and b
var n = new THREE.Vector3 ( ) ;
n.crossVectors ( looksTo, b ).normalize();

// make a circle in the plane with vectors b and n
n.multiplyScalar( Math.cos(roll) ).add( b.multiplyScalar( Math.sin(roll) ) );

// set camera up
camera.up.set ( n.x , n.y, n.z );
controls.update ( ) ;

I wrote the code here, there could be some adjustments to do.

Edit: ok, I tested it now and it works.

1 Like
4

Wow thanks a lot for your detailed response. I was hoping to not have to set the camera up, but your explanation makes sense.Thanks for taking the time to respond, I’ll give it a go.