CODEWITHSUNDEEP
javascriptthree.js
user2028856
user2028856

Reputation: 3203

Three JS rotate model towards xyz position

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!

Upvotes: 4

Views: 1581

Answers (1)

Mugen87
Mugen87

Reputation: 31076

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

Upvotes: 5

Related Questions