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

问题描述

在Three.js中，似乎有很多旋转方式，我个人并不觉得这很直观.参见例如例子

In Three.js there seems to be quite a few ways of rotation which i personally do not find very intuitive. See e.g. the example

将旋转应用于多个对象时，会得到非常奇怪的意外效果.例如.当我旋转已添加到彼此的对象并开始旋转父对象时，各个对象之间的相对位置会突然变得突然变大，而原来放置的位置不同.我现在正在尝试分组，并希望避免相同的效果.

I get very strange unexpected effects when I apply rotation to multiple objects. E.g. when I rotate objects that have been added to each other and start rotating the parent the individual objects will all over sudden by placed differently in respect to each other then they originally where. I am now experimenting with grouping and would like to avoid the same effect.

请参见 http://pi-q -robot.bitplan.com/example/robot?robot=/models/thing3088064.json 了解当前的事务状态，并 https://github.com/BITPlan/PI-Q-Robot 作为源代码.

See 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 for the source code.

因此，我根据不同的API选项搜索了适当的示例:

So i searched for proper examples following the different API options:

旋转

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

• https://github.com/mrdoob/three.js/issues/1958
• https://github.com/mrdoob/three.js/issues/1958

rotateOnAxis

• three.js在以下位置绕Y轴旋转Object3d它居中
• 如何在第3轴上旋转3D对象.js?
• ThreeJS-围绕对象自身轴的旋转
• 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);

• 如何在坐标轴世界3上旋转对象.js?
• https://stackoverflow.com/a/32038265/1497139
• https://jsfiddle.net/b4wqxkjn/7/
• THREE.js在rotateOnWorldAxis之后更新对象的旋转属性
• How to rotate a object on axis world three.js?
• https://stackoverflow.com/a/32038265/1497139
• https://jsfiddle.net/b4wqxkjn/7/
• THREE.js Update rotation property of object after rotateOnWorldAxis

rotateOnWorldAxis

object.rotateOnWorldAxis( axis, angle );

• 围绕世界轴旋转
• Rotate around World Axis

rotateAboutPoint

• 三个JS枢轴点
• Three.js中的旋转锚点
• Three JS Pivot point
• 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-围绕某个轴旋转球体
• Three.js - Rotating a sphere around a certain axis

applyMatrix

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

• 在Three.js中应用矩阵不是我所期望的
• Applying a matrix in Three.js does not what I expect

我喜欢 jsFiddle 用于

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

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

I also found the following discussionspivot issue in discourcee.three.js.org

• https://discourse.threejs.org/t/rotate -group-around-pivot/3656
• https://discourse.threejs.org/t/set-dynamically-generation-groups-pivot-position-to-the-center-of-its-children-objects-objects-position/6349
• https ://discourse.threejs.org/t/my-3d-model-is-not-rot-around-its-origin/3339/3
  • https://jsfiddle.net/blackstrings/c0o3Lm45/
  • https://discourse.threejs.org/t/rotate-group-around-pivot/3656
  • 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://jsfiddle.net/f2Lommf5/3594/

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

    QuestionsNone of the above information is clear enough to get to the point of the problem to be solved. The graphics above are much clearer stating the problem than the proposals are stating a solution.

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

    a) I'd like to use the cylinder as the axis even when the cylinder is moved.I'd expect the easiest way to go would be to use rotateAroundWorldAxis - is that available in the latest revision from three.js or do i have to add it from e.g. https://stackoverflow.com/a/32038265/1497139?

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

    b) I'd like to get a chain of objects to be rotated to later apply inverse kinematics as in

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

    尽管我查看了这些解决方案的源代码，但我无法真正找到发生父子定位和旋转的地方. 哪些相关代码行/API函数可以使关节围绕关节链正确旋转?我已经看过Three.js的Bone/Skeleton API，但是那里也有同样的问题-很多行代码，但不清楚在父子之间的旋转/定位发生的位置.

    Although i looked at the source code of that solutions I can't really find the place where the parent-child positioning and rotating is happening. What are the relevant lines of code / API functions that would make proper rotation around a chain of joints happen?I already looked in the Bone/Skeleton API of Three.js but had the same problem there - lots of lines of code but no clear point where the rotation/positioning between child and parent happens.

    推荐答案

    问题a)

    基本上可以按预期工作:

    Basically it works as expected:

        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 上的建议.

    The key is to set the positions correctly. Instead of the proposal at https://stackoverflow.com/a/43837053/1497139 the size is computed in this case.

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

    这篇关于围绕给定的轴和角度的旋转点正确旋转对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！