Most tutorials/questions about three.js suggest using a parent object to rotate an object around a specific point. This involves creating a parent object at the desired position, attaching the object to it, and then rotating the parent to achieve the desired rotation for the child object.
//Create a pivot
var pivot = new THREE.Object3D();
//Create an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Attach object to pivot
pivot.add(object);
//Move object away from pivot
object.position.set(new THREE.Vector3(5,0,0));
//Rotate the object 90 degrees around pivot
pivot.rotation.y = Math.PI / 2;
While this method works, it has limitations as an object can only have one parent, restricting the ability to rotate around different points.
Another effective method is applying a rotated matrix to the object's position:
//Create an object
var object = new THREE.Mesh( new THREE.BoxGeometry(2,2,2), new THREE.MeshBasicMaterial() );
//Move the object
object.position.set(new THREE.Vector3(5,0,0));
//Create a matrix
var matrix = new THREE.Matrix4();
//Rotate the matrix
matrix.makeRotationY(Math.PI / 2);
//Apply the matrix to rotate the object
object.position.applyMatrix4(matrix);
However, this approach also lacks the ability to set a specific rotation point, always defaulting to the world origin.
There is an option in sceneUtils to detach and attach objects to different parents, but it is not recommended and rarely utilized in example code.
The ultimate goal is to make a cube follow an S-shaped path by rotating it around various points, a seemingly basic task that proves challenging without proper functionality.
In summary, I am seeking a way to rotate a three.js object around multiple different points. Any suggestions on how to achieve this would be appreciated.