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

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;

旋转轴

旋转环绕世界轴

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

旋转世界轴

object.rotateOnWorldAxis( axis, angle );

围绕世界轴旋转

旋转关于点

setRotationFromAxisAngle

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

setEulerFromQuaternion

   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 中应用矩阵并不是我所期望的

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

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

我还在discourcee.three.js.org 中发现了以下讨论中枢问题

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

a）即使圆柱体被移动，我也想将圆柱体用作轴。我希望最简单的方法是使用 rotateAroundWorldAxis -是可以在three.js的最新版本中使用还是我有从例如https://stackoverflow.com/a/32038265/1497139添加它？

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

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

score 1 · Accepted Answer

问题一）

基本上它按预期工作：

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

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

1 回答 1

Related

Reference