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

Question

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

当我对多个 objects 应用旋转时，我得到了非常奇怪的意外效果。例如。当我旋转 objects 并开始旋转 parent 时，个体 objects 将突然之间相互放置不同，然后它们原来所在的位置。我现在正在尝试分组并希望避免同样的效果。

查看源代码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。

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

旋转

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

旋转同轴

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://jsfiddle.net/b4wqxkjn/7/
THREE.js Update rotation property of object after rotateOnWorldAxis

rotateOnWorldAxis

object.rotateOnWorldAxis( axis, angle );

rotateAboutPoint

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 for

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

我还发现了以下讨论 discourcee.three.js.org

中的枢轴问题

问题 None 以上的信息已经很清楚了，可以说到要解决的问题了。上面的图表比提案说明解决方案更清楚地说明了问题。

一）我想使用圆柱体作为轴，即使圆柱体是 moved.I，我希望最简单的方法是使用 rotateAroundWorldAxis - 是否在 [= 的最新版本中可用185=] 或者我必须从例如?

b) 我想要旋转 objects 链，以便稍后应用

中的逆运动学

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

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

关键是要正确设置位置。在这种情况下，计算大小而不是处的提议。

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

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

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

rotation

inverse-kinematics

three.js