Utilizing three.js and tween.js, my goal is to develop a Rubik's cube made up of 27 small cubes grouped together for rotation by +Math.PI/2 or -Math.PI/2. To ensure smooth rotation, I am implementing the tween library.
The specific issue I encounter is that if a face undergoes multiple rotations (more than 10), it becomes noticeably misaligned. Despite numerous attempts, I am unable to identify the solution for fixing this problem (view visual image of the issue).
Below is the function responsible for rotating the objects in the sample provided:
function rotate( ii ) {
// Create a temporary object to group multiple objects together for rotation
var rotationGroup = new THREE.Object3D();
scene.add(rotationGroup);
THREE.SceneUtils.attach( box[ ii ], scene, rotationGroup );
rotationGroup.updateMatrixWorld();
// Check for any active animations, and stop the function if so
if( TWEEN.getAll().length > 0 )
return;
// Create the animation tween object
var tween;
var duration = 300;
var radiants = Math.PI/2;
tween = new TWEEN.Tween( rotationGroup.rotation ).to( { z: radiants }, duration );
tween.easing( TWEEN.Easing.Quadratic.InOut );
tween.onComplete(
function() {
THREE.SceneUtils.detach( box[ ii ], rotationGroup, scene );
box[ii].updateMatrixWorld();
scene.remove(rotationGroup);
}
);
// Start the animation
tween.start();
}
I am currently unable to create a functioning snippet on Stack Overflow, so I have included some code below replicating the issue within the example scenario provided:
var camera, scene, renderer;
var canvas;
var cameraControls;
var clock = new THREE.Clock();
var box = [];
// Additional functions and setup omitted for brevity
function rotate( ii ) {
var rotationGroup = new THREE.Object3D();
scene.add(rotationGroup);
THREE.SceneUtils.attach( box[ ii ], scene, rotationGroup );
rotationGroup.updateMatrixWorld();
if( TWEEN.getAll().length > 0 )
return;
var tween;
var duration = 300;
var radiants = Math.PI/2;
tween = new TWEEN.Tween( rotationGroup.rotation ).to( { z: radiants }, duration );
tween.easing( TWEEN.Easing.Quadratic.InOut );
tween.onComplete(
function() {
THREE.SceneUtils.detach( box[ ii ], rotationGroup, scene );
box[ii].updateMatrixWorld();
scene.remove(rotationGroup);
}
);
tween.start();
}
// Additional scene setup and cube creation code
Logging the rotation values of rotationGroup and box[ii] to the console reveals a slight discrepancy in their rotations, with the Object3D rotation introducing a minor error on the fourth decimal digit.