Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Three.js 如何从俯仰、横滚和航向三个方向执行三维模型的完全旋转?_Three.js_3d_Coordinate Systems - Fatal编程技术网

Three.js 如何从俯仰、横滚和航向三个方向执行三维模型的完全旋转?

Three.js 如何从俯仰、横滚和航向三个方向执行三维模型的完全旋转?,three.js,3d,coordinate-systems,Three.js,3d,Coordinate Systems,我有一个芯片,可以让我俯仰-90°-90°,滚动-180°-180°,头部0°-360° 我想将对象的任何旋转镜像到3JS中的模型 我已经制作了一个3JS应用程序,可以接收俯仰、横滚和横摇,但我正在努力理解如何旋转模型,以及是否有可能在俯仰和横摇范围内这样做。我还没有在互联网上找到一个明确的答案 假设我想同时旋转z:-450°,x:250°和y:-210° 时间在2秒钟内。我将在我的应用程序中接收投球、滚球 以当前旋转和航向,每100ms航向一次 这是否有可能使旋转可视化? 如果是,使用局部/全

我有一个芯片,可以让我俯仰-90°-90°,滚动-180°-180°,头部0°-360°

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

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

假设我想同时旋转z:-450°,x:250°和y:-210° 时间在2秒钟内。我将在我的应用程序中接收投球、滚球 以当前旋转和航向,每100ms航向一次

这是否有可能使旋转可视化? 如果是,使用局部/全局轴等设置旋转的最佳方法是什么

我使用tweenjs来执行如下动画

新TWEEN.Tweenthis.model.rotation 到 { x:3,数学,德格托拉皮奇, y:三个,数学,德格托拉多尔, z:三个,数学,去阅读 }, 150 .easingween.Easing.Linear.None 开始 我对前端编程有很好的了解,但我对3d/threejs的了解不是很好。

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

这回答了你的问题吗?

谢谢你的回答。我已经准备好使用tweenjs了。我所描述的最大问题是理解不同轴的旋转如何相互影响,以及如何使用数据在俯仰和滚动范围之外执行旋转