I am trying to rotate a Group around the center of a backbone Mesh using the following method:
function rotateAboutPoint(obj, point, axis, theta, pointIsWorld) {
pointIsWorld = (pointIsWorld === undefined) ? false : pointIsWorld;
if (pointIsWorld) {
obj.parent.localToWorld(obj.position); // compensate for world coordinate
}
obj.position.sub(point); // remove the offset
obj.position.applyAxisAngle(axis, theta); // rotate the POSITION
obj.position.add(point); // re-add the offset
if (pointIsWorld) {
obj.parent.worldToLocal(obj.position); // undo world coordinates compensation
}
obj.rotateOnAxis(axis, theta); // rotate the OBJECT}.
for (let i = 0; i < selected_bases.length; i++) {
let visobj = nucleotides[selected_bases[i].id].visual_object;
let temp = new THREE.Vector3();
visobj.children[0].getWorldPosition(temp);
//create a blue LineBasicMaterial
var material = new THREE.LineBasicMaterial({ color: 0x800000 });
material.linewidth = 2;
var geometry = new THREE.Geometry();
geometry.vertices.push(temp);
let temp1 = new THREE.Vector3(temp.x, temp.y - 3, temp.z)
geometry.vertices.push(temp1);
var line = new THREE.Line(geometry, material);
scene.add(line);
let temp3 = new THREE.Vector3();
temp3.copy(temp);
temp3.normalize()
rotateAboutPoint(visobj, temp, temp3, Math.PI/2, true);
render();
}
The red lines represent where the Group has been.
After a 10 iterations, the results are as desired:
After 100 iterations however, the Group spirals out of control:
Thank you for all of your help!