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">
<title>盾构机施工操控体验 · EPB-01「奋进号」</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚇</text></svg>">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#0c0a08; --panel:rgba(17,20,24,.93); --line:#343b43;
  --amber:#ffb52e; --amber2:#ff8d1a; --green:#54e08c; --red:#ff5040;
  --ink:#e9e4d8; --dim:#8b8f96; --teal:#39d2c0;
  --disp:'Rajdhani','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC','Rajdhani',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--body);color:var(--ink);user-select:none}
#stage{position:fixed;inset:0}
#stage canvas{display:block;touch-action:none;cursor:grab}
#stage canvas:active{cursor:grabbing}
#vig{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 46%,transparent 55%,rgba(0,0,0,.42) 100%)}
#ui{position:fixed;inset:0;z-index:10;pointer-events:none}
.panel{pointer-events:auto;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  backdrop-filter:blur(3px)}
.hz{height:6px;background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,#15181c 10px 20px)}
#plaque{position:absolute;top:16px;left:16px;width:318px;animation:panelIn .7s .1s cubic-bezier(.2,.9,.25,1) both}
#plaque .in{padding:12px 14px 10px}
#plaque h1{font-size:19px;font-weight:900;letter-spacing:2px}
#plaque h1 b{color:var(--amber)}
#plaque .sub{font-family:var(--disp);font-size:10px;letter-spacing:2.5px;color:var(--dim);margin-top:2px}
#plaque .row{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:8px;border-top:1px dashed #2b323a}
.led{width:10px;height:10px;border-radius:50%;background:#555;flex:none}
.led.ok{background:var(--green);box-shadow:0 0 8px var(--green);animation:ledP 1.1s infinite}
.led.warn{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:ledP .7s infinite}
.led.off{background:#6b7076}
#statusTxt{font-size:12px;font-weight:700;letter-spacing:2px}
#clock{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--amber);letter-spacing:1px}
#progPanel{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:min(430px,40vw);padding:9px 14px 8px;animation:panelInC .7s .2s cubic-bezier(.2,.9,.25,1) both}
#progPanel .tt{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:var(--dim);margin-bottom:6px}
#progPanel .tt b{color:var(--amber);font-family:var(--disp);font-size:14px}
.pw-bar{height:9px;background:#0a0c0e;border:1px solid #2b3138;position:relative;overflow:hidden}
#pFill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber2),var(--amber));
  box-shadow:0 0 10px rgba(255,181,46,.7);transition:width .3s}
.pw-ticks{display:flex;justify-content:space-between;font-family:var(--disp);font-size:10px;color:#5d646c;margin-top:4px}
#dataPanel{position:absolute;top:16px;right:16px;width:294px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;animation:panelIn .7s .3s cubic-bezier(.2,.9,.25,1) both}
.ro{border-left:3px solid #3d444d;padding-left:8px}
.ro:nth-child(1){border-color:var(--amber)}
.ro:nth-child(2){border-color:var(--teal)}
.ro:nth-child(7){border-color:#c9741e}
.ro .lbl{font-size:10px;letter-spacing:2px;color:var(--dim)}
.ro .val{font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.05;color:#ffd98c;text-shadow:0 0 12px rgba(255,181,46,.25);white-space:nowrap}
.ro .val small{font-size:11px;color:var(--dim);font-weight:600}
.ro:nth-child(2) .val{color:#9df0e4}
#ctlPanel{position:absolute;left:16px;bottom:16px;width:330px;animation:panelIn .7s .4s cubic-bezier(.2,.9,.25,1) both}
#ctlPanel .in{padding:12px 14px 14px}
.btnrow{display:flex;gap:8px;margin-bottom:10px}
.btn{flex:1;pointer-events:auto;font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:2px;
  padding:9px 6px;color:var(--ink);background:linear-gradient(#23282f,#171b20);border:1px solid #3c434c;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:.15s}
.btn:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 12px rgba(255,181,46,.2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(#ffc44d,#f09a12);color:#221600;border-color:#ffcf6e}
.btn.primary:hover{color:#000;box-shadow:0 0 16px rgba(255,181,46,.5)}
.btn.disabled{opacity:.45;pointer-events:none}
.views{display:flex;gap:6px;margin-bottom:12px}
.vbtn{flex:1;font-size:11px;letter-spacing:1px;padding:6px 2px;background:#14181d;border:1px solid #333a42;color:var(--dim);cursor:pointer;transition:.15s;font-family:var(--body);font-weight:500}
.vbtn:hover{color:var(--ink);border-color:#5a626c}
.vbtn.on{background:#2b2413;border-color:var(--amber);color:var(--amber);box-shadow:inset 0 0 10px rgba(255,181,46,.15)}
.ctl{margin-bottom:10px}
.ctl label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:var(--dim);margin-bottom:5px}
.ctl label b{font-family:var(--disp);font-size:15px;color:var(--amber);letter-spacing:1px}
input[type=range]{width:100%;height:18px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:2px;
  background:linear-gradient(var(--amber),var(-.........完整代码请登录后点击上方下载按钮下载查看