《 Three.js 三阶魔方：完整版+字母贴纸+计时步数》

Three.js 三阶魔方【完整版字母贴纸计时步数】!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleThree.js 三阶魔方 计时版/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;background:#080c1a;font-family:微软雅黑;}canvas{display:block;}.top-ui{position:fixed;top:15px;left:15px;z-index:999;}.btn-group button{padding:8px 14px;margin:0 4px;border:none;border-radius:4px;background:#2378f3;color:#fff;cursor:pointer;}.btn-group button:hover{background:#1662d9;}.data-box{margin-top:10px;padding:8px 12px;background:rgba(0,0,0,0.4);border-radius:4px;color:#fff;font-size:14px;}.info-text{color:#b8c8e8;font-size:13px;margin-top:8px;line-height:1.6;}/style/headbodydivclasstop-uidivclassbtn-groupbuttonidstartTimer开始计时/buttonbuttonidstopTimer暂停计时/buttonbuttonidresetAll全盘重置/button/divdivclassdata-box用时spanidtimeText00:00.00/spannbsp;nbsp;步数spanidstepText0/span/divdivclassinfo-textW上 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},{color:0xffff00,text:B},{color:0x0077ff,text:L},{color:0xff2222,text:R},{color:0x00cc55,text:U},{color:0xff8800,text:D}];constgap1.07;letcubeList[];letrubiknewTHREE.Group();// 计时步数变量lettimerRunningfalse;letstartTimenull;lettimerIntervalnull;letmoveStep0;consttimeTextdocument.getElementById(timeText);conststepTextdocument.getElementById(stepText);// 格式化时间functionformatTime(ms){letsMath.floor(ms/1000);letminString(Math.floor(s/60)).padStart(2,0);letsecString(s%60).padStart(2,0);letmsStrString(Math.floor((ms%1000)/10)).padStart(2,0);return${min}:${sec}.${msStr};}// 开始计时document.getElementById(startTimer).onclick(){if(timerRunning)return;timerRunningtrue;startTimeDate.now();timerIntervalsetInterval((){letnowDate.now()-startTime;timeText.innerTextformatTime(now);},10);};// 暂停计时document.getElementById(stopTimer).onclick(){timerRunningfalse;clearInterval(timerInterval);};// 生成字母贴图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);returnnewTHREE.CanvasTexture(canvas);}// 创建魔方小块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);// 转动一次1步moveStep;stepText.innerTextmoveStep;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;}});// 全盘重置document.getElementById(resetAll).onclick(){clearInterval(timerInterval);timerRunningfalse;timeText.innerText00:00.00;moveStep0;stepText.innerText0;initRubik();};// 窗口适配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 公式字母贴纸✅ 磨砂真实魔方材质✅ 键盘 W/A/S/D/Q/E 自由转层✅ 鼠标拖拽视角 滚轮缩放✅竞速计时系统分:秒.毫秒✅自动统计转动步数✅ 开始/暂停计时✅ 一键全盘重置魔方时间步数清零✅ 顺滑旋转动画✅ 全屏自适应直接保存 HTML 打开就能玩完全对标线上魔方竞速小游戏~