围绕给定轴和角度的枢轴点正确旋转对象

Question

在 Three.js 中似乎有很多我个人觉得不太直观的旋转方式。参见例如例子
http://cloud.engineering-bear.com/apps/robot/robot.html

当我对多个对象应用旋转时，我得到了非常奇怪的意外效果。例如。当我旋转已相互添加的对象并开始旋转父对象时，各个对象将突然之间相对于彼此以不同的方式放置，然后它们原来的位置。我现在正在尝试分组，并希望避免同样的效果。

查看http://pi-q-robot.bitplan.com/example/robot?robot=/models/thing3088064.json 了解当前状态，https://github.com/BITPlan/PI-Q-Robot 了解源代码。

所以我根据不同的 API 选项搜索了合适的示例：

轮换

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

应用矩阵

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

我喜欢jsFiddle 换成https://stackoverflow.com/a/56427636/1497139

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

我还发现了以下讨论 disourcee.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/

问题 上述信息都不够清楚，无法指出要解决的问题。与提案中的解决方案相比，上面的图表更清楚地说明了问题。

a) 即使圆柱体被移动，我也想使用圆柱体作为轴。我希望最简单的方法是使用 rotateAroundWorldAxis - 是最新版本的three.js还是我必须从例如添加它https://stackoverflow.com/a/32038265/1497139?

b) 我想得到一个要旋转的对象链，以便以后应用逆运动学，如

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

虽然我查看了该解决方案的源代码，但我无法真正找到父子定位和旋转发生的地方。 有哪些相关的代码行/API 函数可以围绕关节链进行适当的旋转？ 我已经查看了 Three.js 的 Bone/Skeleton API，但在那里遇到了同样的问题 - 很多代码行，但没有明确的点在哪里发生子和父之间的旋转/定位。

Answer 1

问题 a)

基本上它按预期工作：

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

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

问题 b)

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

关键是正确设置位置。在这种情况下，将计算大小而不是 https://stackoverflow.com/a/43837053/1497139 的提案。

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