three实现三维可开机操作的笔记本电脑代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维可开机操作的笔记本电脑代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>LUMA BOOK PRO · 三维交互笔记本</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#0c0f14; --panel:#14181f; --panel2:#1a1f28; --line:#2a313c;
    --ink:#e9edf4; --dim:#8a93a3; --amber:#ffb454; --teal:#5fd6c6;
    --danger:#ff6b6b; --ok:#7ee08a;
    --disp:'Chakra Petch','Noto Sans SC',sans-serif;
    --body:'Noto Sans SC',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body)}
  #app{position:fixed;inset:0}
  canvas{display:block;touch-action:none}

  /* ---------- 顶左 品牌 ---------- */
  .brand{position:fixed;top:22px;left:26px;z-index:20;pointer-events:none;
    display:flex;align-items:center;gap:13px}
  .brand .mark{width:42px;height:42px;flex:0 0 auto;position:relative;
    border:1.5px solid var(--line);border-radius:11px;background:linear-gradient(160deg,#1d232d,#10141a);
    display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
  .brand .mark svg{width:22px;height:22px}
  .brand .mark::after{content:"";position:absolute;inset:0;border-radius:11px;
    box-shadow:0 0 18px rgba(255,180,84,.18);opacity:.7}
  .brand h1{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.14em;line-height:1}
  .brand h1 b{color:var(--amber)}
  .brand p{font-size:11px;color:var(--dim);letter-spacing:.06em;margin-top:5px}

  /* ---------- 左下 实时读数 ---------- */
  .telemetry{position:fixed;left:26px;bottom:24px;z-index:20;pointer-events:none;
    font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.9;
    border-left:2px solid var(--line);padding:2px 0 2px 13px}
  .telemetry .row{display:flex;gap:9px;align-items:baseline}
  .telemetry .k{color:#5b6573;width:62px}
  .telemetry .v{color:var(--ink);font-weight:500}
  .telemetry .v.on{color:var(--ok)} .telemetry .v.off{color:var(--danger)}
  .telemetry .v.amber{color:var(--amber)}

  /* ---------- 右侧 控制面板 ---------- */
  .dock{position:fixed;top:50%;right:20px;transform:translateY(-50%);z-index:25;
    width:248px;background:linear-gradient(180deg,rgba(26,31,40,.94),rgba(18,22,29,.96));
    border:1px solid var(--line);border-radius:16px;padding:8px;
    box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(8px);max-height:92vh;overflow:auto}
  .dock::-webkit-scrollbar{width:6px}.dock::-webkit-scrollbar-thumb{background:#2c333e;border-radius:6px}
  .sec{padding:12px 12px 13px;border-bottom:1px solid rgba(255,255,255,.05)}
  .sec:last-child{border-bottom:0}
  .sec .lab{font-family:var(--disp);font-size:10.5px;letter-spacing:.22em;color:var(--dim);
    text-transform:uppercase;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center}
  .sec .lab .tag{font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:0}

  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
    background:#2a313c;outline:none;cursor:pointer}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:var(--amber);border:3px solid #1a1f28;box-shadow:0 0 0 1px var(--amber),0 2px 8px rgba(255,180,84,.4);
    transition:transform .12s}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
  input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--amber);border:3px solid #1a1f28}

  .btnrow{display:flex;gap:7px;margin-top:10px}
  .btn{flex:1;font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.05em;
    padding:9px 6px;border-radius:9px;border:1px solid var(--line);background:#1d232d;color:var(--ink);
    cursor:pointer;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;
    display:flex;align-items:center;justify-content:center;gap:6px}
  .btn:hover{transform:translateY(-2px);background:#242b35;border-color:#3a4350}
  .btn:active{transform:translateY(0)}
  .btn..........完整代码请登录后点击上方下载按钮下载查看