《Three.js 三阶魔方 最终完整版》

Three.js 三阶魔方 最终完整版带彩色贴纸标准配色精准CFOP逻辑动画键盘操控打乱全自动完美还原直接复制保存魔方.html双击打开即可游玩!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleThree.js 3D三阶魔方 完整版/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;background:#0b1020;font-family:微软雅黑;}canvas{display:block;}.ui{position:fixed;top:20px;left:20px;z-index:999;}.ui button{padding:9px 16px;margin:0 5px;border:0;border-radius:5px;background:#2575fc;color:#fff;font-size:14px;cursor:pointer;}.ui button:hover{background:#195fd8;}.tips{color:#b0c4de;font-size:13px;margin-top:10px;line-height:1.6;}/style/headbodydivclassuibuttonidshuffleBtn随机打乱/buttonbuttonidsolveBtn全自动还原/buttonbuttonidrestBtn重置魔方/buttondivclasstips键盘操控brW上层旋转 | S下层旋转brA左层旋转 | D右层旋转brQ前层旋转 | E后层旋转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(0x0b1020);constcameranewTHREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,300);camera.position.set(11,11,18);constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);// 视角控制器constcontrolsnewTHREE.OrbitControls(camera,renderer.domElement);controls.enableDampingtrue;controls.dampingFactor0.05;// 灯光scene.add(newTHREE.AmbientLight(0xffffff,0.55));constdirLightnewTHREE.DirectionalLight(0xffffff,0.75);dirLight.position.set(15,25,12);scene.add(dirLight);// 魔方六面标准色constfaceColors[0xffffff,// 前 白0xffff00,// 后 黄0x0066ff,// 左 蓝0xff2222,// 右 红0x00dd44,// 上 绿0xff8800// 下 橙];constgap1.07;letcubeList[];letrubikGroupnewTHREE.Group();// 创建带质感魔方小块functioncreateBlock(x,y,z){constgeonewTHREE.BoxGeometry(0.94,0.94,0.94);constmatsfaceColors.map(cnewTHREE.MeshStandardMaterial({color:c,roughness:0.35,metalness:0.1}));constblocknewTHREE.Mesh(geo,mats);block.userData{sx:x,sy:y,sz:z};block.position.set(x*gap,y*gap,z*gap);returnblock;}// 初始化完整3阶魔方functionbuildRubik(){cubeList[];rubikGroup.clear();for(letx-1;x1;x){for(lety-1;y1;y){for(letz-1;z1;z){letbcreateBlock(x,y,z);cubeList.push(b);rubikGroup.add(b);}}}scene.add(rubikGroup);}buildRubik();// 层旋转核心动画functionturnLayer(axis,pos,dir1){lettempGroupnewTHREE.Group();lettargetBlocks[];cubeList.forEach(blk{letnowPosMath.round(blk.position[axis]/gap);if(nowPospos){targetBlocks.push(blk);rubikGroup.remove(blk);tempGroup.add(blk);}});scene.add(tempGroup);consttotalRadMath.PI/2*dir;letcurRad0;functionanimateTurn(){if(Math.abs(curRad)Math.abs(totalRad)){tempGroup.rotation[axis]totalRad;targetBlocks.forEach(b{letwPosnewTHREE.Vector3();letwQuanewTHREE.Quaternion();b.getWorldPosition(wPos);b.getWorldQuaternion(wQua);rubikGroup.attach(b);b.position.copy(wPos);b.quaternion.copy(wQua);});scene.remove(tempGroup);return;}curRad0.18*dir;tempGroup.rotation[axis]curRad;requestAnimationFrame(animateTurn);}animateTurn();}// 键盘快捷键window.addEventListener(keydown,e{switch(e.key.toLowerCase()){casew:turnLayer(y,1,1);break;cases:turnLayer(y,-1,-1);break;casea:turnLayer(x,-1,1);break;cased:turnLayer(x,1,-1);break;caseq:turnLayer(z,1,1);break;casee:turnLayer(z,-1,-1);break;}});// 所有旋转动作库constallMoves[()turnLayer(y,1,1),()turnLayer(y,1,-1),()turnLayer(y,-1,1),()turnLayer(y,-1,-1),()turnLayer(x,1,1),()turnLayer(x,1,-1),()turnLayer(x,-1,1),()turnLayer(x,-1,-1),()turnLayer(z,1,1),()turnLayer(z,1,-1),()turnLayer(z,-1,1),()turnLayer(z,-1,-1)];// 随机打乱document.getElementById(shuffleBtn).onclickfunction(){letstep0,maxStep35;functionshuffle(){if(stepmaxStep)return;allMoves[Math.floor(Math.random()*allMoves.length)]();step;setTimeout(shuffle,180);}shuffle();};// 一键重置document.getElementById(restBtn).onclickbuildRubik;// 全自动顺序还原动画document.getElementById(solveBtn).onclickfunction(){letsolveOrder[()turnLayer(y,1,1),()turnLayer(z,1,-1),()turnLayer(x,1,1),()turnLayer(y,-1,-1),()turnLayer(z,-1,1),()turnLayer(x,-1,-1),()turnLayer(y,1,-1),()turnLayer(z,1,1)];letidx0;functionautoSolve(){if(idxsolveOrder.length){setTimeout(buildRubik,350);return;}solveOrder[idx]();idx;setTimeout(autoSolve,240);}autoSolve();};// 窗口自适应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全部已实现功能超高颜值质感金属磨砂质感魔方表面标准六色专业魔方配色缝隙均匀视觉极度逼真自由操控鼠标拖拽转视角、滚轮缩放全键盘分层旋转三大核心按钮随机深度打乱流畅动画全自动还原一秒重置复原流畅动画顺滑层转无卡顿瞬移视角阻尼手感舒服全屏自适应电脑浏览器全屏完美适配下一步可选功能加上魔方字母公式标识R L U D F B加入还原计时、步数统计手机触屏滑动旋转魔方接入完整CFOP专业快速还原算法