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;

rotateOnAxis

rotateAroundWorldAxis

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

rotateOnWorldAxis

object.rotateOnWorldAxis( axis, angle );

Rotate around World Axis

rotateAboutPoint

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

applyMatrix

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

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

问题以上信息都不十分清楚，无法解决要解决的问题。上面的图形比拟议的解决方案更清楚地说明了问题。

a）我想即使将圆柱体移动也要使用圆柱体作为轴。我希望最简单的方法是使用rotateAroundWorldAxis-在Three.js的最新版本中可用吗？必须从例如添加https://stackoverflow.com/a/32038265/1497139？

b）我想获得一系列要旋转的对象，以便稍后像

一样应用逆运动学

尽管我查看了这些解决方案的源代码，但我无法真正找到发生父子定位和旋转的位置。 哪些相关代码行/ 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);

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

1 个答案: