Remove inversion of y and z axes

Questions
, ,
1

I’m trying to remove camera.up.set(0, 0, 1) from an equivalent of OrbitControls.

I already got the rotation working, but I’m struggle with the pan.

The camera is positioned with spherical polar coordinates.

The function:

function updateCameraPosition() {
    // We are adding the focus because we don't consider it in the camera position.
    // Doing it, the rotation isn't around (0, 0, 0), but around the scene center.
    camera.position.set(
        // Convert the polar coordinates into absolute ones.
        radius * Math.sin(theta) * Math.cos(phi),
        radius * Math.cos(theta),
        // Swap y and z is the same as rotate the plane.
        // In the proccess of rotating the plane, we negate z.
        -radius * Math.sin(theta) * Math.sin(phi)
    ).add(focus);

    camera.lookAt(focus);
}

The code for the pan:

const cameraX = new Vector3(
    radius * Math.cos(theta) * Math.sin(phi) * (theta < 0.5 * Math.PI ? -1 : 1),
    radius * Math.cos(theta) * Math.cos(phi) * (theta < 0.5 * Math.PI ? 1 : -1),
    0
).normalize();

const cameraY = new Vector3()
    .subVectors(focus, camera.position)
    .normalize()
    .cross(cameraX);

focus.x = onMouseDownFocus.x + (radius / canvasSize) * (cameraX.x * (onMouseDownPosition.x - event.clientX) + cameraY.x * (onMouseDownPosition.y - event.clientY));
focus.y = onMouseDownFocus.y + (radius / canvasSize) * (cameraX.y * (onMouseDownPosition.x - event.clientX) + cameraY.y * (onMouseDownPosition.y - event.clientY));
focus.z = onMouseDownFocus.z + (radius / canvasSize) * (cameraY.z * (onMouseDownPosition.y - event.clientY));

updateCameraPosition();

(onMouseDownPosition is a Vector2)

This code was working before when the camera up was (0, 0, 1).

For comparison there is this example. When you press shift while clicking and moving the mouse.

Linked GitHub PR: mathics-threejs-backend#45.