three.js如何使Object3d绕其中心点沿Y轴旋转？

Question

我在Three.JS中有一个由一些网格对象组成的Object3d组。
我想要绕Y轴旋转该组，以它的中心为中心，该中心远离世界中心（0,0,0）。
我只知道Group.rotate.y += deg代码，但对于每个轴方向，它总是围绕（0,0,0）旋转物体而非我的组中心！
该如何解决？

更新：

请查看评论

- MeTe-30

Answer 1

看一下 Object3D 的 rotateOnAxis(axis, angle) 函数。它应该是这样的：

//declared once at the top of your code
var axis = new THREE.Vector3(0.5,0.5,0);//tilted a bit on x and y - feel free to plug your different axis here
//in your update/draw function
rad += radIncrement;
object.rotateOnAxis(axis,rad);

HTH

- George Profenza

---

谢谢，伙计，但它仍然围绕着(0,0,0)点，在轴方向上旋转！看这个：http://threejs.org/examples/canvas_geometry_cube.html 我想要类似这样的东西，但不使用相机旋转，而且我的物体远离(0,0,0)。 - MeTe-30

你可能想要重新表达你的问题：我原以为你想要绕任意轴旋转。在再次阅读你的问题和评论后，听起来你想要将多个对象作为一个组围绕组的中心旋转。你可以很容易地通过首先创建你的组并使用组的旋转实现：var group = new THREE.Object3D();group.add(object1);group.add(object2);object2.x = 100 在设置代码顶部，然后简单地 group.rotation.y += radians - George Profenza

是的，你理解了我的目的，但如果你再读一遍我的问题，我说过，我尝试过 group.rotation.y += deg，但它并没有围绕组中心旋转！它是围绕 (0,0,0) 旋转的。 - MeTe-30

当然可以，那是默认行为。你有两个选项：1. 创建一个翻译矩阵并将其应用于该组。选项2可能更容易，使用另一个组（2）来嵌套第一个（1）...翻译包含对象的group1，并旋转包含group1的group2。 - George Profenza

非常感谢，我已经明白了。 我是three.js的新手，你能给我一个链接让我了解更多关于翻译和...的内容吗？ - MeTe-30

当然！我热情地向您推荐此课程。该课程讲解清晰，有练习，全部使用了three.js。第四章变换正是您需要的内容。 - George Profenza

Answer 2

这个答案对我有所帮助，但代码还不完全正确。轴必须是一个单位向量，而且object.rotateOnAxis()是增量的。

下面是一个正常工作的例子：

var axis = new THREE.Vector3(4, 0, 7).normalize();
var speed = 0.01;

// set up scene, etc.

function animate () {

    // other code

    if (object) {
        object.rotateOnAxis(axis, speed);
    }
}

- 黄雨伞

Answer 3

请参考如何在three.js上绕轴旋转3D对象？

我是这样解决这个问题的：

我为ThreeJS创建了“ObjectControls”模块，它允许您旋转单个对象（或组），而不是场景。

包含库：

用法：

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

您可以在此处找到实时演示：https://albertopiras.github.io/threeJS-object-controls/

这是存储库：https://github.com/albertopiras/threeJS-object-controls。

- Alberto Piras