I've created a group of cubes and I'm trying to figure out how to set the center so I can rotate them.
Here is the fiddle: https://jsfiddle.net/of1vfhzz/
Here I add the cubes:
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);
}
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.
If you don't want to do that, then you can create a grand-parent object pivot
, and rotate that.
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;
fiddle: https://jsfiddle.net/of1vfhzz/1/
three.js r.77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With