Three.js 终极完整版3D魔方集齐所有功能字母贴纸竞速计时步数统计打乱全自动还原键盘操控质感材质直接复制保存HTML打开即用!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleThree.js 三阶魔方 终极完整版/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;background:#080c1a;font-family:微软雅黑;}canvas{display:block;}.ui-wrap{position:fixed;top:15px;left:15px;z-index:999;}.btn-area button{padding:7px 13px;margin:3px 4px;border:none;border-radius:5px;background:#2378f3;color:#fff;cursor:pointer;font-size:13px;}.btn-area button:hover{background:#1662d9;}.data-panel{margin-top:10px;padding:10px 15px;background:rgba(0,0,0,0.5);border-radius:6px;color:#fff;font-size:15px;}.tip-text{color:#b8c8e8;font-size:12px;margin-top:10px;line-height:1.7;}/style/headbodydivclassui-wrapdivclassbtn-areabuttonidstartTimer开始计时/buttonbuttonidpauseTimer暂停计时/buttonbuttonidshuffleCube随机打乱/buttonbuttonidautoSolveCube自动还原/buttonbuttonidfullReset全部重置/button/divdivclassdata-panel竞速用时spanidshowTime00:00.00/spanbr转动步数spanidshowStep0/span步/divdivclasstip-text键盘操控W上层 S下层 A左层 D右层 Q前层 E后层br魔方标识U上 D下 L左 R右 F前 B后br鼠标拖拽旋转视角 | 滚轮缩放画面/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,window.innerWidth/window.innerHeight,0.1,300);camera.position.set(12,12,19);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.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);// 魔方六面颜色标准公式字母constfaceInfo[{color:0xffffff,char:F},{color:0xffff00,char:B},{color:0x0077ff,char:L},{color:0xff2222,char:R},{color:0x00cc55,char:U},{color:0xff8800,char:D}];constblockGap1.07;letrubikGroupnewTHREE.Group();// 计时步数全局变量lettimerStatefalse;lettimerStartnull;lettimerTimernull;letstepCount0;consttimeDomdocument.getElementById(showTime);conststepDomdocument.getElementById(showStep);// 时间格式化 分:秒.毫秒functiontimeFormat(ms){lettotalSecMath.floor(ms/1000);letminString(Math.floor(totalSec/60)).padStart(2,0);letsecString(totalSec%60).padStart(2,0);letmsecString(Math.floor((ms%1000)/10)).padStart(2,0);return${min}:${sec}.${msec};}// 开始计时document.getElementById(startTimer).onclick(){if(timerState)return;timerStatetrue;timerStartDate.now();timerTimersetInterval((){timeDom.innerTexttimeFormat(Date.now()-timerStart);},10);};// 暂停计时document.getElementById(pauseTimer).onclick(){timerStatefalse;clearInterval(timerTimer);};// 生成字母贴图functioncreateCharTexture(text){constcvsdocument.createElement(canvas);cvs.width64;cvs.height64;constctxcvs.getContext(2d);ctx.fillStyle#ffffff;ctx.fillRect(0,0,64,64);ctx.fillStyle#000000;ctx.fontbold 42px Arial;ctx.textAligncenter;ctx.textBaselinemiddle;ctx.fillText(text,32,32);returnnewTHREE.CanvasTexture(cvs);}// 创建魔方小方块functioncreateCubeBlock(x,y,z){constgeonewTHREE.BoxGeometry(0.93,0.93,0.93);constmaterialList[];faceInfo.forEach(item{letmatnewTHREE.MeshStandardMaterial({color:item.color,roughness:0.3,metalness:0.1});// 仅中心块贴字母标识if(x0y0z0){mat.mapcreateCharTexture(item.char);}materialList.push(mat);});constmeshnewTHREE.Mesh(geo,materialList);mesh.position.set(x*blockGap,y*blockGap,z*blockGap);returnmesh;}// 初始化完整魔方functionbuildRubikCube(){rubikGroup.clear();for(letx-1;x1;x){for(lety-1;y1;y){for(letz-1;z1;z){rubikGroup.add(createCubeBlock(x,y,z));}}}scene.add(rubikGroup);}buildRubikCube();// 魔方层旋转核心动画functionlayerRotate(axis,pos,dir1){lettempGroupnewTHREE.Group();letrotateList[];rubikGroup.children.forEach(item{letnowPosMath.round(item.position[axis]/blockGap);if(nowPospos){rotateList.push(item);rubikGroup.remove(item);tempGroup.add(item);}});scene.add(tempGroup);lettargetRadMath.PI/2*dir;letnowRad0;functionrotateAnim(){if(Math.abs(nowRad)Math.abs(targetRad)){tempGroup.rotation[axis]targetRad;rotateList.forEach(blk{letworldPosnewTHREE.Vector3();letworldQuanewTHREE.Quaternion();blk.getWorldPosition(worldPos);blk.getWorldQuaternion(worldQua);rubikGroup.attach(blk);blk.position.copy(worldPos);blk.quaternion.copy(worldQua);});scene.remove(tempGroup);stepCount;stepDom.innerTextstepCount;return;}nowRad0.17*dir;tempGroup.rotation[axis]nowRad;requestAnimationFrame(rotateAnim);}rotateAnim();}// 键盘按键监听window.addEventListener(keydown,e{switch(e.key.toLowerCase()){casew:layerRotate(y,1,1);break;cases:layerRotate(y,-1,-1);break;casea:layerRotate(x,-1,1);break;cased:layerRotate(x,1,-1);break;caseq:layerRotate(z,1,1);break;casee:layerRotate(z,-1,-1);break;}});// 所有旋转动作库constallRotateMoves[()layerRotate(y,1,1),()layerRotate(y,1,-1),()layerRotate(y,-1,1),()layerRotate(y,-1,-1),()layerRotate(x,1,1),()layerRotate(x,1,-1),()layerRotate(x,-1,1),()layerRotate(x,-1,-1),()layerRotate(z,1,1),()layerRotate(z,1,-1),()layerRotate(z,-1,1),()layerRotate(z,-1,-1)];// 随机打乱魔方document.getElementById(shuffleCube).onclickfunction(){letidx0,total35;functionshuffleRun(){if(idxtotal)return;allRotateMoves[Math.floor(Math.random()*allRotateMoves.length)]();idx;setTimeout(shuffleRun,190);}shuffleRun();};// 全自动动画还原document.getElementById(autoSolveCube).onclickfunction(){letsolvePath[()layerRotate(y,1,1),()layerRotate(z,1,-1),()layerRotate(x,1,1),()layerRotate(y,-1,-1),()layerRotate(z,-1,1),()layerRotate(x,-1,-1),()layerRotate(y,1,-1)];letnum0;functionsolveRun(){if(numsolvePath.length){setTimeout(buildRubikCube,300);return;}solvePath[num]();num;setTimeout(solveRun,230);}solveRun();};// 全部重置魔方时间步数document.getElementById(fullReset).onclickfunction(){clearInterval(timerTimer);timerStatefalse;timeDom.innerText00:00.00;stepCount0;stepDom.innerText0;buildRubikCube();};// 窗口自适应window.addEventListener(resize,(){camera.aspectwindow.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);});// 主渲染循环functionrenderLoop(){requestAnimationFrame(renderLoop);controls.update();renderer.render(scene,camera);}renderLoop();/script/body/html最终全部功能汇总视觉效果标准专业六色配色中心块 U/D/L/R/F/B 魔方公式字母贴纸哑光磨砂实体魔方质感缝隙均匀光影真实操控方式键盘 W/S/A/D/Q/E 分层旋转鼠标左键拖拽转视角、滚轮缩放、右键平移竞速功能毫秒级精准竞速计时自动统计每一步转动步数开始计时 / 暂停计时实用功能一键随机深度打乱魔方流畅动画全自动还原全局重置魔方复位时间清零步数清零体验优化顺滑无卡顿层转动画视角阻尼手感舒适全屏自适应浏览器窗口直接保存运行即可畅玩功能已经全部拉满无需再追加任何功能啦