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"/>
<title>汽车构造 · 三维拆解实验室 v3</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Rajdhani:wght@500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{--bg:#0a0f16;--panel:rgba(15,21,30,.9);--line:#24344a;--ink:#e8f0f7;--dim:#8aa0b8;--amber:#ffb02e;--cyan:#4fd2ff;}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:"Noto Sans SC",sans-serif;color:var(--ink);user-select:none;
  background:radial-gradient(1100px 700px at 70% -12%,#17293c 0%,transparent 62%),
  radial-gradient(900px 600px at 8% 112%,#10202e 0%,transparent 55%),var(--bg);}
#scene{position:fixed;inset:0;cursor:grab;display:block}
#scene:active{cursor:grabbing}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.4)}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 42%,transparent 55%,rgba(2,6,12,.55) 100%)}
header{position:fixed;top:0;left:0;right:0;z-index:12;display:flex;justify-content:space-between;align-items:flex-start;
  padding:16px 22px;pointer-events:none;background:linear-gradient(#0a0f16f2,#0a0f1600)}
.brand{display:flex;gap:14px;align-items:center}
.mark{width:46px;height:46px;flex:none;background:#111a26;border:1px solid var(--line);display:grid;place-items:center;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
h1{font-family:"ZCOOL QingKe HuangYou";font-weight:400;font-size:27px;letter-spacing:3px;line-height:1.05}
h1 span{color:var(--amber)}
.sub{margin-top:3px;font-family:"Rajdhani";font-weight:600;font-size:11px;letter-spacing:3.5px;color:var(--dim)}
.hstats{display:flex;gap:22px;align-items:center;font-family:"Rajdhani"}
.hstat{text-align:right}
.hstat i{display:block;font-style:normal;font-size:10px;letter-spacing:2px;color:var(--dim)}
.hstat b{font-size:17px;font-weight:700;letter-spacing:.5px}
#clock{color:var(--cyan);font-size:26px;font-weight:700}
.live{display:flex;gap:7px;align-items:center;font-size:12px;color:#8fe6a8}
.dot{width:8px;height:8px;border-radius:50%;background:#5be49b;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,228,155,.55)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
#sidebar{position:fixed;left:18px;top:96px;bottom:150px;width:274px;z-index:11;display:flex;flex-direction:column;padding:12px}
.side-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.side-head h3{font-size:13px;letter-spacing:3px;font-weight:700}
.side-head em{font-style:normal;font-family:"Rajdhani";font-weight:700;color:var(--amber)}
.legend{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.legend span{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:2px 9px;cursor:pointer;transition:.2s}
.legend span:hover{color:var(--ink);border-color:var(--amber)}
#plist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;scrollbar-color:#2c3e54 transparent}
#plist::-webkit-scrollbar{width:6px}
#plist::-webkit-scrollbar-thumb{background:#2c3e54;border-radius:3px}
.p-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-left:2px solid transparent;cursor:pointer;transition:.18s;font-size:13px}
.p-row:hover,.p-row.hl{background:#182435;border-left-color:var(--amber);transform:translateX(2px)}
.p-row .sw{width:9px;height:9px;flex:none;background:var(--c);box-shadow:0 0 7px var(--c)}
.p-row .nm{flex:1}
.p-row .idx{font-family:"Rajdhani";font-weight:600;font-size:11px;color:var(--dim)}
#info{position:fixed;right:18px;top:96px;width:302px;z-index:11;padding:16px;display:none}
#info.show{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.i-top{display:flex;justify-content:space-between;align-items:center}
#iSys{font-size:11px;letter-spacing:2px;padding:2px 10px;border:1px solid currentColor;border-radius:20px}
#iClose{background:none;border:1px solid var(--line);color:var(--dim);width:24px;height:24px;border-radius:6px;cursor:pointer;transition:.2s}
#iClose:hover{color:var(--ink);border-color:var(--amber);transform:rotate(90deg)}
#iName{font-family:"ZCOOL QingKe HuangYou";font-weight:400;font-size:24px;letter-spacing:2px;margin-top:10px}
#iEn{font-family:"Rajdhani";font-weight:600;font-size:11px;letter-spacing:3px;color:var(--amber)}
#iDesc{margin:10px 0 12px;font-size:13px;line-height:1.75;color:#b9c8d8}
.i-meta{display:grid;grid-template-columns:52px 1fr;gap:6px 10px;font-size:12px}
.i-meta dt{color:var(--dim)}
#iLoc{margin-top:12px;font-size:11px;color:var(--cyan);letter-spacing:1px;border-top:1px dashed var(--line);padding-top:9px}
#telemetry{position:fixed;right:18px;top:400px;width:246px;z-index:10;padding:14px 16px}
.t-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.t-top span{font-size:11px;letter-spacing:3px;color:var(--dim)}
.t-top b{font-size:11px;letter-spacing:1px;color:#8fe6a8;background:rgba(91,228,155,.1);border:1px solid rgba(91,228,155,.35);padding:1px 9px;border-radius:20px}
.t-big{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.t-big b{font-family:"Rajdhani";font-weight:700;font-size:42px;line-height:1;color:var(--amber)}
.t-big span{font-size:12px;color:var(--dim)}
.bar{height.........完整代码请登录后点击上方下载按钮下载查看