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>吊裝大師 · HOOKMASTER — 三维滑轮吊装挑战</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&family=Rajdhani:wght@600;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0c1418; --panel:#0f1c25; --panel2:#132430; --line:#2c4655;
  --amber:#ffb03a; --amber2:#ff8a3d; --teal:#35d0ba; --rose:#ff5d7e;
  --paper:#eef3f0; --dim:#8fa8b3;
  --disp:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',sans-serif;
  --num:'Rajdhani','Noto Sans SC',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#081824;font-family:var(--body);color:var(--paper)}
canvas{display:block}
#wrap{position:fixed;inset:0;user-select:none;-webkit-user-select:none}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(3,10,15,.55) 100%)}
.hidden{display:none!important}

/* ===== 通用面板 / 按钮 ===== */
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.hz{height:7px;background:repeating-linear-gradient(-45deg,var(--amber) 0 12px,#1a1508 12px 24px);opacity:.9}
.btn{font-family:var(--disp);font-size:20px;letter-spacing:.12em;color:#1c1206;background:linear-gradient(180deg,#ffc65e,var(--amber));
  border:0;border-bottom:4px solid #8a5510;padding:10px 26px;cursor:pointer;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn:active{transform:translateY(1px);border-bottom-width:2px}
.btn.ghost{background:transparent;color:var(--amber);border:2px solid var(--amber);border-bottom-width:4px}
.btn.small{font-size:15px;padding:7px 16px}
kbd{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;margin:0 2px;font:600 12px var(--num);
  color:#ffd98a;background:#1a2b36;border:1px solid #3d5a6b;border-bottom:3px solid #3d5a6b;border-radius:4px}

/* ===== HUD ===== */
#hud{position:absolute;inset:0;z-index:5;pointer-events:none}
#topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:10px}
.chip{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:14px;color:var(--dim);
  background:rgba(15,28,37,.88);border:1px solid var(--line);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.chip b{font-family:var(--num);font-size:20px;color:var(--paper);font-weight:700}
#lvlChip b{color:var(--amber);font-size:22px}
#lvlChip span{font-family:var(--disp);font-size:16px;color:var(--paper);letter-spacing:.1em}
#timer{margin:0 auto;font-family:var(--num);font-weight:700;font-size:38px;letter-spacing:.08em;color:var(--paper);
  padding:2px 22px;background:rgba(15,28,37,.88);border:1px solid var(--line);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
#timer.low{color:var(--rose);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}
.iconBtn{pointer-events:auto;width:40px;height:40px;font-size:17px;color:var(--paper);background:rgba(15,28,37,.88);
  border:1px solid var(--line);cursor:pointer;transition:.15s}
.iconBtn:hover{border-color:var(--amber);color:var(--amber)}
#windChip{position:absolute;top:66px;left:50%;transform:translateX(-50%);padding:5px 16px;font-size:13px;color:#bfe4ef;
  background:rgba(20,50,66,.9);border:1px solid #2e6a80}
#windChip b{font-family:var(--num);font-size:17px;color:#7fdcff}
#windArrow{display:inline-block;font-weight:700;color:var(--teal);animation:wpush 1s ease-in-out infinite}
@keyframes wpush{50%{transform:translateX(4px)}}
#bottombar{position:absolute;bottom:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
#keysHint{padding:9px 14px;font-size:12.5px;color:var(--dim);background:rgba(15,28,37,.78);border:1px solid var(--line);line-height:2}
#keysHint b{color:#cfe3ea;font-weight:500}
#meters{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#swayWrap{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12px;color:var(--dim);
  background:rgba(15,28,37,.78);border:1px solid var(--line)}
#swayBar{position:relative;width:180px;height:10px;background:#0a141a;border:1px solid #24404f}
#swaySafe{position:absolute;top:0;bottom:0;left:37%;width:26%;background:rgba(53,208,186,.25);border-inline:1px solid rgba(53,208,186,.5)}
#swayMark{position:absolute;top:-3px;width:4px;height:16px;background:var(--amber);left:50%;box-shadow:0 0 8px var(--amber)}
#hookAlt{padding:4px 14px;font-size:12px;color:var(--dim);background:rgba(15,28,37,.78);border:1px solid var(--line)}
#hookAlt b{font-family:var(--num);font-size:16px;color:var(--teal)}

/* ===== 提示 / 横幅 / 漂字 ===== */
#toasts{position:absolute;top:110px;left:50%;transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{font-family:var(--disp);font-size:18px;letter-spacing:.08em;color:#ffe9bd;background:rgba(24,17,6,.92);
  border:1px solid var(--amber);padding:8px 22px;animation:tin .25s ease-out;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.toast.bad{color:#ffd4dc;border-color:var(--rose);background:rgba(40,8,14,.92)}
@keyframes tin{from{opacity:0;transform:translateY(-14px) scale(.9)}}
#banner{position:absolute;top:34%;left:0;right:0;text-align:center;z-index:7;pointer-events:none;opacity:0;transition:opacity .35s}
#banner.show{opacity:1}
#banner .bn{font-family:var(--num);font-size:15px;letter-spacing:.6em;color:var(--teal)}
#banner .bt{font-family:var(--disp);font-size:56px;color:var(--amber);text-shadow:0 4px 0 #6b3f0d,0 10px 24px rgba(0,0,0,.6)}
#banner .bb{font-size:15px;color:#cfe0e6;margin-top:6px}
#pops{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.pop{position:absolute;font-family:var(--num);font-weight:700;font-size:24px;color:#ffe08a;text-shadow:0 2px 6px #000;
  transform:translate(-50%,-100%);animation:popUp 1.1s ease-ou.........完整代码请登录后点击上方下载按钮下载查看