pivoting around the center of a control in three js

Question

I asked a similar question recently but I am still struggling figuring out how to set the center of a three js control so that it can rotate. I keep finding examples about geometry, bounding boxes, pivot points, matrixes. but I can't seem to find a clear answer anyway here is my example. I am trying to make a rubiks cube but as you can see my first side is not rotating in the middle. I am hoping someone can give some steps to set the center of a control so that I can rotate the control. here is my sample http://codepen.io/anon/pen/gMMRKJ (you can rotate the cube by holding down the mouse and moving)

here Is where I make the rubik cube and my first control (the spinning side)

// add all the rubik 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);

but after that I'm not sure how to set the center of side1 so that it will rotate correctly.

oh thanks well that was easy, but say for example I wanted to rotate it around a different point how would you go about that? — Bryan Dellinger, Jun 16 '16 at 00:56

score 1 · Answer 1 · answered Jun 16 '16 at 10:11

If you want to rotate around the center of something you could find the center point by by using a bounding box object (THREE.Box3).

For example to find the middle of some mesh:

var boundingBox = new THREE.Box3().setFromObject( mesh );
var center = boundingBox.center();

Now you can use this center point for rotating. Hope this will help you a bit to build a nice solution for your Rubik's cube

pivoting around the center of a control in three js

1 Answers1