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>高楼是怎样建成的 · Three.js 施工原理教学动画</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{
  --navy:#101d31; --navy2:#0e1a2e; --line:#263a57; --line2:#2b405f;
  --ink:#e9f0f9; --mut:#8fa3bd; --yel:#f7b733; --org:#ff8a3d;
  --disp:'ZCOOL QingKe HuangYou',sans-serif; --body:'Noto Sans SC',sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0d1626;font-family:var(--body);color:var(--ink);user-select:none}
#scene-root{position:fixed;inset:0;z-index:0}
#scene-root canvas{display:block;touch-action:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(8,12,22,.45) 100%)}
/* ---------- 3D 标注 ---------- */
#labels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.label{position:absolute;left:0;top:0;background:rgba(13,22,40,.92);border:1px solid #2c3f5c;
  border-left:3px solid var(--yel);padding:4px 9px;font-size:12px;color:#dfe9f5;white-space:nowrap;
  border-radius:3px;letter-spacing:.5px;transition:opacity .25s;will-change:transform}
.label::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:12px;
  background:linear-gradient(var(--yel),transparent)}
/* ---------- 左侧工序面板 ---------- */
#panel{position:fixed;z-index:5;left:16px;top:16px;bottom:92px;width:298px;display:flex;flex-direction:column;
  background:linear-gradient(var(--navy),var(--navy2));border:1px solid var(--line);border-radius:10px;
  overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.p-stripe{height:7px;flex:none;background:repeating-linear-gradient(-45deg,var(--yel) 0 12px,#1b2331 12px 24px)}
.p-head{padding:14px 16px 12px;flex:none}
.p-head h1{margin:0;font-family:var(--disp);font-weight:400;font-size:24px;letter-spacing:1.5px;color:#f4f7fb}
.p-sub{font-size:12px;color:var(--mut);margin-top:3px;letter-spacing:.5px}
.p-stats{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.p-stats span{background:#182a44;border:1px solid var(--line2);padding:3px 9px;font-size:11px;color:#bcd0e8;border-radius:4px}
.p-stats b{color:var(--yel);font-weight:700}
#stageList{flex:1;overflow-y:auto;padding:6px 0}
#stageList::-webkit-scrollbar{width:5px}
#stageList::-webkit-scrollbar-thumb{background:#2b405f;border-radius:3px}
.s-item{display:flex;gap:10px;padding:9px 12px;border-left:3px solid transparent;cursor:pointer;transition:background .2s}
.s-item:hover{background:#16263e}
.s-item.active{background:#1a2c48;border-left-color:var(--yel)}
.s-num{font-family:var(--disp);font-size:18px;color:#51677f;width:26px;flex:none;line-height:1.2}
.s-item.active .s-num{color:var(--yel)}
.s-name{font-size:13.5px;font-weight:600;color:#dfe9f5}
.s-desc{font-size:11.5px;color:var(--mut);line-height:1.55;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-foot{flex:none;padding:8px 14px;font-size:11px;color:#6f83a0;border-top:1px solid #223451;line-height:1.7}
.p-foot b{color:#9fb4cf}
/* ---------- 顶部横幅 ---------- */
#banner{position:fixed;z-index:6;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  gap:12px;pointer-events:none;opacity:0}
#banner.show{animation:bannerA 3.4s ease forwards}
@keyframes bannerA{0%{opacity:0;transform:translate(-50%,-16px)}10%,80%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-8px)}}
#bStep{background:var(--yel);color:#161d29;font-family:var(--disp);font-size:15px;padding:4px 11px;
  border-radius:4px;letter-spacing:1.5px}
#bName{font-family:var(--disp);font-weight:400;font-size:26px;color:#fff;letter-spacing:3px;
  text-shadow:0 2px 14px rgba(0,0,0,.65)}
/* ---------- 右上工具栏 ---------- */
#toolbar{position:fixed;z-index:5;right:16px;top:16px;display:flex;flex-direction:column;gap:8px}
.tbtn{background:rgba(16,29,49,.92);border:1px solid var(--line2);color:#cfe0f2;padding:8px 13px;font-size:12.5px;
  font-family:var(--body);border-radius:6px;cursor:pointer;transition:all .2s;letter-spacing:1px}
.tbtn:hover{border-color:var(--yel);color:#fff}
.tbtn.on{background:var(--yel);color:#151b26;border-color:var(--yel);font-weight:700}
/* ---------- 底部控制台 ---------- */
#controls{position:fixed;z-index:5;left:330px;right:16px;bottom:16px;height:64px;display:flex;align-items:center;
  gap:12px;background:rgba(16,29,49,.95);border:1px solid var(--line);border-radius:10px;padding:0 14px;
  box-shadow:0 12px 40px rgba(0,0,0,.45)}
.cbtn{width:42px;height:42px;flex:none;border-radius:8px;border:1px solid var(--line2);background:#182a44;
  color:#cfe0f2;font-size:15px;cursor:pointer;transition:all .2s}
.cbtn:hover{border-color:var(--yel);color:#fff}
.cbtn.primary{background:var(--yel);border:none;color:#161d29;font-weight:700}
.cbtn.primary:hover{filter:brightness(1.1);color:#000}
.speed{display:flex;flex:none;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.speed button{padding:6px 10px;background:transparent;color:#9fb4cf;font-size:11.5px;border:none;cursor:pointer;
  font-family:var(--body.........完整代码请登录后点击上方下载按钮下载查看