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

Question

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

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

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

假设我想同时旋转 z: -450°, x: 250° 和 y: -210° 2 秒内的时间。我将在我的应用程序中接收音调、滚动 并以当前的旋转和航向每 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 的了解不是很好。

Answer 1

您可以使用 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
)

这能回答你的问题吗？