three实现三维乐高积木游戏代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维乐高积木游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>LEGO Studio Pro</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
--panel-w:320px;--panel-bg:rgba(30,30,38,.95);--panel-border:rgba(255,255,255,.08);
--accent:#ff6b35;--accent2:#ffd23f;--text:#e8e8ef;--text2:#a0a0b0;
--btn-bg:rgba(255,255,255,.07);--btn-hover:rgba(255,255,255,.14);
--danger:#ff4757;--success:#2ed573;
}
html,body{width:100%;height:100%;overflow:hidden;background:#1a1a2e;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--text)}
canvas{display:block;width:100%;height:100%;outline:none}
#ui{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}
#ui *{pointer-events:auto}

/* Side Panel */
#panel{position:absolute;top:0;left:0;width:var(--panel-w);height:100%;background:var(--panel-bg);
backdrop-filter:blur(20px);border-right:1px solid var(--panel-border);
display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:20;overflow:hidden}
#panel.collapsed{transform:translateX(calc(-1 * var(--panel-w) + 40px))}
#panel.collapsed .panel-content{opacity:0;pointer-events:none}
#panel.collapsed #panel-toggle{right:-4px}
#panel-toggle{position:absolute;top:50%;right:-20px;transform:translateY(-50%);width:24px;height:60px;
background:var(--panel-bg);border:1px solid var(--panel-border);border-left:none;
border-radius:0 8px 8px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--text2);transition:all .2s;z-index:25}
#panel-toggle:hover{background:var(--btn-hover);color:var(--text)}
.panel-content{display:flex;flex-direction:column;height:100%;overflow:hidden;transition:opacity .25s}
.panel-header{padding:16px 18px 12px;border-bottom:1px solid var(--panel-border);flex-shrink:0}
.panel-header h1{font-size:18px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.panel-header h1 span{font-size:20px}
.panel-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.panel-body::-webkit-scrollbar{width:5px}
.panel-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

/* Sections */
.section{margin-bottom:6px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid var(--panel-border)}
.section-head{padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
font-size:13px;font-weight:600;user-select:none;transition:background .15s}
.section-head:hover{background:var(--btn-hover)}
.section-head .arrow{font-size:10px;transition:transform .25s;color:var(--text2)}
.section.closed .section-body{display:none}
.section.closed .arrow{transform:rotate(-90deg)}
.section-body{padding:8px 10px 12px}

/* Colors */
.color-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.color-swatch{width:100%;aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;
transition:all .15s;position:relative}
.color-swatch:hover{transform:scale(1.15);z-index:2}
.color-swatch.active{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.4)}
.color-swatch::after{content:attr(data-name);position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
font-size:8px;color:var(--text2);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.color-swatch:hover::after{opacity:1}

/* Parts */
.parts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.part-btn{padding:8px 4px;border:1px solid var(--panel-border);border-radius:8px;background:var(--btn-bg);
cursor:pointer;text-align:center;font-size:10px;color:var(--text2);transition:all .15s;line-height:1.3;display:flex;flex-direction:column;align-items:center;gap:3px}
.part-btn:hover{background:var(--btn-hover);color:var(--text);transform:translateY(-1px)}
.part-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.part-btn .part-icon{font-size:18px}
.part-cat{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.cat-btn{padding:4px 10px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid var(--panel-border);
background:var(--btn-bg);color:var(--text2);transition:all .15s}
.cat-btn:hover,.cat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Templates */
.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.template-card{padding:12px 8px;border:1px solid var(--panel-border);border-radius:10px;background:var(--btn-bg);
cursor:pointer;text-align:center;transition:all .2s;font-size:11px;color:var(--text2)}
.template-card:hover{background:var(--btn-hover);transform:translateY(-2px);color:var(--text)}
.template-card .t-icon{font-size:28px;margin-bottom:4px}

/* Toolbar */
.toolbar{display:flex;gap:4px;flex-wrap:wrap}
.tool-btn{padding:6px 10px;border:1px solid var(--panel-border);border-radius:7px;background:var(--btn-bg);
cursor:pointer;font-size:11px;color:var(--text2);transition:all .15s;display:flex;align-items:center;gap:4px;white-space:nowrap}
.tool-btn:hover{background:var(--btn-hover);color:var(--text)}
.tool-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tool-btn.danger{color:var(--danger)}
.tool-btn.danger:hover{background:rgba(255,71,87,.2)}
.tool-btn:disabled{opacity:.35;pointer-events:none}

/* Baseplate selector */
.bp-row{display:flex;gap:4px;align-items:center}
.bp-btn{flex:1;padding:6px;border:1px solid var(--panel-border);border-radius:7px;background:var(--btn-bg);
cursor:pointer;font-size:11px;color:var(--text2);text-align:center;transition:all .15s}
.bp-btn:hover{background:var(--btn-hover);color:var(--text)}
.bp-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Saves */
.save-list{display:flex;flex-direction:column;gap:4px;max-height:150px;overflow-y:auto}
.save-item{padding:8px 10px;border:1px solid var(--panel-border);border-radius:8px;background:var(--btn-bg);
cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:11px;transition:all .15s}
.save-item:hover{background:var(--btn-hover)}
.save-item .del-save{color:var(--danger);cursor:pointer;padding:2px 6px;border-radius:4px}
.save-item .del-save:hover{background:rgba(255,71,87,.2)}

/* Top Bar */
#topbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:15}
.top-btn{padding:7px 14px;border-radius:8px;background:var(--panel-bg);backdrop-filter:blur(10px);
border:1px solid var(--panel-border);cursor:pointer;font-size:12px;color:var(--text2);
transition:all .2s;display:flex;alig.........完整代码请登录后点击上方下载按钮下载查看