Geek Answers Handbook

Automatic camera rotation with three colors. Focus on the subject

In the three.js three-dimensional space, I have some MESH objects for which its position and camera object are known.

What I would like to achieve is: when I click on the button, the camera automatically rotates and scales (changes its position) so that the user view focuses on the selected object. The selected item position is known.

Please give me some suggestion on how to do this?

+4
source share
3 answers

Try camera.lookAt( object.position );

You do not need to use quaternions.

Then you can move the camera closer if you want.

+2
source

Quaternion slerp is your friend for smooth rotation in the target location. You need to use quaternion (camera.useQuaternion = true).

 var newQuaternion = new THREE.Quaternion(); THREE.Quaternion.slerp(camera.quaternion, destinationQuaternion, newQuaternion, 0.07); camera.quaternion = newQuaternion;

This should smoothly rotate towards the rotation of the target. Maybe you need to play with the last parameter. I am not sure about scaling.

+1
source

Here is a snippet for rotating an object using slerp and quaternions:

 //Initial and final quaternions var startQ = new THREE.Quaternion(0,0,0,1); var endQ = new THREE.Quaternion(0,1,0,0); //Number of animation frames var animFrames = 100; //Pause between two consecutive animation frames var deltaT = 1; function goSlerping(acc) { if(acc>=1) return; //Let assume that you want to rotate a 3D object named 'mesh'. So: THREE.Quaternion.slerp(startQ, endQ, mesh.quaternion, acc); setTimeout(function() { goSlerping(acc + (1/animFrames)); }, deltaT); } goSlerping(1/animFrames);

So using the script above to rotate the camera is exactly the same: you just need to change mesh.quaternion to camera.quaternion .

+1
source

More articles:


All Articles