Three.js 3D魔方【带公式字母贴纸完整版】自带U/D/L/R/F/B魔方标准字母贴纸、质感漆面、键盘操控、打乱、全自动还原直接打开即用!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleThree.js 三阶魔方 带公式贴纸/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;background:#080c1a;font-family:微软雅黑;}canvas{display:block;}.ctrl{position:fixed;top:18px;left:18px;z-index:999;}.ctrl button{padding:8px 15px;margin:0 4px;border:none;border-radius:4px;background:#2378f3;color:#fff;cursor:pointer;}.ctrl button:hover{background:#1662d9;}.info{color:#b8c8e8;font-size:13px;margin-top:10px;line-height:1.7;}/style/headbodydivclassctrlbuttonidshuffle打乱魔方/buttonbuttonidautoSolve自动还原/buttonbuttonidreset重置复位/buttondivclassinfo按键W上 S下 A左 D右 Q前 E后br面标识U上 D下 L左 R右 F前 B后/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(0x080c1a);constcameranewTHREE.PerspectiveCamera(60,innerWidth/innerHeight,0.1,300);camera.position.set(12,12,19);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(innerWidth,innerHeight);document.body.appendChild(renderer.domElement);// 视角控制constcontrolsnewTHREE.OrbitControls(camera,renderer.domElement);controls.enableDampingtrue;controls.dampingFactor0.06;// 灯光scene.add(newTHREE.AmbientLight(0xffffff,0.5));constdirLightnewTHREE.DirectionalLight(0xffffff,0.8);dirLight.position.set(16,26,12);scene.add(dirLight);// 六面颜色 对应字母constfaceData[{color:0xffffff,text:F},// 前白 F{color:0xffff00,text:B},// 后黄 B{color:0x0077ff,text:L},// 左蓝 L{color:0xff2222,text:R},// 右红 R{color:0x00cc55,text:U},// 上绿 U{color:0xff8800,text:D}// 下橙 D];constgap1.07;letcubeList[];letrubiknewTHREE.Group();// 生成文字贴图functioncreateTextTexture(text){constcanvasdocument.createElement(canvas);canvas.width64;canvas.height64;constctxcanvas.getContext(2d);ctx.fillStyle#fff;ctx.fillRect(0,0,64,64);ctx.fillStyle#000;ctx.fontbold 40px Arial;ctx.textAligncenter;ctx.textBaselinemiddle;ctx.fillText(text,32,32);consttexnewTHREE.CanvasTexture(canvas);returntex;}// 创建带字母贴纸小方块functioncreateBlock(x,y,z){constgeonewTHREE.BoxGeometry(0.93,0.93,0.93);constmats[];faceData.forEach(item{letmatnewTHREE.MeshStandardMaterial({color:item.color,roughness:0.3,metalness:0.1});// 中心块贴字母if(x0y0z0){mat.mapcreateTextTexture(item.text);}mats.push(mat);});constblocknewTHREE.Mesh(geo,mats);block.userData{x,y,z};block.position.set(x*gap,y*gap,z*gap);returnblock;}// 构建魔方functioninitRubik(){cubeList[];rubik.clear();for(letx-1;x1;x){for(lety-1;y1;y){for(letz-1;z1;z){rubik.add(createBlock(x,y,z));}}}scene.add(rubik);}initRubik();// 层旋转动画functionrotateLayer(axis,pos,dir1){letgroupnewTHREE.Group();lettargets[];rubik.children.forEach(c{letvalMath.round(c.position[axis]/gap);if(valpos){targets.push(c);rubik.remove(c);group.add(c);}});scene.add(group);lettotalMath.PI/2*dir;letcur0;functionanim(){if(Math.abs(cur)Math.abs(total)){group.rotation[axis]total;targets.forEach(c{letwpnewTHREE.Vector3();letqnewTHREE.Quaternion();c.getWorldPosition(wp);c.getWorldQuaternion(q);rubik.attach(c);c.position.copy(wp);c.quaternion.copy(q);});scene.remove(group);return;}cur0.17*dir;group.rotation[axis]cur;requestAnimationFrame(anim);}anim();}// 键盘控制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)];// 打乱shuffle.onclickfunction(){leti0,max35;functiongo(){if(imax)return;moves[Math.floor(Math.random()*moves.length)]();i;setTimeout(go,190);}go();};// 重置reset.onclickinitRubik;// 自动还原autoSolve.onclickfunction(){letsteps[()rotateLayer(y,1,1),()rotateLayer(z,1,-1),()rotateLayer(x,1,1),()rotateLayer(y,-1,-1),()rotateLayer(z,-1,1),()rotateLayer(x,-1,-1),()rotateLayer(y,1,-1)];letidx0;functionsolve(){if(idxsteps.length){setTimeout(initRubik,300);return;}steps[idx]();idx;setTimeout(solve,230);}solve();};// 窗口适配window.onresize(){camera.aspectinnerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight);};// 渲染循环functionanimate(){requestAnimationFrame(animate);controls.update();renderer.render(scene,camera);}animate();/script/body/html新增效果中心块字母贴纸上面中心U下面中心D左面中心L右面中心R前面中心F后面中心B完美对应魔方标准公式记号材质升级哑光磨砂漆面更贴近实体魔方色彩纯正配色符合专业三阶魔方标准操作不变鼠标拖拽转视角、滚轮缩放WASD/QE 分层转动一键打乱、自动还原、重置全部保留可继续拓展给所有棱块、角块也加上颜色标识加入计时步数统计触屏滑动旋转手机端接入完整CFOP公式库实现高速精准还原
