JSFiddle - React, Tailwind, and code Playground

by Wolfgang Fahl

HTML

<!-- https://discourse.threejs.org/t/how-to-rotate-an-object-around-a-pivot-point/6838/2 -->
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>

CSS

body {
	  margin: 0;
}

JavaScript

// Joint
class Joint {
   // create me from the given mesh
   // position me at the given x,y,z position
   // show pivot sphere with given pivotr radius
   constructor(mesh,x,y,z,pivotr) {
      this.mesh=mesh;
      this.pivotr=pivotr;
      this.pivot=new THREE.Group();
      this.pivot.position.set(x,y,z);
      this.pivot.add(this.mesh);
      
      //pivot.updateMatrixWorld(); // important !
   //mesh.applyMatrix(new THREE.Matrix4().getInverse(pivot.matrixWorld))
      this.pivot.add(this.createPivotSphere(0,0.3,0));
      scene.add(this.pivot);
   }
   
   createPivotSphere(dx,dy,dz) {
     var pivotSphereGeo = new THREE.SphereGeometry(this.pivotr );
     this.pivotSphere = new THREE.Mesh(pivotSphereGeo);
     this.pivotSphere.position.set(this.mesh.x+dx,this.mesh.y+dy,this.mesh.z+dz);
   }
   
   rotate(rx,ry,rz) {
     this.pivot.rotation.x += rx;
     this.pivot.rotation.y += ry;
     this.pivot.rotation.z += rz;
   }
} // Joint

class Structure {
  constructor(options) {
    this.options=options;
    this.joints=[];
    this.addObjects();
  }
  
  addObjects() {
    var material = new THREE.MeshPhongMaterial({color: 0x0033ff, specular: 0x555555, shininess: 200});
    var cylinder1=this.addCylinder(0.1,0.3,material);
    var cylinder2=this.addCylinder(0.12,0.4,material);
    var pivotr=0.03;
    this.joints.push(new Joint(cylinder1,0, -0.25, 0,pivotr));
    this.joints.push(new Joint(cylinder2,0.25, -0.25, 0,pivotr));
  }
  
  addCylinder(r,h,material) {
    var geometry=new THREE.CylinderGeometry(r,r,h,64);
    var cylinder=new THREE.Mesh(geometry,material);
    return cylinder;
  }
  
  rotate(rx,ry,rz) {
    for (var joint in this.joints) {
      this.joints[joint].rotate(this.options.rx,this.options.ry,this.options.rz);
    }
  }

}

var camera, scene, renderer,structure;

init();
animate();

// see https://stackoverflow.com/a/42866733/1497139
// obj - your object (THREE.Object3D or derived)
// point - the point of rotation (THREE.Vector3)
// axis...