Three.js: Weird Rotation Of Child Objects

I'm trying to implement an experimental version of a 2x2x2 Rubiks Cube. I have adopted instructions from two previous posts with issues regarding child objects attachment and detac

Solution 1:

I think that the biggest problem was that the active array never got emptied

Also, you are doing extensive matrix update, when there is none really needed

I have redone your javaScript, now it just attaches the cubes, does the rotation, and finally detaches the cubes and resets the rotation.

JavaScript

//Rotate Right face of cubefunctionrotateR()
        {
            //Find cubies that lie in the right face of cube and store them in active[i]for(var i = 0; i < cubies.length; i++) {
                var x = pos(cubies[i]).x; 
                if(x >= 54 && x <= 56)
                    active.push(cubies[i]);
            }

            if (active.length != 4) alert ("active num wrong");
            //attach active[i] cubies to the pivotfor (var i = 0; i < 4; i++)
                THREE.SceneUtils.attach(active[i], scene, pivot);   
            attachedR = true;
        }

//Rotate Upper face of the cubefunctionrotateU()
{
    //Find cubies that lie in the up face of cube and store them in active[i]for(var i = 0; i < cubies.length; i++) {
        var position = pos(cubies[i]); 
        if(position.y >= 54 && position.y <= 56) {
            active.push(cubies[i]);
        }
    }

    if (active.length != 4) alert ("active num wrong");

    //attach active[i] cubies to the pivotfor (var i = 0; i < 4; i++)
        THREE.SceneUtils.attach(active[i], scene, pivot);
    attachedU = true;
}

functiondetachAndReset()
{
    for(var i = 0; i < active.length; i++)
    {
        THREE.SceneUtils.detach(active[i], pivot, scene);
    }
    active.length = 0;
    attachedR = false;
    attachedU = false;
    pivot.rotation.x = 0;
    pivot.rotation.y = 0;

}

        //get world position of cubies[i]functionpos(object)
        {
            var position = newTHREE.Vector3();
            position.setFromMatrixPosition( object.matrixWorld );
            return position;
        }

        functionrender()
        {
            var endAnimation = false;
            //Math.PI / 2 == 1.580000000000001//Rotate Right face of cubeif(attachedR === true)
            {
                pivot.rotation.x += 0.02;
                if(pivot.rotation.x >= Math.PI / 2.0) {
                    pivot.rotation.x = Math.PI / 2.0;
                    endAnimation = true;
                }
            }

            //Math.PI / 2 == 1.580000000000001//Rotate Upper face of cubeif(attachedU === true)
            {
                pivot.rotation.y += 0.02;
                if(pivot.rotation.y >= Math.PI / 2.0) {
                    pivot.rotation.y = Math.PI / 2.0;
                    endAnimation = true;
                }
            } 
            renderer.render(scene, camera);
            if (endAnimation) {
                detachAndReset();
            }
}