js实现魔方
实现魔方的JavaScript思路
使用Three.js库创建3D魔方模型，通过WebGL渲染实现交互式旋转效果。Three.js简化了WebGL的复杂操作，适合构建此类3D项目。
核心代码结构
初始化场景、相机和渲染器：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);创建魔方小方块单元：
function createCubelet(x, y, z) {
const geometry = new THREE.BoxGeometry(0.95, 0.95, 0.95);
const materials = [
new THREE.MeshBasicMaterial({ color: 0xffffff }), // 右
new THREE.MeshBasicMaterial({ color: 0xff7f00 }), // 左
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 上
new THREE.MeshBasicMaterial({ color: 0xffffff }), // 下
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 前
new THREE.MeshBasicMaterial({ color: 0xff0000 }) // 后
];
const cubelet = new THREE.Mesh(geometry, materials);
cubelet.position.set(x, y, z);
return cubelet;
}魔方数据结构
使用三维数组存储魔方状态：
const cubeSize = 3;
const rubiksCube = [];
for (let x = -1; x <= 1; x++) {
rubiksCube[x+1] = [];
for (let y = -1; y <= 1; y++) {
rubiksCube[x+1][y+1] = [];
for (let z = -1; z <= 1; z++) {
if (x !== 0 || y !== 0 || z !== 0) {
rubiksCube[x+1][y+1][z+1] = createCubelet(x, y, z);
scene.add(rubiksCube[x+1][y+1][z+1]);
}
}
}
}旋转逻辑实现
处理魔方面旋转的动画：
function rotateLayer(axis, index, clockwise) {
const rotationGroup = new THREE.Group();
const angle = clockwise ? Math.PI/2 : -Math.PI/2;
// 收集需要旋转的小方块
for (let i = 0; i < cubeSize; i++) {
for (let j = 0; j < cubeSize; j++) {
let cubelet;
if (axis === 'x') cubelet = rubiksCube[index][i][j];
if (axis === 'y') cubelet = rubiksCube[i][index][j];
if (axis === 'z') cubelet = rubiksCube[i][j][index];
if (cubelet) {
scene.remove(cubelet);
rotationGroup.add(cubelet);
}
}
}
scene.add(rotationGroup);
animateRotation(rotationGroup, axis, angle, () => {
// 更新数据结构...
});
}交互控制
添加鼠标和键盘事件监听：
document.addEventListener('keydown', (event) => {
switch(event.key) {
case 'u': rotateLayer('y', 2, true); break;
case 'd': rotateLayer('y', 0, false); break;
case 'l': rotateLayer('x', 0, false); break;
case 'r': rotateLayer('x', 2, true); break;
case 'f': rotateLayer('z', 2, true); break;
case 'b': rotateLayer('z', 0, false); break;
}
});动画渲染循环
实现平滑旋转动画：
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();完整项目建议
- 使用面向对象方式重构代码，创建RubiksCube类管理状态
- 添加触摸屏支持实现移动端兼容
- 实现自动打乱和求解算法
- 添加纹理贴图代替纯色材质
- 开发计时器和步数记录功能
Three.js文档和示例项目是学习3D魔方实现的优质资源，GitHub上有多个开源实现可供参考。
