Rotating a group of objects around their center in JSModeler

Question

I am using JSModeler with three.js extension. My viewer is JSM.ThreeViewer(). The codepen is: https://codepen.io/Dharnidharka/pen/QRzBQa

What I am trying to achieve is a rotation of the concentric circles around their center, but currently the rotation is about the world center.

In three.js, this could be done by having a parent Object3D, and adding all the meshes to that object, centering that object by using geometry.center() and then having the rotation. But I could not find an Object3D extension for JSModeler.
Another way in three.js could be to group objects around a common pivot but even that approach did not work for me.
A third approach I tried was the solution in What's the right way to rotate an object around a point in three.js?, in the Update() loop but that doesn't work as well

I used the following to move the object to the pivot point:

  meshes = JSM.ConvertModelToThreeMeshes (model);

  viewer.AddMeshes (meshes);

  for(var i =3; i<10; i++) {

    meshes[i].geometry.computeBoundingBox();
    meshes[i].geometry.boundingBox.getCenter(center);
    meshes[i].geometry.center();
    var newPos = new THREE.Vector3(-center.x, -center.y, -center.z);
    meshes[i].position.copy(newPos);

  }

The expected output is that the 2 circles are rotating about the common center, which also would be the world center. Currently, they are rotating about the world center, but not about their common center.

score 0 · Answer 1 · answered Jun 03 '19 at 01:56

Finally figured it out.

In the code posted above, I was centering the geometry and then moving them back to their original positions. What was needed was to center the geometry and then move the meshes around the center relative to each other so that the configuration did not mess up. There are 2 mesh groups. The mid has to be computed for each and then the geometry translated accordingly. The solution in codes:

   var center = new THREE.Vector3();
   var mid1 = new THREE.Vector3();

    for(var i =0; i<len1; i++) {

        viewer.GetMesh(i).geometry.computeBoundingBox();
        viewer.GetMesh(i).geometry.boundingBox.getCenter(center);
        viewer.GetMesh(i).geometry.verticesNeedUpdate = true;
        mid1.x += center.x;
        mid1.y += center.y;
        mid1.z += center.z;

      }

      mid1.x = mid1.x / len1;
      mid1.y = mid1.y / len1;
      mid1.z = mid1.z / len1;

      for(var i = 0; i<len1; i++) {

        viewer.GetMesh(i).geometry.computeBoundingBox();
        viewer.GetMesh(i).geometry.boundingBox.getCenter(center);
        viewer.GetMesh(i).geometry.center();
        var newPos = new THREE.Vector3(center.x - mid1.x, center.y - mid1.y, center.z - mid1.z);
        viewer.GetMesh(i).geometry.translate(newPos.x, newPos.y, newPos.z);

      }

Rotating a group of objects around their center in JSModeler

1 Answers1