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

如何在Three.js中围绕组的中心旋转,three.js,rotation,translate-animation,Three.js,Rotation,Translate Animation,我已经创建了一组立方体,我正试图找出如何设置中心,以便旋转它们 这是小提琴: 在这里,我添加了多维数据集: 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:

我已经创建了一组立方体,我正试图找出如何设置中心,以便旋转它们

这是小提琴:

在这里,我添加了多维数据集:

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轴旋转它,但我需要设置中心。我尝试了
转换
,但我不明白。

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

一个选项是平移网格几何体,使其作为一个集合以局部原点为中心

如果您不想这样做,那么您可以创建一个父级对象
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;
小提琴:

3.js r.77