Despite asking a similar question recently, I am still struggling to figure out how to properly set the center of a three js control in order for it to rotate as intended. I have come across various examples involving geometry, bounding boxes, pivot points, and matrices, but none of them have provided a clear answer. In my specific case, I am trying to create a Rubik's cube, but the first side is not rotating at the center. I am hopeful that someone can provide guidance on how to set the center of the control so I can achieve the desired rotation effect. Here is a link to my example: http://codepen.io/anon/pen/gMMRKJ (you can rotate the cube by holding down the mouse and moving it).
Here is the code where I am creating the Rubik's cube and the first control (the spinning side):
// Adding all the Rubik's cube elements
var gpboyw = [];
gpboyw.push(new THREE.MeshBasicMaterial({ color: green }));
gpboyw.push(new THREE.MeshBasicMaterial({ color: purple }));
gpboyw.push(new THREE.MeshBasicMaterial({ color: blue }));
gpboyw.push(new THREE.MeshBasicMaterial({ color: orange }));
gpboyw.push(new THREE.MeshBasicMaterial({ color: yellow }));
gpboyw.push(new THREE.MeshBasicMaterial({ color: white }));
side1 = new THREE.Object3D();
for (var x = 0; x < 3; x++) {
for (var y = 0; y < 3; y++) {
for (var z = 0; z < 3; z++) {
var faceMaterial = new THREE.MeshFaceMaterial(gpboyw);
var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
var cube = new THREE.Mesh(cubeGeom, faceMaterial);
var xp = x * 3 - 3;
var yp = y * 3;
var zp = z * 3 - 3;
cube.position.set(xp,yp,zp)
scene.add(cube);
if (z === 0) {
console.log('x: ' + xp + ' y: ' + yp + ' z: ' + zp);
side1.add(cube);
}
}
}
}
scene.add(side1);
However, I am uncertain about how to properly set the center of side1 to ensure that it rotates correctly.