I’m trying to do a basic instance animation where each object simply rotates around a single axis. (in this case the Y) This works as expected, then for whatever reason it’s getting stuck whenever it gets to 90 degrees.
The way I’m doing it is pulling the matrix of the instance in a loop, pushing the matrix to a dummy object, doing the rotation (like you would a regular Object3D), updating the Object Matrix, then pushing the matrix back on the instance.
This is the method almost every other example uses… however, most examples use their own math or data points to push the transform using setMatrixAt() and don’t use the instance’s own existing matrix with getMatrixAt() in their calculations.
Here is my for loop for the animation:
for (let i = 0; i < count; i++) {
// get the items current position
meshRef.current.getMatrixAt(i, currentMatrix);
/*console.log("item: ", i, "currentMatrix: ", currentMatrix.toArray()); */
// set the temp objects position using this matrix
//threejs doesn't let you set the matrix directly
currentMatrix.decompose(
tempObject.position,
tempObject.quaternion,
tempObject.scale
);
// do the transformation to the temp object
console.log("Rotation: ", tempObject.rotation.y);
tempObject.rotation.y -= Math.random() * 0.01;
tempObject.updateMatrix();
//push the change back to the instance
meshRef.current.setMatrixAt(i, tempObject.matrix);
meshRef.current.instanceMatrix.needsUpdate = true;
}
And here is a running Code Sandbox
This example is running in R3F but it also happens in vanilla which this snippet mostly is anyway.
I know it’s got something to do with the matrix, decompose, Euler, quaternion voodoo going on but I wanted to see if folks here may have an easy solution before I dived into all that.
My ideal scenario would be just copying the matrix onto a basic Object3D so I can to standard type transforms, then pushing the matrix back on the instance. However something’s not letting that happen…
