问THREE.js | TWEEN.js |平滑旋转摄像头
EN

Stack Overflow用户

提问于 2021-06-13 19:44:00

回答 1查看 139关注 0票数 2

在程序开始时，我的相机看着点(0,0,0)。当我向下滚动时，我增加了相机的z坐标。当它到达160时，我想旋转相机来查看放置对象的点(0,0,300)。我使用了cameraLookAt()，但是转换太突然了。我了解了TWEEN.js，并尝试实现它。但它似乎什么也做不了。

请帮帮忙。

  if (camera.position.z > 160) {

      var startRotation = new THREE.Euler().copy( camera.rotation );

      var endRotation = new THREE.Euler().copy( 0, 0, 300 );

      var tween = new TWEEN.Tween( startRotation ).to( { rotation: endRotation }, 2000 )

      tween.onUpdate(() => {
        camera.lookAt(startRotation)
      })

      tween.start()

    }

javascript

three.js

tween.js

回答 1

Stack Overflow用户

发布于 2021-06-13 22:02:55

对于这种用例，不需要使用动画库。可以，lookAt()会直接将相机朝向指定的目标。但是，您可以使用Quaternion.rotateTowards()逐步执行定向。这种方法类似于Unity的Quaternion.RotateTowards()。还有一个示例演示了这种方法：

https://threejs.org/examples/webgl_math_orientation_transform

其思想是计算摄影机的目标方向，然后在动画循环中使用rotateTowards()。目标方向是应用程序中的endRotation。你只需要把它当做一个四元数。使用以下命令尝试：

const endRotation = new THREE.Quaternion().setFromEuler( new THREE.Euler( 0, 0, 300 ) );

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67957861

复制

相似问题

问THREE.js | TWEEN.js |平滑旋转摄像头
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问THREE.js | TWEEN.js |平滑旋转摄像头EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问THREE.js | TWEEN.js |平滑旋转摄像头
EN