Rotate OBject3D group on it's center

Questions
,
1

Hi All,
I am new to Three.Js and creating a Rubik’s cube for my class project. Attached is the demo of the work I was able to do.


I did tried a lot of things to rotate the top layer around its center, but it always rotates around a point. So I’ve used the following workaround which just works but not at all realistic.

topSide = new THREE.Object3D();
		for (var i = 0; i < topLayer.length; i++) {
			topSide.add(topLayer[i]);
		}

	scene.add(topSide);

	var rotFactor = 0;

	renderer.domElement.onclick = function(e){

		rotFactor += 1;

		topSide.rotation.y += Math.PI/2;

		if (rotFactor === 1) {
			topSide.position.set(11,0,-11);
		}
			
		if (rotFactor === 2) {
			topSide.position.set(0,0,-22);
		}

		if (rotFactor === 3) {
			topSide.position.set(-11,0,-11);
		}

		if (rotFactor === 4) {
			topSide.position.set(0,0,0);
			rotFactor = 0;
		}

	};

	animate();

Can anyone please help me out in making it rotate around it’s center. Something like in this example (Look at how the top layer is rotating around it’s center)

Thanks in advance.

2

How are you constructing your model? Have you considered centering the geometry out to 0,0,0 in blender before importing in to 3js?

3

That demo has a TON of stuff going on in it, not to mention drawing the shapes from scratch.

What you want to do is create a group for each face with the position in the center. For testing purposes leave cubes inside.
Dragging rotates the group around the axis.

Once you have that, then you need to learn to move items in and out of groups and how to set their world and relative positions.
If it’s dragging Left Face, move cubes into Lface group (make child of), Correct the position, etc.

The cube game logic is another thing, and again that example is REALLY complicated

4

Following is the code I am using for constructing the model. I am not importing the model

function getCube(colorPallete){

 	var geometry = new THREE.BoxGeometry( 10, 10, 10 ).toNonIndexed(); 

	var material = new THREE.MeshLambertMaterial( { vertexColors: true, 
	                                              polygonOffset: true, 
	                                              polygonOffsetFactor: 1, 
	                                              polygonOffsetUnits: 1} );

	var positionAttribute = geometry.getAttribute( 'position' );
        
    var colors = [];
    var color = new THREE.Color();
        
    for ( let i = 0; i < positionAttribute.count; i += 6 ) {
        
            color.set( colorPallete[(i/6)] );
            
            colors.push( color.r, color.g, color.b );
            colors.push( color.r, color.g, color.b );
            colors.push( color.r, color.g, color.b );
            colors.push( color.r, color.g, color.b );
            colors.push( color.r, color.g, color.b );
            colors.push( color.r, color.g, color.b );
        
    }

    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

    var mesh = new THREE.Mesh( geometry, material );

    var edges = new THREE.EdgesGeometry( geometry );

    var lineMat = new LineMaterial( {

	  color: 0x000000,
	  linewidth: 2,

	} );

	var lineGeom = new LineSegmentsGeometry().fromEdgesGeometry( edges );

	var line = new Line2( lineGeom, lineMat );
	line.computeLineDistances();
	line.scale.set( 1, 1, 1 );

	return [mesh, lineMat, line];

};

Thanks for the response.

5

Yes exactly, that is something I am messing up. I did create a group and added cubes. If you have any examples you can point to for the translation it would be really helpful.
In any case. Thank you so much