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,maximum-scale=1,user-scalable=no">
<title>QTZ-80 塔吊吊装作业模拟</title>
<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{
  --yel:#ffc21a; --yel2:#ffdd55; --ink:#0d1117; --line:#3a4656;
  --red:#ff4d3d; --green:#3ddc84; --cyan:#39c5ff; --txt:#e8edf4; --dim:#8b98a8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink);font-family:'Noto Sans SC',sans-serif;color:var(--txt);-webkit-user-select:none;user-select:none}
#app,#app canvas{position:fixed;inset:0;display:block}
.disp{font-family:'ZCOOL QingKe HuangYou','Rajdhani',sans-serif;letter-spacing:.06em}
.num{font-family:'Rajdhani',sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.cham{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.hazard{background:repeating-linear-gradient(45deg,#15181d 0 12px,var(--yel) 12px 24px)}
#vig{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(4,7,11,.5) 100%),
             linear-gradient(180deg,rgba(4,7,11,.38),transparent 16%)}
.panel{position:fixed;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(22,27,34,.94),rgba(13,16,21,.92));
  border:1px solid var(--line);padding:14px 16px 12px;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--yel)}
.panel h2{font-size:15px;font-weight:400;color:var(--yel);display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.panel h2 small{font-family:'Rajdhani';font-size:10px;letter-spacing:.28em;color:var(--dim)}
#mission{top:16px;left:16px;width:270px}
#mission p{font-size:12px;color:#c4cfdb;line-height:1.55;margin-bottom:10px}
#cells{display:flex;gap:4px;margin-bottom:10px}
#cells span{flex:1;height:9px;background:#242c37;border:1px solid #39434f;transition:background .3s,box-shadow .3s}
#cells span.on{background:var(--yel);box-shadow:0 0 8px rgba(255,194,26,.7)}
.mrow{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
.mrow b{color:var(--txt);font-weight:500}
#stats{top:16px;right:16px;width:212px;transition:border-color .2s}
#stats.alert{border-color:var(--red);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{box-shadow:0 0 18px rgba(255,77,61,.55)}}
#stats .row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px dashed #2c3541}
#stats .row:last-child{border:none}
#stats .lb{font-size:11px;color:var(--dim);letter-spacing:.1em}
#stats .vl{font-size:20px;color:var(--yel2)}
#stats .vl small{font-size:11px;color:var(--dim);margin-left:2px}
#vLoad.empty{color:#5f6d7e}
#swayBar{width:104px;height:8px;background:linear-gradient(90deg,var(--green) 0 45%,var(--yel) 45% 75%,var(--red) 75%);position:relative;border:1px solid #000}
#swayBar i{position:absolute;right:0;top:-2px;bottom:-2px;background:rgba(10,13,17,.88);transition:width .08s linear}
#controls{bottom:16px;left:16px;width:270px;font-size:12px;transition:opacity .3s,transform .3s}
#controls.hide{opacity:0;transform:translateY(12px)}
#actions{position:fixed;z-index:3;right:16px;bottom:16px;display:flex;align-items:flex-end;gap:12px}
#dpad{display:grid;grid-template-columns:repeat(2,86px);gap:6px}
.btn{font-family:'Noto Sans SC';font-size:12px;color:#cfd8e3;background:#1b2129;border:1px solid #3d4855;padding:9px 6px;cursor:pointer;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:all .15s;touch-action:none}
.btn:hover{border-color:var(--yel);color:var(--yel);transform:translateY(-1px)}
.btn:active,.btn.hold{background:var(--yel);color:#111;border-color:var(--yel)}
.btn.active{background:var(--yel);color:#111;border-color:var(--yel)}
#magnetBtn{width:86px;height:86px;border-radius:50%;border:3px solid #4a5563;background:radial-gradient(circle at 35% 30%,#2a3340,#141920);
  color:var(--yel);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .2s;touch-action:none}
#magnetBtn .mg{font-family:'ZCOOL QingKe HuangYou';font-size:20px;letter-spacing:.15em}
#magnetBtn .sp{font-family:'Rajdhani';font-size:9px;letter-spacing:.25em;color:var(--dim)}
#magnetBtn:hover{border-color:var(--yel);box-shadow:0 0 18px rgba(255,194,26,.35)}
#magnetBtn.hold{border-color:var(--green);color:var(--green);box-shadow:0 0 22px rgba(61,220,132,.5)}
#magnetBtn.deny{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#views{display:flex;flex-direction:column;gap:6px}
#carryChip{position:fixed;z-index:3;right:16px;bottom:118px;background:rgba(13,16,21,.92);border:1px solid var(--green);
  color:var(--green);font-size:12px;padding:6px 12px;display:none}
#toasts{position:fixed;z-index:4;left:50%;bottom:86px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:rgba(15,19,25,.95);border:1px solid #39434f;border-left:4px solid var(--yel);padding:9px 18px;font-size:13px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);animation:tin .3s ease-out}
.toast.good{border-left-color:var(--green);color:#d9ffe9}
.toast.warn{border-left-color:var(--red);color:#ffd9d4}
.toast.out{animation:tout .4s forwards}
@keyframes tin{from{opacity:0;transform:translateY(16px)}}
@keyframes tout{to{opacity:0;transform:translateY(-10px)}}
#boot{position:fixed;inset:0;z-index:10;background:rgba(9,12,16,.88);display:flex;align-items:center;justify-content:center;transition:opac.........完整代码请登录后点击上方下载按钮下载查看