How to rotate a ThreeJS Object3D object around its end?

Question

Is it possible to rotate an Object3D object about its end? I found my object's center with const boundingBox = new THREE.Box3().setFromObject(this.object) to determine the center. Would rotating at a point mean translating the object to one point, rotate, then translate back?

Answer 1

Is it possible to rotate an Object3D object about its end?

Yes. By default, Object3D rotates about its center, but it's possible to change rotation point by "wrapping" object in parent (Object3D) and setting position for parent (this will be also a rotation point):

function changeRotationPoint(obj, scene, position) {
  // create parent and add it to scene
  const parent = new THREE.Object3D();

  parent.add(obj);
  if (obj.parent) {
    obj.parent.add(parent);
  } else {
    // add to THREE scene if obj doesn't have a
    // parent
    scene.add(parent);
  }

  // position for rotation, 
  // for example (put your data): { x: 0.1, y: 0.1, z: 0 }
  parent.position.set(position.x, position.y, position.z);

  // correct position of obj, so only rotation point
  // will be changed
  const x = obj.position.x - position.x,
  const y = obj.position.y - position.y,
  const z = obj.position.z - position.z
  obj.position.set(x, y, z);
}

// call function
changeRotationPoint(this.object, scene, { x: 0.1, y: 0.1, z: 0 });

// rotate this.object
this.object.parent.rotation.set(0.1, 0.2, 0.3);