时间戳

首页 > 解决方案 > 如何在threejs中从俯仰，滚动和航向执行3d模型的完全旋转？

three.js - 如何在threejs中从俯仰，滚动和航向执行3d模型的完全旋转？

问题描述

我有一个芯片可以提供俯仰（-90° - 90°）、滚动（-180° - 180°）和航向（0° - 360°）。

我想将对象的任何旋转镜像到threejs中的模型。

我已经制作了一个可以接收俯仰、滚动和航向的 Threejs 应用程序，但我正在努力理解我应该如何旋转模型，以及是否有可能在俯仰和滚动的范围内做到这一点。我在互联网上没有找到明确的答案。

假设我想在 2 秒内同时旋转 z：-450°、x：250° 和 y：-210°。我将在我的应用程序中每 100 毫秒接收一次俯仰、滚动和航向以及当前的旋转和航向。

是否可以可视化这种旋转？

如果是，关于设置旋转、使用局部/全局轴等的最佳方法是什么？

我正在使用 tweenjs 执行如下动画。

  new TWEEN.Tween(this.model.rotation)
  .to(
    {
      x: THREE.Math.degToRad(pitch),
      y: THREE.Math.degToRad(roll),
      z: THREE.Math.degToRad(heading)
    },
    150
  )
  .easing(TWEEN.Easing.Linear.None)
  .start();

我对前端编程有很好的了解，但是我对 3d/threejs 的了解不是很好。

标签： three.js3dcoordinate-systems

解决方案

您可以使用 tween.js（https://github.com/tweenjs/tween.js/）来实现所需的结果并执行类似的操作

function animateVector3(vectorToAnimate, target, options) {
    options = options || {}
    // get targets from options or set to defaults
    let to = target || new THREE.Vector3(),
        easing = options.easing || TWEEN.Easing.Exponential.InOut,
        duration = options.duration || 2000
    // create the tween
    let tweenVector3 = new TWEEN.Tween(vectorToAnimate)
        .to({x: to.x, y: to.y, z: to.z}, duration)
        .easing(easing)
        .onStart(function(d) {
            if (options.start) {
                options.start(d)
            }
        })
        .onUpdate(function(d) {
            if (options.update) {
                options.update(d)
            }
        })
        .onComplete(function() {
            if (options.finish) options.finish()
        })
    // start the tween
    tweenVector3.start()
    // return the tween in case we want to manipulate it later on
    return tweenVector3
}

const animationOptions = {    
    duration: 2000,
    start: () => {
        this.cameraControls.enable(false)
    },
    finish: () => {
        this.cameraControls.enable(true)
    }
}
// Adjust Yaw object rotation
animateVector3(
// current rotation of the 3d object
    yawObject.rotation,
// desired rotation of the object
    new THREE.Vector3(0, 0, annotation.rotation.z + degToRad(90)),
    animationOptions
)
// Adjust Pitch object rotation
animateVector3(
    pitchObject.rotation,
    new THREE.Vector3(0, degToRad(45), 0),
    animationOptions
)

这回答了你的问题了吗？

推荐阅读