My current project involves implementing an experimental version of a 2x2x2 Rubik's Cube. I have gathered insights from two previous posts that addressed issues related to attaching and detaching child objects in Three.js: Three.js: Proper way to add and remove child objects using THREE.SceneUtils.attach/detach functions and Three.js: Adding and Removing Children of Rotated Objects. By following these references, I have managed to rotate two faces independently with success.
However, when I try to replicate the same rotations through my code, I encounter unexpected results as the rotations are applied sequentially. This anomaly suggests that there might be inaccuracies in the transformations happening somewhere in the process. Despite thoroughly checking every matrix associated with the parent object, the issue persists after each rotation ends. Surprisingly, individual rotations work accurately, indicating that I managed to get about half of the steps right :). You can view a sample of the 2x2x2 cube here.
Here are snippets of the relevant code: --> For the event handler for rotating the right face
function rotateR()
{
for(var i = 0; i < cubies.length; i++)
if((pos(cubies[i]).x >= 53) && (pos(cubies[i]).x <= 55))
active.push(cubies[i]);
for(var i = 0; i < active.length; i++)
console.log(active[i]);
//reset pivot rotation
pivot.rotation.set( 0, 0, 0 );
pivot.updateMatrixWorld();
//attach active[i] cubies to the pivot
for (var i = 0; i < 4; i++)
THREE.SceneUtils.attach(active[i], scene, pivot);
console.log("attached!");
attachedR = true;
}
In the render function:
if((pivot.rotation.x <= 1.580000000000001) && (attachedR === true))
{
pivot.rotation.x += 0.02;
console.log(pivot.rotation.x);
if(pivot.rotation.x == 1.580000000000001)
{
attachedR = false;
for(var i = 0; i < active.length; i++)
console.log(pos(active[i]).x + ", " + pos(active[i]).y + ", " + pos(active[i]).z);
//Detach active[i] cubies from the parent pivot
pivot.updateMatrixWorld();
for(var i = 0; i < active.length; i++)
{
active[i].updateWorldMatrix();
THREE.SceneUtils.detach(active[i], pivot, scene);
}
}
}
The event handler and incremental animation functions for the Upper face follow the same pattern and reside in the same location within the code. The pos(cubies[i]) function provides the world coordinates of the mesh object. Where could I potentially be making errors in the rotational aspects of the cube faces? Any assistance would be greatly appreciated. Thank you.