three.js 在它的中心围绕 Y 轴旋转 Object3d

Posted 2023-02-27

【中文标题】three.js 在它的中心围绕 Y 轴旋转 Object3d

【英文标题】：three.js rotate Object3d around Y axis at it center

【发布时间】：2013-07-28 06:06:42

【问题描述】：

我在Three.JS 中有一个Object3d，它是一组网格对象。 我想围绕 Y 轴旋转这个组，在它的中心，远离世界中心 (0,0,0)。 我只知道Group.rotate.y += deg 代码，但是对于每个轴方向，它总是围绕 (0,0,0) 旋转对象，而不是我的组中心！ 我怎样才能解决这个问题？

更新：

阅读cmets

【参考方案1】：

见How to rotate a 3D object on axis three.js?

我这样解决了这个问题：

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

包含库：

用法：

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

您可以在这里找到现场演示：https://albertopiras.github.io/threeJS-object-controls/

这里是回购：https://github.com/albertopiras/threeJS-object-controls。

【参考方案2】：

This answer 帮助了我，但代码不太正确。轴必须是单位向量，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);
    

【参考方案3】：

看看 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

【讨论】：

谢谢老兄，但它仍然在 (0,0,0) 点旋转，轴方向！看到这个：threejs.org/examples/canvas_geometry_cube.html我想要这样的东西，但不使用相机旋转，加上我的对象远离（0,0,0）

您可能想重新表述您的问题：我以为您想在任意轴上旋转。再次阅读您的问题和您的评论后，听起来您想将多个对象作为一个组旋转到组的中心。您可以轻松地做到这一点，首先创建您的组并在设置时使用组的轮换：var group = new THREE.Object3D();group.add(object1);group.add(object2);object2.x = 100 在您的代码顶部，然后只需 group.rotation.y += radians

是的，你明白了我的目的，但如果你再次阅读我的问题，我说，我试过group.rotation.y += deg，但它不会围绕组中心旋转！它围绕 (0,0,0) 旋转

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

当然！我向您热烈推荐this course。解释得很好，有练习，而且都使用了three.js。第 4 章：转换就是你所追求的