`function rotateFace(axis, layer, direction) {
if (isAnimating) return;
isAnimating = true;

const angle = Math.PI / 2 * direction;  // 90도 회전
const rotationMatrix = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(...axis), angle);

// 회전할 블록들을 그룹화
const cubesToRotate = cubes.filter(cube => {
    return Math.round(cube.userData.originalPosition[layer]) === Math.round(selectedFace.object.position[layer]);
});

// 그룹 생성
const group = new THREE.Group();
cubesToRotate.forEach(cube => group.add(cube));
scene.add(group);

const animationDuration = 300; // milliseconds
const startTime = performance.now();

function animate(time) {
    const elapsedTime = time - startTime;
    const progress = Math.min(elapsedTime / animationDuration, 1);
    const currentAngle = angle * progress;

    // 그룹 회전
    group.rotation[axis[0] === 1 ? 'x' : axis[1] === 1 ? 'y' : 'z'] = currentAngle;

    if (progress < 1) {
        requestAnimationFrame(animate);
    } else {
        // 최종 회전 및 위치 조정
        group.rotation[axis[0] === 1 ? 'x' : axis[1] === 1 ? 'y' : 'z'] = angle;
        group.updateMatrixWorld(true);

        // 그룹에서 큐브를 씬으로 옮기기 전, 각 큐브의 최종 회전 및 위치 설정
        while (group.children.length > 0) {
            const cube = group.children[0];
            
            // 그룹의 변환을 적용하여 최종 위치와 회전을 큐브에 설정
            cube.applyMatrix4(group.matrixWorld);
            
            // 큐브의 회전 행렬을 정렬하여 회전이 180도 되는 문제 방지
            cube.rotation.setFromRotationMatrix(cube.matrix);

            // 원래 위치 정보 업데이트
            cube.userData.originalPosition.copy(cube.position);

            // 그룹에서 큐브를 씬으로 다시 옮김
            scene.attach(cube);
        }

        scene.remove(group); // 빈 그룹을 씬에서 제거
        isAnimating = false;
    }

    renderer.render(scene, camera);
}

requestAnimationFrame(animate);

}`

The rotation is 90 degrees, but the color is changing as if it were 180 degrees, and the block disappears when it is rotated

Want to move like Rubik’s Cube

Troubleshooting Checks and Changing Multiple Values