CODEWITHSUNDEEP
three.js3dcoordinate-systems
Emil
Emil

Reputation: 146

How to perform full rotation of 3d model in threejs from pitch, roll and heading?

I have a chip that gives me pitch(-90° - 90°), roll(-180° - 180°) and heading(0° - 360°).

I want to mirror any rotations of the object to a model in threejs.

I have made a threejs app that receives pitch, roll and heading, but I am struggeling with the understanding of how i should rotate the model, and if its even possible to do this regarding the range of pitch and roll. I Have not found a clear answer to this on the internet.

Lets say i want to rotate z: -450°, x: 250° and y: -210° at the same time during a 2 second period. I will in my app receive pitch, roll and heading every 100ms with the current rotation and heading.

Is it this possible to visualize this rotation ?

If yes, what would be the best approach regarding setting the rotation, using local/global axis etc.

I am using tweenjs to perform animations like below.

  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();

I have good knowledge of frontend programming, but my knowledge with 3d/threejs is not so good.

Upvotes: 0

Views: 601

Answers (1)

Sarthak
Sarthak

Reputation: 183

you could use tween.js(https://github.com/tweenjs/tween.js/) to achieve the desired result and do something like

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
)

Does this answer your question?

Upvotes: 1

Related Questions