I am working on a 3D visualization project using A-Frame and THREE.js where I need to perform trasnformations on an object (container) around its dynamically calculated centroid. However, I am encountering an issue where the centroid appears to ‘drift’ during the rotation step.
Problem Description: I have calculated the centroid of a model triangle in my scene and am attempting to rotate the container around this centroid. The expected behavior is that the centroid remains stationary in world space throughout the animation, but it seems to shift, indicating a possible issue with how the rotation’s pivot is being set.
I have a glitch example here – you can see three phases of trying to align the two triangles. The first two, translation and scaling, work fine. But the rotation is drifting.
What I’ve Tried:
Applied the rotation in world coordinates by translating to and from the centroid.
Checked for any parent transformations that might be affecting world positions.
Despite these efforts, the centroid still appears to move slightly after the rotation, suggesting the rotation might not be correctly centered around the centroid as intended.
Question: Could there be an issue with how I’m handling the translation or rotation in THREE.js? How can I ensure that the rotation is precisely centered on the centroid in world space, maintaining the centroid’s position static throughout the animation?