如何在three.js中为相机设置动画以查看对象? [英] How to animate the camera in three.js to look at an object?

问题描述

在 Three.js 中，我想让相机看着场景中的一个对象，当我点击另一个对象时，让相机平滑旋转以查看新对象.(即为相机的旋转设置动画).

In Three.js, I would like to have the camera looking at an object in the scene, and when I click on another object, to have the camera rotate smoothly to look at the new object. (i.e animate the rotation of the camera).

我已经检查过，这是最相似的问题:

I´ve checked in SO and this is the most similar question :

Three.js 如何使用四元数旋转相机

我也试过修改这个网站中的代码，我设法得到了一些东西像这样http://jsfiddle.net/F7Bh3/

I've also tried modifying the code in this website and I manage to get something like this http://jsfiddle.net/F7Bh3/

 var quat0 = mesh2.quaternion;
 var eye = mesh2.position;
 var center = mesh.position;
 var mat = new THREE.Matrix4();
 mat.lookAt(center, eye, new THREE.Vector3(0,1,0));
 var quat1 = new THREE.Quaternion();
 quat1.setFromRotationMatrix( mat );

 var qm = new THREE.Quaternion();

 deltaTheta = angleBetweenQuats(quat0,quat1);
 var frac =  0.2/deltaTheta;
 if (frac>1)  frac=1;

 mesh2.quaternion.slerp(quat1,frac);
 mesh2.quaternion.normalize();

但是当我尝试旋转相机而不是对象时，我得到的只是:http://jsfiddle.net/5Peq9/1/

But when I try to rotate the camera instead of the object all I get is: http://jsfiddle.net/5Peq9/1/

我错过了什么?提前致谢

What am I missing? Thanks in advance

推荐答案

我设法使用四元数在three.js 中平滑地为相机设置动画.我花了一段时间才弄明白，但一旦完成，就可以看到四元数是多么美妙.

I managed to animate a camera smoothly in three.js using quaternions. It took me a while to figure it out, but once it is done it is beautiful to watch how nicely quaternions work.

方法是:

• 存储初始四元数
• 定义目标四元数
• 介于 0 到 1 之间
• 在补间期间的每一帧上插入四元数
• 在每一帧上将内插四元数应用回相机

以及代码关键部分的快速示例:

And a quick example with the key parts of the code:

var camera       // camera
var cameraPos0   // initial camera position
var cameraUp0    // initial camera up
var cameraZoom   // camera zoom
var iniQ         // initial quaternion
var endQ         // target quaternion
var curQ         // temp quaternion during slerp
var vec3         // generic vector object
var tweenValue   // tweenable value 

// init camera
function setup()
{
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000)
    camera.position = new THREE.Vector3(0, 0, 80)
    cameraPos0 = camera.position.clone()
    cameraUp0 = camera.up.clone()
    cameraZoom = camera.position.z
}

// set a new target for the camera
function moveCamera(euler, zoom)
{
    // reset everything
    endQ = new THREE.Quaternion()
    iniQ = new THREE.Quaternion().copy(camera.quaternion)
    curQ = new THREE.Quaternion()
    vec3 = new THREE.Vector3()
    tweenValue = 0

    endQ.setFromEuler(euler)
    TweenLite.to(this, 5, { tweenValue:1, cameraZoom:zoom, onUpdate:onSlerpUpdate })
}

// on every update of the tween
function onSlerpUpdate()
{
    // interpolate quaternions with the current tween value
    THREE.Quaternion.slerp(iniQ, endQ, curQ, tweenObj.value)

    // apply new quaternion to camera position
    vec3.x = cameraPos0.x
    vec3.y = cameraPos0.y
    vec3.z = cameraZoom
    vec3.applyQuaternion(curQ)
    camera.position.copy(vec3)

    // apply new quaternion to camera up
    vec3 = cameraUp0.clone()
    vec3.applyQuaternion(curQ)
    camera.up.copy(vec3)
}

最后一步是找到要传递给moveCamera的目标欧拉旋转.就我而言，我使用 TrackballControls 来查找一些有趣的相机位置/旋转，然后使用 euler = camera.rotation.clone() 检索它们并将其作为目标传递.例如:

The last step is to find the target Euler rotation to pass to moveCamera. In my case I was using TrackballControls to find some interesting camera positions/rotations, then retrieving them with euler = camera.rotation.clone() and passing that as a target. For example:

 moveCamera(new THREE.Euler(2.20, -0.15, 0.55), 120)

可以在此处查看此方法的应用:http://brunoimbrizi.com/experiments/#/08

An application of this method can be seen here: http://brunoimbrizi.com/experiments/#/08

这篇关于如何在three.js中为相机设置动画以查看对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！