Problem about rotation in orbitControls and camera up property

Questions
, , ,
1

Description:
I encountered a problem with the rotation behavior of orbitControls.

When instantiating orbitControls without setting the camera’s “up” property correctly, the rotation behaves incorrectly (the camera rotates in a wavy pattern when the mouse moves horizontally). Even if I update the orbit and camera information after instantiation, the rotation remains incorrect.

However, if I set the camera’s “up” property before instantiating orbitControls, the rotation behaves correctly.

The only difference is the order of instantiation of orbitControls and setting the camera’s “up” property. I’m confused because updating the camera’s “up” property and calling the orbit’s update method does not make orbit work correctly.

Code example:

// Incorrect rotation
// .......
const cam = new THREE.OrthographicCamera(0, width, 0, height, -1, 2000)

const orbit = new THREE.OrbitControls(cam, $container)
orbit.enablePan = false
orbit.enableRotate = true
orbit.rotateSpeed = 0.2
orbit.maxPolarAngle = Math.PI / 2
orbit.minPolarAngle = Math.PI * 0.2

// Update part
cam.up.set(0, 0, 1)
cam.position = new THREE.Vector3(1, 1, 1)
cam.lookAt(new THREE.Vector3(0, 0, 0))
cam.updateProjectionMatrix()
cam.updateMatrixWorld()

orbit.target = new THREE.Vector3(0, 0, 0)
orbit.update()
//......


// Correct rotation
// .......
const cam = new THREE.OrthographicCamera(0, width, 0, height, -1, 2000)
cam.position.set(0, 0, 0)

// Set the "up" property before instantiating THREE.OrbitControls
cam.up.set(0, 0, 1)

cam.updateProjectionMatrix()
cam.updateMatrixWorld()

const orbit = new THREE.OrbitControls(cam, $container)
orbit.enablePan = false
orbit.enableRotate = true
orbit.rotateSpeed = 0.2
orbit.maxPolarAngle = Math.PI / 2
orbit.minPolarAngle = Math.PI * 0.2

In my scenario, I have a component called “perspective view” that needs to bind to different objects at different times. This requires continuously updating the orbitControls’ target and the camera’s position, and potentially updating the camera’s “up” property. If updating the camera’s “up” property does not correctly update the orbit, my component cannot function correctly.

I would appreciate any insights or solutions to this issue.

I am a Chinese developer, and the translation provided is generated by ChatGPT. I apologize if there are any inaccuracies or inappropriate expressions.