Three.js tween camera.lookat [英] Three.js tween camera.lookat
本文介绍了Three.js tween camera.lookat的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 Tween.js 对 Three.js 中的 camera.lookAt 进行补间,但收效甚微.
I'm attempting to tween the camera.lookAt in Three.js using Tween.js with little success.
这有效
selectedHotspot = object;
var tween = new TWEEN.Tween(camera.lookAt( object.position),600).start();
但是将相机直接旋转到 object.position.
But rotates the camera directly to the object.position.
如何获得漂亮的平滑旋转?
How do I get a nice smooth rotation?
这是渲染函数
function update() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = 512 * Math.sin(phi) * Math.cos(theta);
target.y = 512 * Math.cos(phi);
target.z = 512 * Math.sin(phi) * Math.sin(theta);
if(!selectedHotspot)
camera.lookAt(target);
renderer.render(scene, camera);
}
更新
好的,我实际上无法在任何东西上补间相机.我想一定还有什么地方不对劲.渲染函数中应该还有其他东西吗?
OK I can't actually tween the camera on anything. I think there must be something else wrong. Should there be something else in the render function?
推荐答案
我认为你的代码应该是这样的:
I think your code should look something like this:
// backup original rotation
var startRotation = new THREE.Euler().copy( camera.rotation );
// final rotation (with lookAt)
camera.lookAt( object.position );
var endRotation = new THREE.Euler().copy( camera.rotation );
// revert to original rotation
camera.rotation.copy( startRotation );
// Tween
new TWEEN.Tween( camera ).to( { rotation: endRotation }, 600 ).start();
这篇关于Three.js tween camera.lookat的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文