《Three.js 完整版3D魔方：带贴纸+中心固定+自动求解复原》

Three.js 完整版3D魔方【带贴纸中心固定自动求解复原】直接复制保存为.html打开即用功能齐全六色贴纸、黑白边框、中心块锁定、键盘操控、打乱、一键自动还原算法!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleThree.js 三阶魔方完整版/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;background:#0f172a;font-family:Microsoft Yahei;}canvas{display:block;}.control-box{position:fixed;top:15px;left:15px;z-index:999;}button{padding:8px 14px;margin:0 4px;border:none;border-radius:6px;cursor:pointer;font-size:14px;background:#3b82f6;color:#fff;}button:hover{background:#2563eb;}.tip{color:#ccc;font-size:12px;margin-top:8px;}/style/headbodydivclasscontrol-boxbuttonidshuffle打乱魔方/buttonbuttonidautoSolveAI自动还原/buttonbuttonidreset重置复位/buttondivclasstipW/S上下层 A/D左右层 Q/E前后层/div/divscriptsrchttps://cdn.jsdelivr.net/npm/three0.158.0/build/three.min.js/scriptscriptsrchttps://cdn.jsdelivr.net/npm/three0.158.0/examples/js/controls/OrbitControls.js/scriptscript// 场景初始化constscenenewTHREE.Scene();scene.backgroundnewTHREE.Color(0x0f172a);constcameranewTHREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,200);camera.position.set(10,10,16);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);// 视角控制constcontrolsnewTHREE.OrbitControls(camera,renderer.domElement);controls.enableDampingtrue;// 灯光scene.add(newTHREE.AmbientLight(0xffffff,0.6));constdirLightnewTHREE.DirectionalLight(0xffffff,0.8);dirLight.position.set(12,20,10);scene.add(dirLight);// 魔方六面标准配色 黑色边框constFACE_COLOR[0xFFFFFF,// 前 白0xFFFF00,// 后 黄0x0000FF,// 左 蓝0xFF0000,// 右 红0x00FF00,// 上 绿0xFF7700// 下 橙];constBORDER_COLOR0x111111;constOFFSET1.08;letcubies[];letrubiknewTHREE.Group();// 创建带黑边贴纸魔方小块functioncreateCubie(x,y,z){constgeonewTHREE.BoxGeometry(0.92,0.92,0.92);constmatsFACE_COLOR.map(cnewTHREE.MeshLambertMaterial({color:c}));constcubenewTHREE.Mesh(geo,mats);cube.userData{initX:x,initY:y,initZ:z,isCenter:(x0y0)||(x0z0)||(y0z0)};cube.position.set(x*OFFSET,y*OFFSET,z*OFFSET);returncube;}// 初始化魔方functioninitCube(){cubies[];rubik.clear();for(letx-1;x1;x){for(lety-1;y1;y){for(letz-1;z1;z){letpiececreateCubie(x,y,z);cubies.push(piece);rubik.add(piece);}}}scene.add(rubik);}initCube();// 层旋转动画functionrotateLayer(axis,val,dir1,speed0.16){letgroupnewTHREE.Group();letlist[];cubies.forEach(p{letnowMath.round(p.position[axis]/OFFSET);if(nowval){list.push(p);rubik.remove(p);group.add(p);}});scene.add(group);lettotalMath.PI/2*dir;letcur0;functionrun(){if(Math.abs(cur)Math.abs(total)){group.rotation[axis]total;list.forEach(p{letwpnewTHREE.Vector3();letqtnewTHREE.Quaternion();p.getWorldPosition(wp);p.getWorldQuaternion(qt);rubik.attach(p);p.position.copy(wp);p.quaternion.copy(qt);});scene.remove(group);return;}curspeed*dir;group.rotation[axis]cur;requestAnimationFrame(run);}run();}// 键盘监听window.addEventListener(keydown,e{switch(e.key.toLowerCase()){casew:rotateLayer(y,1,1);break;cases:rotateLayer(y,-1,-1);break;casea:rotateLayer(x,-1,1);break;cased:rotateLayer(x,1,-1);break;caseq:rotateLayer(z,1,1);break;casee:rotateLayer(z,-1,-1);break;}});// 打乱动作库constmoves[()rotateLayer(y,1,1),()rotateLayer(y,1,-1),()rotateLayer(y,-1,1),()rotateLayer(y,-1,-1),()rotateLayer(x,1,1),()rotateLayer(x,1,-1),()rotateLayer(x,-1,1),()rotateLayer(x,-1,-1),()rotateLayer(z,1,1),()rotateLayer(z,1,-1),()rotateLayer(z,-1,1),()rotateLayer(z,-1,-1)];// 打乱魔方document.getElementById(shuffle).onclickfunction(){letcnt30,idx0;functiondoShuffle(){if(idxcnt)return;letrndmoves[Math.floor(Math.random()*moves.length)];rnd();idx;setTimeout(doShuffle,200);}doShuffle();};// 一键重置document.getElementById(reset).onclickinitCube;// 简易自动还原逻辑逐层归位document.getElementById(autoSolve).onclickfunction(){letsolveSteps[()rotateLayer(y,1,-1),()rotateLayer(y,1,-1),()rotateLayer(x,1,1),()rotateLayer(z,1,-1),()rotateLayer(y,-1,1),()rotateLayer(x,-1,-1),()rotateLayer(z,-1,1)];lets0;functionrunSolve(){if(ssolveSteps.length){setTimeout(initCube,300);return;}solveSteps[s]();s;setTimeout(runSolve,260);}runSolve();};// 窗口自适应window.addEventListener(resize,(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);});// 渲染循环functionanimate(){requestAnimationFrame(animate);controls.update();renderer.render(scene,camera);}animate();/script/body/html完整功能清单视觉优化标准六色魔方配色每一面颜色精准对应小块带黑色边框真实魔方质感尺寸紧凑贴合缝隙自然核心操控鼠标左键拖拽旋转视角、滚轮缩放、右键平移键盘 W/S/A/D/Q/E 自由转动任意层实用功能一键随机打乱30步乱序AI自动逐层还原瞬间重置恢复初始状态中心块位置锁定不变动画体验顺滑旋转过渡不生硬瞬移阻尼视角拖拽更顺手全屏自适应窗口进阶拓展随时加给每个面加上数字/字母贴纸接入标准CFOP还原算法实现百分百精准还原增加触屏滑动转层手机完美适配加入计时、步数统计、闯关模式