Rotating an Object properly around a pivot point given axis and angle

Question

In Three.js there seems to be quite a few ways of rotation which i personally do not find very intuitive. See e.g. the example
http://cloud.engineering-bear.com/apps/robot/robot.html

I get very strange unexpected effects when I apply rotation to multiple objects. E.g. when I rotate objects that have been added to each other and start rotating the parent the individual objects will all over sudden by placed differently in respect to each other then they originally where. I am now experimenting with grouping and would like to avoid the same effect.

See http://pi-q-robot.bitplan.com/example/robot?robot=/models/thing3088064.json for the current state of affairs and https://github.com/BITPlan/PI-Q-Robot for the source code.

So i searched for proper examples following the different API options:

rotation

function renderScene() {
    stats.update();
    //side1.rotation.z += 0.02;
    pivot.rotation.z += 0.02;

rotateOnAxis

rotateAroundWorldAxis

   object.rotateAroundWorldAxis(p, ax, r * Math.PI * 2 / frames);

rotateOnWorldAxis

object.rotateOnWorldAxis( axis, angle );

Rotate around World Axis

rotateAboutPoint

setRotationFromAxisAngle

https://threejs.org/docs/#api/en/core/Object3D.setRotationFromAxisAngle

setEulerFromQuaternion

   quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );
   object.rotation.setEulerFromQuaternion( quaternion );

Three.js - Rotating a sphere around a certain axis

applyMatrix

this.mesh.updateMatrixWorld(); // important !
childPart.mesh.applyMatrix(new THREE.Matrix4().getInverse(this.mesh.matrixWorld))

Applying a matrix in Three.js does not what I expect

I like the jsFiddle for https://stackoverflow.com/a/56427636/1497139

  var pivot = new THREE.Object3D();
  pivot.add( cube );
  scene.add( pivot );

I also found the following discussions pivot issue in discourcee.three.js.org

Questions None of the above information is clear enough to get to the point of the problem to be solved. The graphics above are much clearer stating the problem than the proposals are stating a solution.

a) I'd like to use the cylinder as the axis even when the cylinder is moved.I'd expect the easiest way to go would be to use rotateAroundWorldAxis - is that available in the latest revision from three.js or do i have to add it from e.g. https://stackoverflow.com/a/32038265/1497139?

b) I'd like to get a chain of objects to be rotated to later apply inverse kinematics as in

Although i looked at the source code of that solutions I can't really find the place where the parent-child positioning and rotating is happening. What are the relevant lines of code / API functions that would make proper rotation around a chain of joints happen? I already looked in the Bone/Skeleton API of Three.js but had the same problem there - lots of lines of code but no clear point where the rotation/positioning between child and parent happens.

stackoverflow.com/a/26413121/1497139 is the most helpful answer I found so far — Wolfgang Fahl
see discourse.threejs.org/t/robot-simulation-rotation-issues/9065 for a more detailed discussion and sample project — Wolfgang Fahl

Wolfgang Fahl Wolfgang Fahl · Accepted Answer · 2019-08-01T15:54:52

Question a)

Basically it works as expected:

    cylinder.position.set( options.x, 15, options.z );
    pivot.position.x=options.x;
    pivot.position.z=options.z;

see https://jsfiddle.net/wf_bitplan_com/4f6ebs90/13/

Question b)

see https://codepen.io/seppl2019/pen/zgJVKM

The key is to set the positions correctly. Instead of the proposal at https://stackoverflow.com/a/43837053/1497139 the size is computed in this case.

// create the pivot to rotate around/about
this.pivot = new THREE.Group();
this.pivot.add(this.mesh);
// shift the pivot position to fit my size + the size of the joint
this.pivot.position.set(
      x,
      y + this.size.y / 2 + this.pivotr,
      z + this.size.z / 2
);
// reposition the mesh accordingly
this.mesh.position.set(0, this.size.y / 2, 0);

Rotating an Object properly around a pivot point given axis and angle

1 Answers