In my game, there is a square level where a ball can roll around. I am trying to adjust the camera position so that it follows the ball but always looks at 0, 0, 0. Moving the camera x and z towards the ball's position gets me close, but as seen in the animation below (apologies for any motion sickness):
https://i.sstatic.net/6hdEQ.gif
When I use
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) )y axis, giving the illusion of the level rotating.
My goal is to move the camera to focus on 0, 0, 0 without the camera roll effect. I want the bottom edge of the level to remain parallel with the bottom edge of the screen as the camera moves. Is this achievable? I find it challenging to visualize.
I have created a CodePen demo to demonstrate the issue. I have extracted the lookAt function into a separate function so that I can modify the quaternion after it is returned:
function lookAtVector( sourcePoint, destPoint ) {Basically, I manually rotate and position the camera as follows:
var cameraPosition = new THREE.Vector3(
radius * Math.sin( Date.now() * speed ),
radius * Math.cos( Date.now() * speed ),
5
);
var lookAtQuaternion = lookAtVector(
cameraPosition,
new THREE.Vector3( 0, 0 ,0 )
);
camera.position.copy( cameraPosition );
camera.quaternion.copy( lookAtQuaternion );
How can I adjust the camera quaternion to eliminate this rolling effect while still looking at 0, 0, 0? I have attempted:
I have tried setting the
x,y,z, andwfields of the quaternion to different values to prevent rotation, but the outcome is unexpected and I haven't found a combination that works.I have also tried setting the camera up vector manually (
) as suggested in this question, but results remain the same.camera.up = new THREE.Vector3(0,0,1);
Edit: Essentially, I aim to remove the camera roll similar to traditional 3D software cameras and Three.js OrbitControls. The perspective from the bottom left and bottom right edges should resemble:
https://i.sstatic.net/NVJj3.png https://i.sstatic.net/CLRr4.png
Observe how the camera remains unrolled in these images.