Three JS rotate model towards xyz position

user_2028856 0
Viewed 359

I'm trying to rotate an object in Three JS towards a fixed xyz location within a space. Currently I'm able to achieve it like this:

var position_x  = -0.85;
var position_z  = -4.44;

model.lookAt(position_x, 0, position_z);

However the lookAt() function rotates the model instantly and I would like to rotate the model more slowly. Is there a way to accomplish this using built in Three JS functions?

Thanks!

three.js javascript
1 Answers

Is there a way to accomplish this using built in Three JS functions?

Yes, you can use Quaternion.rotateTowards() which works similar to Unity's Quaternion.rotateTowards() method.

The idea is to compute a target orientation which is represented by a quaternion. You can do this by using Matrix4.lookAt() and then create a quaternion based on this matrix via Quaternion.setFromRotationMatrix().

Next, you compute an angular step per frame the will define how much your object is turned towards the target. The computation of step looks like so:

const step = speed * delta;

delta is the time delta value in seconds and speed represents the turn rate of our model in radians per second.

A complete code example is available is here:

https://threejs.org/examples/webgl_math_orientation_transform

user_52508470
Related