javascript - Three.js tween camera.lookat

Question

我尝试使用 Tween.js 在 Three.js 中对 camera.lookAt 进行补间，但收效甚微。

这行得通

    selectedHotspot = object;

    var tween = new TWEEN.Tween(camera.lookAt( object.position),600).start();

而是将相机直接旋转到object.position。

如何获得平滑的旋转？

这是渲染函数

  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);

}

更新

好吧，我实际上不能在任何东西上补间相机。我想一定还有别的地方不对劲。渲染函数中应该还有其他东西吗？

Answer 1

我认为您的代码应该如下所示:

// 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();