three实现三维科幻电影城市能量护盾代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：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>ARCLIGHT-07 · 科幻城市能量防护盾（Three.js）</title>
<style>
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #02040a; }
  canvas { display: block; }

  /* ---------- 加载遮罩 ---------- */
  #loader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 22px; background: #04070d;
    transition: opacity .9s ease; }
  #loader.done { opacity: 0; pointer-events: none; }
  .spinner { width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid rgba(80, 180, 255, .15); border-top-color: #4fc3ff;
    animation: spin 1s linear infinite; box-shadow: 0 0 24px rgba(79, 195, 255, .25); }
  @keyframes spin { to { transform: rotate(360deg); } }
  #loaderText { color: #9fd2f0; font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px; letter-spacing: 4px; text-align: center; line-height: 2;
    text-shadow: 0 0 12px rgba(79, 195, 255, .6); padding: 0 24px; }

  /* ---------- 电影暗角 ---------- */
  #vignette { position: fixed; inset: 0; z-index: 5; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(1, 4, 10, .62) 100%); }

  /* ---------- HUD ---------- */
  #hud { position: fixed; top: 20px; left: 20px; z-index: 10; color: #bfe9ff; user-select: none;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(135deg, rgba(6, 22, 36, .78), rgba(4, 12, 22, .6));
    border: 1px solid rgba(90, 200, 255, .3); border-left: 3px solid #4fc3ff;
    border-radius: 10px; padding: 14px 18px; backdrop-filter: blur(6px);
    box-shadow: 0 0 28px rgba(50, 150, 255, .18); min-width: 260px; }
  .hud-title { font-size: 15px; font-weight: 600; letter-spacing: 2px;
    text-shadow: 0 0 14px rgba(80, 190, 255, .9); }
  .hud-title small { display: block; font-size: 9px; font-weight: 400; letter-spacing: 3.5px;
    color: #6f9fc4; margin-top: 4px; }
  .hud-row { display: flex; align-items: center; gap: 10px; margin-top: 10px;
    font-size: 12px; color: #8fb8d8; }
  .hud-row b { color: #dff4ff; font-weight: 600; }
  .bar { flex: 1; height: 8px; background: rgba(16, 38, 58, .9);
    border: 1px solid rgba(90, 200, 255, .35); border-radius: 4px; overflow: hidden; }
  #barFill { height: 100%; width: 100%; background: linear-gradient(90deg, #2fa8e0, #7fdcff);
    box-shadow: 0 0 12px rgba(79, 195, 255, .9); transition: width .25s ease; }
  #tip { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
    color: rgba(150, 200, 235, .78); font-size: 12px; letter-spacing: 2px; user-select: none;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: rgba(5, 14, 24, .45); padding: 8px 18px; border-radius: 20px;
    border: 1px solid rgba(90, 200, 255, .18); backdrop-filter: blur(4px); white-space: nowrap; }
</style>
</head>
<body>
<div id="loader">
  <div class="spinner"></div>
  <div id="loaderText">正在部署 ARCLIGHT-07 城市防御网络 …</div>
</div>
<div id="vignette"></div>

<div id="hud">
  <div class="hud-title">ARCLIGHT-07 · 城市能量防护盾<small>CITY ENERGY SHIELD · DEFENSE GRID</small></div>
  <div class="hud-row">护盾完整度 <div class="bar"><div id="barFill"></div></div> <b id="integrity">100%</b></div>
  <div class="hud-row">拦截计数 <b id="hits">0</b>&nbsp;&nbsp;|&nbsp;&nbsp;系统状态 <b id="status">稳定</b></div>
</div>
<div id="tip">左键拖拽 旋转视角 · 滚轮 缩放 · 单击护盾 召唤轨道打击</div>

<script>
  window.__sceneReady = false;
  setTimeout(function () {
    if (!window.__sceneReady) {
      var t = document.getElementById('loaderText');
      if (t) t.innerHTML = '资源加载超时：本页面需联网加载 three.js 运行库（cdn.jsdelivr.net）<br>请检查网络后刷新重试.........完整代码请登录后点击上方下载按钮下载查看