我正在尝试使用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);

}

更新

好吧,我实际上无法在任何东西上补间相机。我认为肯定还有其他问题。渲染功能中还应该有其他内容吗?

最佳答案

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

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

关于javascript - Three.js补间camera.lookat,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25277919/

10-13 07:19