three实现三维深海潜水打捞物资避开鲨鱼游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维深海潜水打捞物资避开鲨鱼游戏代码，操作:W/S 前进倒车,A/D 转向,↑/↓ 上浮下潜,Shift 加速(耗能量),E 打捞,L 探照灯,P 暂停,M 静音。视角:C 循环或按 1-4 直达 —— 跟随 / 玻璃座舱第一人称 / 鼠标拖拽环绕 / 自动影院镜头。潜水器:物理透射玻璃穹舱(MeshPhysicalMaterial transmission)、金属艇体、旋转螺旋桨、可开关的双探照灯、舱内驾驶员与发光仪表盘。深海氛围:深度驱动的海水颜色与雾密度衰减、体积光束、海雪、气泡

代码标签： 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.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Michroma&family=IBM+Plex+Mono:wght@400;600&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --cyan:#5fd9ff; --cyan-dim:rgba(95,217,255,.35); --amber:#ffb347; --amber2:#ffcf7a;
  --red:#ff5f5f; --panel:rgba(4,22,34,.82); --ink:#d9f3ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#02101a;color:var(--ink);
  font-family:'Noto Sans SC',sans-serif;-webkit-user-select:none;user-select:none}
canvas{display:block}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,6,12,.55) 100%)}
.mono{font-family:'IBM Plex Mono',monospace}
.panel{background:var(--panel);border:1px solid var(--cyan-dim);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:inset 0 0 22px rgba(95,217,255,.05)}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:none}
#hud.on{display:block}
#hud::before{content:'';position:absolute;inset:0;opacity:.14;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.35) 3px 4px)}
#compassWrap{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:360px}
#compass{position:relative;height:50px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
#tape{position:absolute;top:0;left:0;height:100%;width:1560px;will-change:transform}
.tick{position:absolute;bottom:6px;width:1px;height:8px;background:rgba(160,230,255,.55)}
.tick.major{height:15px;width:2px;background:var(--cyan)}
.ticklab{position:absolute;top:5px;font:600 12px 'IBM Plex Mono';color:var(--cyan);transform:translateX(-50%)}
.cmark{position:absolute;bottom:28px;width:8px;height:8px;background:var(--amber);
  transform:translateX(-50%) rotate(45deg);box-shadow:0 0 8px var(--amber)}
.cmark.red{background:var(--red);box-shadow:0 0 9px var(--red);bottom:38px}
#needle{position:absolute;left:50%;top:2px;width:2px;height:46px;background:var(--amber2);
  transform:translateX(-50%);box-shadow:0 0 6px var(--amber)}
#heading{position:absolute;right:-4px;top:2px;font-size:11px;color:rgba(160,230,255,.7)}
#mission{position:absolute;top:16px;left:16px;width:295px;padding:12px 16px}
#mission h3{font-size:11px;letter-spacing:.35em;color:var(--cyan);font-weight:500;margin-bottom:6px}
#objText{font-size:14px;font-weight:700;line-height:1.5}
#count{margin-top:6px;font-size:12px;color:var(--amber2)}
#count b{font-size:20px;font-family:'IBM Plex Mono'}
#status{position:absolute;top:16px;right:16px;width:250px;padding:12px 16px;font-size:12px}
.srow{display:flex;justify-content:space-between;margin:7px 0 3px;font-family:'IBM Plex Mono'}
.srow .lab{color:rgba(160,230,255,.75);letter-spacing:.15em}
.bar{height:9px;background:rgba(8,40,58,.9);border:1px solid rgba(95,217,255,.22);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2fa8c9,#7ef0ff);
  transition:width .25s;box-shadow:0 0 8px rgba(95,217,255,.5)}
#o2bar.low i{background:linear-gradient(90deg,#c93a2f,#ff8d5a);animation:blink .6s steps(2) infinite}
#hullbar i{background:linear-gradient(90deg,#3fbf6f,#8ff0a0)}
#hullbar.low i{background:linear-gradient(90deg,#c92f2f,#ff8d5a);animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}
#timeRow{margin-top:9px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono'}
#timeRow b{color:var(--amber2)}
#depthBox{position:absolute;left:20px;top:50%;transform:translateY(-50%);text-align:center}
#depthNum{font-size:22px;font-weight:700;color:var(--cyan);text-shadow:0 0 12px rgba(95,217,255,.6)}
#depthNum small{font-size:11px;color:rgba(160,230,255,.7);display:block;letter-spacing:.3em}
#depthRail{position:relative;width:52px;height:250px;margin:8px auto 0;border-right:1px solid var(--cyan-dim)}
.dtick{position:absolute;right:0;width:9px;height:1px;background:rgba(160,230,255,.5)}
.dtick.major{width:16px;background:var(--cyan)}
.dlab{position:absolute;right:22px;font-size:10px;color:rgba(160,230,255,.6);transform:translateY(-50%)}
#depthMark{position:absolute;right:-2px;width:0;height:0;border:7px solid transparent;
  border-right:11px solid var(--amber);filter:drop-shadow(0 0 5px var(--amber));transition:top .2s}
#sonarBox{position:absolute;right:16px;bottom:16px;padding:10px 12px;text-align:center}
#sonar{display:block;background:rgba(2,14,22,.9);border-radius:50%}
#nearTxt{margin-top:6px;font-size:11px;color:var(--amber2)}
#viewLabel{margin-top:7px;font-size:11px;letter-spacing:.2em;color:var(--cyan)}
#viewLabel.pop{animation:vpop .45s}
@keyframes vpop{0%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
#help{position:absolute;left:16px;bottom:16px;padding:10px 14px;font-size:11.5px;line-height:1.9}
#help b{color:var(--amber2);font-family:'IBM Plex Mono';margin-right:6px}
#help .hd{font-size:10px;letter-spacing:.35em;color:var(--cyan);margin-bottom:4px}
#help .dangerTxt{color:#ff9d9d}
#prompt{position:absolute;bottom:15%;left:50%;transform:translateX(-50%) translateY(10px);
  padding:10px 26px;font-size:15px;font-weight:700;opacity:0;transition:.25s;
  border:1px solid var(--amber);color:var(--amber2);background:rgba(30,16,2,.75);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
#prompt.on{opacity:1;transform:translateX(-50%) translateY(0)}
#prompt kbd{background:var(--amber);color:#241505;padding:1px 8px;font-family:'IBM Plex Mono';margin:0 4px}
#toasts{position:absolute;top:130px;left:50%;transform:translateX(-50%);display:flex;
  flex-direction:column;gap:6px;align-items:center}
.toast{padding:7px 22px;font-size:13px;background:rgba(4,26,40,.9);border:1px solid var(--cyan-dim);
  color:#cdeeff;animation:tin .3s, tout .4s 2.3s forwards;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.toast.gold{border-color:var(--amber);color:var(--amber2)}
@keyframes tin{from{opacity:0;transform:translateY(-14px)}}
@keyfra.........完整代码请登录后点击上方下载按钮下载查看