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

在Three.js中，似乎有相当多的旋转方式，我个人并不觉得很直观。参见示例

当我将旋转应用于多个对象时，会得到非常奇怪的意外效果。例如，当我旋转已添加到彼此的对象并开始旋转父对象时，单个对象将由于彼此放置的位置不同而突然发生变化，而它们最初位于何处。我现在正在尝试分组，希望避免同样的效果

有关当前状态和源代码，请参阅

因此，我按照不同的API选项搜索适当的示例：

旋转

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

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

旋转轴

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

object.rotateOnWorldAxis( axis, angle );

旋转世界轴

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

object.rotateOnWorldAxis( axis, angle );

旋转世界轴

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

object.rotateOnWorldAxis( axis, angle );

旋转输出点

从轴角度设置旋转角度

设置四元数

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

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

applyMatrix

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

我喜欢这本书

我还发现了以下讨论 discounterce.three.js.org中的轴心问题

问题 以上所有信息都不够清楚，不足以说明要解决的问题。上面的图表说明问题比提案说明解决方案要清楚得多

（a） 即使移动圆柱体，我也希望使用圆柱体作为轴。我希望最简单的方法是使用rotateAroundWorldAxis-它是否在three.js的最新版本中可用，或者我是否必须从例如添加它？

b） 我希望得到一个要旋转的对象链，以便稍后应用反向运动学，如中所示

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

问题a）

基本上，它可以按预期工作：

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

看

问题b）

看

关键是正确设置位置。而不是在本例中计算尺寸的提案

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

这是迄今为止我发现的最有帮助的答案。请参阅更详细的讨论和示例项目