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

问题

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;

https://jsfiddle.net/of1vfhzz/1/
https://github.com/mrdoob/three.js/issues/1958

rotateOnAxis

three.js rotate Object3d around Y axis at it center
How to rotate a 3D object on axis three.js?
ThreeJS - rotation around object's own axis

rotateAroundWorldAxis

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

How to rotate a object on axis world three.js?
https://stackoverflow.com/a/32038265/1497139
https://jsfiddle.net/b4wqxkjn/7/
THREE.js Update rotation property of object after rotateOnWorldAxis

rotateOnWorldAxis

object.rotateOnWorldAxis( axis, angle );

Rotate around World Axis

rotateAboutPoint

Three JS Pivot point
Rotation anchor point in Three.js

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

https://discourse.threejs.org/t/rotate-group-around-pivot/3656
https://discourse.threejs.org/t/how-to-rotate-an-object-around-a-pivot-point/6838
https://discourse.threejs.org/t/set-dynamically-generated-groups-pivot-position-to-the-center-of-its-children-objects-position/6349
https://discourse.threejs.org/t/my-3d-model-is-not-rotating-around-its-origin/3339/3
- https://jsfiddle.net/blackstrings/c0o3Lm45/
https://discourse.threejs.org/t/rotate-object-at-end-point/2190
- https://jsfiddle.net/f2Lommf5/3594/

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

https://github.com/jsantell/THREE.IK
https://jsantell.github.io/THREE.IK/

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.

回答1:

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);

来源：https://stackoverflow.com/questions/57311356/rotating-an-object-properly-around-a-pivot-point-given-axis-and-angle

标签

three.js

rotation

inverse-kinematics