TrackballCamera

Resources
, , ,
1

Hello!!

After looking at the trackball controls class and spending too much time testing different options, I discovered that If you pass the same rotation quaternion to the position and to the camera up, the camera will rotate on the given axis without correcting the upside-down position and looking at the subject you want as the trackball controls do.

Here you have the code that I used and hope someone finds it useful as well!

const rotationQuaternion = new THREE.Quaternion();
  const rotationVector = new THREE.Vector3(1, 0, 0);
  const rotationSpeed = 0.0007;
  const rotation = rotationQuaternion.setFromAxisAngle(
    rotationVector,
    rotationSpeed
  );

draw() {
    camera.position.applyQuaternion(rotation);
    camera.up.applyQuaternion(rotation);
    camera.lookAt(mesh.position);
}

Here is the working fiddle:
https://jsfiddle.net/c34q92jr/2/

1 Like