GLTF object secondary rotation upon completion of initial rotation?

Questions
1

animate = () => {
requestAnimationFrame(this.animate)
this.controls.update()

if(this.object) {
//janky rotation
let axis = new THREE.Vector3(Math.sin(Date.now() * 0.002) * Math.PI * 0.003, Math.sin(Date.now() * 0.05) * Math.PI * 0.05, 0)
this.object.rotateOnAxis(axis, 0.3)

// once the object is done rotating on the axis, I’d like to make a conditional of the object to check that the object is no longer moving and rotate along the y plane, back and forth

if(this.object.rotation.y === 0) {
this.object.rotation.y = Math.sin(Date.now() * 0.0003) * Math.PI * 0.08
}
}
this.renderer.render(this.scene,this.camera)
}

Hello all, I’m new to three and I’m trying to simply have my object complete its rotation along the assigned axis and then assign my object another trajectory along a new rotation on the y plane, but am having a hard time attempting to do so. When not doing a conditional check on the object after the rotateOnAxis is being applied, the object combines both rotations into one animation.

Essentially, I’d like to check to see that the object’s animation is complete from the initial rotation to apply the next rotation or at the very least, check that object’s axes are “static” and then sequentially apply the next rotation. Is this possible?

Sorry if this doesn’t make any sense, I’ve been stuck on this for a while now.

2

Why not just creating the animations in Blender and then export them with the glTF asset? In this way you can control the playback with a nice API and don’t have to bother with low-level transformation math.

In any event, a typical approach from game-dev is to define just the target rotation and the use a Quaternion.rotateTowards() in order to gradually rotate towards it. The method ensure not to overshoot and you can also control the speed of the transformation. Check out the following example to see this approach in action.

https://threejs.org/examples/webgl_math_orientation_transform

Given your current and target rotations, you can use Quaternion.angleTo() to compute the shortest angle between both quaternions. If it is lower than a specific epsilon value, you know both quaternions represent the same rotation. You can use this approach to transition from one animation to the next one.