使用 Tween 为相机设置动画
Using Tween to animate a camera
我正在尝试简化相机旋转以查看图表中的选定对象。
到目前为止,我有
fourd.render_loop.push(() => TWEEN.update());
fourd.intersect_callback = function(vertex){
console.log(vertex);
var camera = fourd._internals.camera;
var start = new THREE.Euler().copy(camera.rotation);
camera.lookAt(vertex.position);
var end = new THREE.Euler().copy(camera.rotation);
camera.rotation.copy(start);
var tween = new TWEEN.Tween(camera.rotation)
.to(end, 600)
.easing(TWEEN.Easing.Quadratic.In)
.start();
};
其中 render_loop 只是在渲染循环中调用的函数集合。我不知道我错过了什么,但我收到一个错误:
THREE.Euler: .setFromRotationMatrix() 给出了不受支持的顺序:NaN
您可以补间相机的方向(或旋转),但最简单的方法是补间相机的四元数。
var dummy = new THREE.Camera(); // create these once and reuse
var qStart = new THREE.Quaternion();
var qEnd = new THREE.Quaternion();
. . .
// tween
var time = { t: 0 };
new TWEEN.Tween( time )
.to( { t : 1 }, 1000 )
.easing( TWEEN.Easing.Linear.None )
.onStart( function() {
dummy.position.copy( camera.position );
dummy.lookAt( point ); // point is your target Vector3
qStart.copy( camera.quaternion );
qEnd.copy( dummy.quaternion );
} )
.onUpdate( function() {
THREE.Quaternion.slerp( qStart, qEnd, camera.quaternion, time.t );
} )
.onComplete( function() {
camera.quaternion.copy( qEnd ); // so it is exact
} )
.start();
three.js r.88
我正在尝试简化相机旋转以查看图表中的选定对象。
到目前为止,我有
fourd.render_loop.push(() => TWEEN.update());
fourd.intersect_callback = function(vertex){
console.log(vertex);
var camera = fourd._internals.camera;
var start = new THREE.Euler().copy(camera.rotation);
camera.lookAt(vertex.position);
var end = new THREE.Euler().copy(camera.rotation);
camera.rotation.copy(start);
var tween = new TWEEN.Tween(camera.rotation)
.to(end, 600)
.easing(TWEEN.Easing.Quadratic.In)
.start();
};
其中 render_loop 只是在渲染循环中调用的函数集合。我不知道我错过了什么,但我收到一个错误:
THREE.Euler: .setFromRotationMatrix() 给出了不受支持的顺序:NaN
您可以补间相机的方向(或旋转),但最简单的方法是补间相机的四元数。
var dummy = new THREE.Camera(); // create these once and reuse
var qStart = new THREE.Quaternion();
var qEnd = new THREE.Quaternion();
. . .
// tween
var time = { t: 0 };
new TWEEN.Tween( time )
.to( { t : 1 }, 1000 )
.easing( TWEEN.Easing.Linear.None )
.onStart( function() {
dummy.position.copy( camera.position );
dummy.lookAt( point ); // point is your target Vector3
qStart.copy( camera.quaternion );
qEnd.copy( dummy.quaternion );
} )
.onUpdate( function() {
THREE.Quaternion.slerp( qStart, qEnd, camera.quaternion, time.t );
} )
.onComplete( function() {
camera.quaternion.copy( qEnd ); // so it is exact
} )
.start();
three.js r.88