Three.js OrbitControls panning and scene rotation

3
votes

I need to rotate the environment. And since three.js does not support cube env rotation, I'm going the simplest way and modifying scene.rotation.y, as suggested by three.js contributors everywhere.

It all works fine until the camera is panned. Try it for yourself here https://stackblitz.com/edit/threejs-env-rotate and observe the camera wobble when the scene is rotated using the slider.

How do I remedy the wobble? I seem to be unable to find the algorithm that would solve this. I tried rotating the controls.target, but maybe my 3D math is off.

1
three.js
I looked at your demo, but I don't see the camera wobble you're talking about. Did you update the demo after posting it here? – Marquizzo

1 Answers

4
votes

The behavior you are experiencing happens because controls.target is not influenced by scene.rotation, so the wobbling happens due to the camera trying to follow the specified target. This means you should also apply the same rotation to controls.target.

But this is not sufficient. When you attach the camera straight to the scene under the influence of transformation, the camera's matrix changes, but position, rotation and scale don't. Which makes it so the behavior of OrbitControls further deviates from what's expected.

My suggested solution is for you is to avoid attaching the camera to the scene and, instead, rotate the camera's position and control's target alongside with the scene.

const radians = e.target.value * Math.PI / 180
controls.target.applyAxisAngle( camera.up, radians - scene.rotation.y )
camera.position.applyAxisAngle( camera.up, radians - scene.rotation.y )
scene.rotation.y = radians

Live Example - JSFiddle