CODEWITHSUNDEEP
javascriptthree.js
DTids
DTids

Reputation: 110

ThreeJS Animate Object3D.lookAt oddity

I'm trying to animate the lookAt method of an Object3D to lookAt a target Vector3. My Tween function traces floating points as per the incrementing scalarMultiplyVal (0.0 - 1.0), but no matter what I try the Object3D is already looking at the target before the tween starts. Very odd. 

TweenMax.to( this, 5, {scalarMultiplyVal:1, onUpdate:function(){
            let targetVector = new THREE.Vector3( target.position.x, target.position.y, target.position.z ).multiplyScalar( scalarMultiplyVal );
            console.log( targetVector ) // logs "animating" x,y,z values as expected
            displayObject.lookAt( targetVector ); // does not animate. Already fulling looking at target.position ( scalarMultiplyVal = 1.0 )
        }});

Essentially I'm trying to have my Object3D animate/turn to look at a new vector3 periodically, but instead the Object3D is already fully looking at the target.position, and disregarding the vector multiplication. Very odd. Any advice will be a great help!

Upvotes: 0

Views: 271

Answers (1)

Mugen87
Mugen87

Reputation: 31026

Instead of performing an animation with Object3D.lookAt() I highly recommend to use Quaternion.rotateTowards(). The method is based on Unity's Quaternion.RotateTowards. It internally performs a slerp which is ideal for your use case. The following example demonstrate the usage of Quaternion.rotateTowards().

https://threejs.org/examples/webgl_math_orientation_transform

three.js R104

Upvotes: 1

Related Questions