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

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

轴旋转

• Three.js 绕其中心 Y 轴旋转 Object3d
• 如何在轴 Three.js 上旋转 3D 对象？
• ThreeJS - 绕对象自身轴旋转

绕世界轴旋转

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

• 如何在轴世界三.js 上旋转对象？
• /sf/answers/2242678581/
• https://jsfiddle.net/b4wqxkjn/7/
• THREE.js 在rotateOnWorldAxis之后更新对象的旋转属性

在世界轴上旋转

object.rotateOnWorldAxis( axis, angle );

• 绕世界轴旋转

旋转关于点

• 三个 JS 枢轴点
• Three.js 中的旋转锚点

设置从轴角度旋转

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

setEulerFrom四元数

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

• Three.js - 围绕某个轴旋转球体

应用矩阵

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

• 在 Three.js 中应用矩阵并不符合我的预期

我喜欢/sf/answers/3949934551/的jsFiddle

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

我还在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/

问题 上述信息都不够清楚，不足以说明要解决的问题。上面的图表比提案阐述的解决方案更清楚地说明了问题。

A） 即使圆柱体移动，我也想使用圆柱体作为轴。我希望最简单的方法是使用rotateAroundWorldAxis -在 Three.js 的最新版本中可用还是我必须添加它来自例如/sf/answers/2242678581/？

b）我想要获得一系列要旋转的对象，以便稍后应用逆运动学，如

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

尽管我查看了该解决方案的源代码，但我无法真正找到发生父子定位和旋转的位置。哪些相关的代码/API 函数行可以使一系列关节发生适当的旋转？ 我已经查看了 Three.js 的 Bone/Skeleton API，但也遇到了同样的问题 - 有很多代码行，但没有明确的点在子级和父级之间发生旋转/定位。

Answer 1

问题一）

基本上它按预期工作：

    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

关键是要正确设置位置。在本例中，大小是计算的，而不是/sf/answers/3068593741/上的提案。

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