如何使用三个 JS 为 Camera.lookAt 设置动画 [英] How To Animate Camera.lookAt using Three JS
问题描述
我有一个场景,它渲染了一个包含多个对象的板.单击其中一个对象并通过使用对象拾取,我可以获取对象并设置摄像机位置的动画,使其位于对象的头顶"视图中.然后使用camera.lookAt方法我可以强制相机直接看对象.
I have a scene which renders a board with several objects. Clicking on one of the objects and by use of object picking I can get the object and animate the cameras position to sit in an 'overhead' view of the object. Then using the camera.lookAt method I can force the camera to look directly at the object.
在 onUpdate 方法中调用 camera.lookAt 时,我注意到动画开始时的快速跳转,因为它最初有很大的旋转距离以查看所选对象.相比之下,对 camera.lookAt 的每次后续调用都很小,而且动画效果很好.
I am noticing a quick jump at the start of my animation when calling camera.lookAt within the onUpdate method as it initially has a large distance to rotate to look at the object selected. Each subsequent call to camera.lookAt is tiny in comparison and is animated nicely.
// Position the camera to fit
var tween = new TWEEN.Tween(camera.position).to({
x: selectedObject.position.x,
y: selectedObject.position.y,
z: 1
}).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function() {
camera.lookAt(selectedObject.position);
}).onComplete(function() {
camera.lookAt(selectedObject.position);
}).start();
有没有办法为方法设置动画,或者我是否必须手动转换相机的矩阵值才能查看我选择的对象?
Is there any way to animate the method or will I have to manually transform the matrix values of the camera to look at my selected object?
这是一个带有示例的小提琴.它使用 WebGLRenderer,因此请使用合适的浏览器.
Here is a fiddle with an example. It uses WebGLRenderer so please use a suitable browser.
http://jsfiddle.net/fungus1487/SMLwa/
感谢您的帮助.
推荐答案
您可以做的一件事是在相机位置和相机目标(您必须定义)之间进行调整.
One thing you can do is tween both the camera position and the camera target (which you have to define).
var tween = new TWEEN.Tween( camera.position )
.to( {
x: selectedObject.position.x,
y: selectedObject.position.y,
z: 1
} )
.easing( TWEEN.Easing.Linear.None ).onUpdate( function () {
camera.lookAt( camera.target );
} )
.onComplete( function () {
camera.lookAt( selectedObject.position );
} )
.start();
var tween = new TWEEN.Tween( camera.target )
.to( {
x: selectedObject.position.x,
y: selectedObject.position.y,
z: 0
} )
.easing( TWEEN.Easing.Linear.None )
.onUpdate( function () {
} )
.onComplete( function () {
camera.lookAt( selectedObject.position );
} )
.start();
这有点棘手,因为补间需要完全同时运行,而它们不...这就是在第二个补间中调用 camera.lookAt() 的原因.
It's a little tricky, because the tween's need to run exactly concurrently, and they don't... This is the reason for the camera.lookAt() call in the second tween.
这篇关于如何使用三个 JS 为 Camera.lookAt 设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!