three.js - Three.js：在对象的中心旋转

Question

我修改了这个单一的旋转立方体，使其在 Object3D 中包含 3 个立方体

http://jsfiddle.net/VsWb9/1243/

在上面的例子中，它使用了第一个立方体。我需要它在对象的确切中心在一个轴上旋转。

object3D 代码

  geometry = new THREE.CubeGeometry(50, 50, 50);
    material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Object3D();
    mesh1 = new THREE.Mesh(geometry, material);
    mesh1.position.x = 50;
    mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.x = 100;
    mesh3 = new THREE.Mesh(geometry, material);

    mesh.add(mesh1);
    mesh.add(mesh2);
    mesh.add(mesh3);

    scene.add(mesh);

这里是旋转

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

编辑：只是说这是一个演示问题的示例，我的实际代码对象包含许多不同大小的形状。

Answer 1

您可以定义中心的坐标。

mesh.position.set( center.x, center.y, center.z );
mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( -center.x, -center.y, -center.z ) );

Answer 2

真正简单的方法是稍微不同地放置你的立方体，而不是设置

mesh1.position.x = 50;
mesh2.position.x = 100;

并将 mesh3 保留为默认值为 0 的 x，您可以像这样设置它们：

mesh1.position.x = -50;
mesh3.position.x = 50;

这将使中心框也位于场景的中心。

jsFiddle显示它正在工作。