When working with ThreeJS, I encountered an issue with rotating the camera using a button. Here is the code snippet I used:
camera = new THREE.PerspectiveCamera(...)
function roll(angle) {
const quaternion = new THREE.Quaternion();
const lookat = this.camera.position.clone().negate().normalize();
quaternion.setFromAxisAngle(lookat, THREE.MathUtils.degToRad(angle));
camera.applyQuaternion(quaternion);
}
However, when I tried to incorporate TrackballControls alongside the camera rotation button, I faced a problem where the camera wouldn't rotate as expected. For example:
controls = new TrackballControls(...)
function animate() {
requestAnimationFrame(animate)
this.controls.update();
...
}
By commenting out this.controls.update(), I was able to rotate the camera, but it caused TrackballControls to stop functioning. Further investigation revealed that the update() method was resetting the rotation operation.
I attempted a few solutions like 1) Disabling this.controls during rotation, and 2) Destroying controls before rotating and recreating it after. Unfortunately, these methods did not resolve the issue.
Is there a solution to this problem that I'm overlooking?