如何在 Three.js 中围绕组的中心旋转答案

【问题标题】：How can I rotate around the center of a group in Three.js如何在 Three.js 中围绕组的中心旋转
【发布时间】：2016-10-13 05:50:38
【问题描述】：

我已经创建了一组立方体，我正在尝试弄清楚如何设置中心以便我可以旋转它们。

这里是小提琴：https://jsfiddle.net/of1vfhzz/

我在这里添加立方体：

side1 = new THREE.Object3D();
addCube({ name: 'side1topleft', x: -8.5, y: 7.5, z: 5 });
addCube({ name: 'side1topmiddle', x: -4, y: 7.5, z: 5 });
addCube({ name: 'side1topright', x: .5, y: 7.5, z: 5 });
addCube({ name: 'side1middleleft', x: -8.5, y: 3, z: 5 });
addCube({ name: 'side1middlemiddle', x: -4, y: 3, z: 5 });
addCube({ name: 'side1middleright', x: .5, y: 3, z: 5 });
addCube({ name: 'side1bottomleft', x: -8.5, y: -1.5, z: 5 });
addCube({ name: 'side1bottommiddle', x: -4, y: -1.5, z: 5 });
addCube({ name: 'side1bottomright', x: .5, y: -1.5, z: 5 });
scene.add(side1);

function addCube(data) {
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = data.x
    cube.position.y = data.y
    cube.position.z = data.z
    cube.rotation.set(0, 0, 0);
    cube.name = data.name;
    side1.add(cube);
}

然后在渲染场景中我围绕y轴旋转它，但我需要设置中心。我试过translate，但没听明白。

【问题讨论】：

标签： three.js rotation translate-animation

【解决方案1】：

您希望您的网格组围绕组中心旋转。

一种选择是转换您的网格几何体，因此，作为一个集合，它们以本地原点为中心。

如果你不想这样做，那么你可以创建一个祖父对象pivot，然后旋转它。

在您的情况下，side1 是您的子网格的父级。所以使用这个模式：

var pivot = new THREE.Group();
scene.add( pivot );

pivot.add( side1 );
side1.position.set( 4, - 3, - 5 ); // the negative of the group's center

在您的动画循环中，旋转枢轴；

pivot.rotation.z += 0.02;

小提琴：https://jsfiddle.net/of1vfhzz/1/

three.js r.77

【讨论】：