Как выполнить полное вращение 3d модели в три раза от шага, крена и курса? - PullRequest
Новая
       41

Как выполнить полное вращение 3d модели в три раза от шага, крена и курса?

0 голосов
/ 29 апреля 2019

У меня есть чип, который дает мне высоту (-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 не так хорошо.

1 Ответ

1 голос
/ 29 апреля 2019

Вы можете использовать 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
)

. Отвечает ли это на ваш вопрос?

...