CODEWITHSUNDEEP
three.js
bstst
bstst

Reputation: 519

Three.js OrbitControls panning and scene rotation

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.

Upvotes: 4

Views: 2215

Answers (1)

ScieCode
ScieCode

Reputation: 1735

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

Upvotes: 5

Related Questions