Search code examples
javascriptthree.js3d

How to make 3d model face forward along its direction of motion

I'm new to 3d graphics, so I don't understand a lot of terminology about this sort of thing...

A 3D model that I have loaded into ThreeJs flies around in a room, avoiding walls. When it is close to a wall, it has to turn slightly to avoid colliding.

But when it does turn around, I cannot make it face its new direction of motion. Whatever I do, it starts facing a seemingly random direction.

Below is my unsuccessful code for making it face its new direction of motion. See the comments for my ideas behind the code.

(the model of interest is an attribute of the object "bird")

// convert the angle of its current rotation to a direction vector
const currentMotionDirection = new THREE.Vector3()
     .setFromEuler(bird.model.rotation)
     .normalize();
// find angle between current direction and desired direction
const angle = currentMotionDirection.angleTo(directionToGo);
// turn to face desired direction
const quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle);
bird.model.quaternion.copy(quaternion);

// update velocity to move in new direction
bird.setVelocity(directionToGo);

.

Here is what this code results in:

enter image description here

thanks for any help

Solution

  • Solved my problem - it turns out the line

    bird.model.quaternion.copy(quaternion);

    should be replaced with

    model.quaternion.premultiply(myQuaternion)

    because copy replaces the current quaternion, and the computed quaternion is relative - instead it should be multiplied to the current one.