Jump to content

Threejs: function to smoothly rotate a camera towards an object


Recommended Posts

Hi, i have just started to study three.js and i am having some trouble to write a function that takes as arguments an object position (Vector3) and a time in milliseconds, and gradually rotate the camera to face it in that time. Substantially a lerp version of the builtin lookAt method.


First i've tried using tweenjs to get smooth rotate transition. For the start and end parameters i've created a dummy object and set its position, rotation and quaternion the same as the camera, then i have use the lookAt function on it to face towards the object and i've stored its quaternion in a new variable "targetQuaternion". Then i have used this variable as the target parameter in the TWEEN.Tween method to update camera.quaternion. I've tried before with quaternions to avoid gymbal lock and then with rotation, but none works fine.

function rotateCameraToObject(object3D, time) {    var cameraPosition = camera.position.clone();               // camera original position    var cameraRotation = camera.rotation.clone();               // camera original rotation    var cameraQuaternion = camera.quaternion.clone();           // camera original quaternion    var dummyObject = new THREE.Object3D();                     // dummy object    // set dummyObject's position, rotation and quaternion the same as the camera    dummyObject.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);    dummyObject.rotation.set(cameraRotation.x, cameraRotation.y, cameraRotation.z);    dummyObject.quaternion.set(cameraQuaternion.x, cameraQuaternion.y, cameraQuaternion.z);    // lookAt object3D    dummyObject.lookAt(object3D);    // store its quaternion in a variable    var targetQuaternion = dummyObject.quaternion.clone();    // tween start object    var tweenStart = {        x: cameraQuaternion.x,        y: cameraQuaternion.y,        z: cameraQuaternion.z,        w: cameraQuaternion.w    };    //tween target object    var tweenTarget = {        x: targetQuaternion.x,        y: targetQuaternion.y,        z: targetQuaternion.z,        w: targetQuaternion.w    };    // tween stuff    var tween = new TWEEN.Tween(tweenStart).to(tweenTarget, time);    tween.onUpdate(function() {        camera.quaternion.x = tweenStart.x;        camera.quaternion.y = tweenStart.y;        camera.quaternion.z = tweenStart.z;        camera.quaternion.w = tweenStart.w;    });    tween.start();}

So this does not work.



I've also tried another approach, computing the angle between camera vector and object vector and use that angle as target rotation:

function rotateCameraToObject(object3D, time) {    // camera original position    var cameraPosition = camera.position.clone();        // object3D position    var objectPosition = object3D.position.clone();    // direction vector from camera towards object3D    var direction = objectPosition.sub(cameraPosition);    // compute Euler angle    var angle = new THREE.Euler();    angle.setFromVector3(direction);    /*     * tween stuff         */    var start = {        x: camera.rotation.clone().x,        y: camera.rotation.clone().y,        z: camera.rotation.clone().z,    }    var end = {        x: angle._x,        y: angle._y,        z: angle._z,    }    var tween = new TWEEN.Tween(start).to(end, time);    tween.onUpdate(function() {        camera.rotation.y = start.x;        camera.rotation.y = start.y;        camera.rotation.y = start.z;    });    tween.start();    }

This doesn't work neither, eventually camera rotate towards the object but the rotation is not right.



Any help? What is the correct way to have a lerp rotate function for the camera?


Thanks in advance!



Link to comment
Share on other sites

Hi, thank you very much for the link. So now i understand how to correctly compute the angle of rotation and the sign of the angle (clockwise or anticlockwise).


But what i still didn't get is how use that angle to make a smooth rotation of the camera in threejs, i've looked at the api but didn't find any helper function for this. There is a Quaternion.slerp function but i don't understand how to compute the target quaternion for the rotation.

Link to comment
Share on other sites

  • 2 weeks later...

simply use math 

var Orbit = function (origine, h, v, distance) {    origine = origine || new THREE.Vector3();    var p = new THREE.Vector3();    var phi = v*Math.PI / 180;    var theta = h*Math.PI / 180;    p.x = (distance * Math.sin(phi) * Math.cos(theta)) + origine.x;    p.z = (distance * Math.sin(phi) * Math.sin(theta)) + origine.z;    p.y = (distance * Math.cos(phi)) + origine.y;    return p;}
Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...