Reputation: 3203
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
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