如何在 Three.js 中围绕组的中心旋转 [英] How can I rotate around the center of a group in Three.js

问题描述

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

I've created a group of cubes and I'm trying to figure out how to set the center so I can rotate them.

这是小提琴: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，但我没有明白.

Then in render scene I rotate it around the y-axis, but I need to set the center. I tried translate, but I'm not getting it.

推荐答案

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

You want your group of meshes to rotate around the group center.

一种选择是转换您的网格几何图形，以便作为一个集合，它们以本地原点为中心.

One option is to translate your mesh geometries so, as a collection, they are centered around the local origin.

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

If you don't want to do that, then you can create a grand-parent object pivot, and rotate that.

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

In your case, side1 is the parent of your child meshes. So use this pattern:

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

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

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

In your animation loop, rotate the pivot;

pivot.rotation.z += 0.02;

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

three.js r.77

three.js r.77

这篇关于如何在 Three.js 中围绕组的中心旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！