Blender style orbit controls - Unrestricted movement along the spherical longitude

Questions
, ,
1

Hi,

I am trying to build a blender style orbit controller. Here is the code.

// Initialization
const offset = new Vector3();
let quat = new Quaternion();
let quatInverse = new Quaternion();
const v = new Vector3(0,0,0);
const spherical = new Spherical();
const sphericalD = new Spherical();
const cameraLookAt = new Vector3(0,0,0);

// Render

const speed = 5;
let updateController = false;

if (keyPressed["ArrowLeft"]) {
  sphericalD.theta -= (2 * Math.PI * speed) / domElement.clientHeight;
  updateController = true;
}

if (keyPressed["ArrowRight"]) {
  sphericalD.theta += (2 * Math.PI * speed) / domElement.clientHeight;
  updateController = true;
}

if (keyPressed["ArrowUp"]) {
  sphericalD.phi -= (2 * Math.PI * speed * 0.5) / domElement.clientHeight;
  updateController = true;
}

if (keyPressed["ArrowDown"]) {
  sphericalD.phi += (2 * Math.PI * speed * 0.5) / domElement.clientHeight;
  updateController = true;
}

if (updateController) {
  offset.copy(camera.position).sub(cameraLookAt);
  quat.setFromUnitVectors(camera.up, v);
  offset.applyQuaternion(quat);
  quatInverse = quat.invert();
  spherical.setFromVector3(offset);
  spherical.theta += sphericalD.theta;
  spherical.phi += sphericalD.phi;

  spherical.phi = Math.max(-Math.PI, Math.min(Math.PI, spherical.phi));
  spherical.makeSafe();

  offset.setFromSpherical(spherical);
  offset.applyQuaternion(quatInverse);
  camera.position.copy(cameraLookAt).add(offset);

  updateController = false;
  sphericalD.theta = 0;
  sphericalD.phi = 0;
}

camera.lookAt(cameraLookAt);

I do get unrestricted camera movement along the latitude of the spherical, but the longitudinal movement is restricted just to the poles.

Here is the sandbox.

Can someone help me with unrestricted movement along longitude.

2

It seems your live example does not work for me. No interaction is possible with the scene.

Have you considered to just use misc_controls_trackball?

3

Please use the arrow keys on the keyboard

4

Oh, I’ve forgot to click on the canvas.

In any event, I suggest you study how TrackballControls transforms the camera. It should be useful for your scenario, too.

5

@Mugen87 Thanks for the suggestion!