three实现三维户外激光秀舞台场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：户外三维带激光活动舞台

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="color-scheme" content="dark"/>
<title>AURORA FIELD · 户外舞台激光秀</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
  :root{
    --amber:#ffb454; --cyan:#5ee6ff; --ink:#dfe6ef;
    --panel:rgba(10,14,21,.78); --line:rgba(255,255,255,.14);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:#05070c;color:var(--ink);
    font-family:'Noto Sans SC',system-ui,sans-serif}
  canvas{display:block}

  /* ---------- 取景框角标 ---------- */
  #frame i{position:fixed;width:26px;height:26px;border:0 solid rgba(255,180,84,.45);pointer-events:none;z-index:5}
  #frame i:nth-child(1){top:10px;left:10px;border-top-width:1px;border-left-width:1px}
  #frame i:nth-child(2){top:10px;right:10px;border-top-width:1px;border-right-width:1px}
  #frame i:nth-child(3){bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}
  #frame i:nth-child(4){bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.55))}
  #flash{position:fixed;inset:0;pointer-events:none;z-index:3;background:#cfe0ff;opacity:0}

  /* ---------- 左上标题 / 天气状态 ---------- */
  #hud-tl{position:fixed;top:22px;left:26px;z-index:6;pointer-events:none;user-select:none}
  #hud-tl h1{font-family:'Chakra Petch';font-weight:700;font-size:32px;letter-spacing:3px;color:#fff;line-height:1}
  #hud-tl h1 span{color:transparent;-webkit-text-stroke:1.2px var(--amber)}
  #hud-tl .sub{margin-top:6px;font-size:12px;letter-spacing:4px;color:#8fa0b5}
  .wxrow{display:flex;gap:10px;align-items:stretch;margin-top:14px;pointer-events:auto}
  #wxchip{display:flex;align-items:center;gap:10px;background:var(--panel);
    border:1px solid var(--line);padding:9px 16px;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
  #wxi{font-size:18px;color:var(--cyan)}
  #wxn{font-size:14px;font-weight:700;letter-spacing:2px}
  #wxnext{font-style:normal;font-family:'Chakra Petch';font-size:12px;color:var(--amber);
    border-left:1px solid var(--line);padding-left:10px;min-width:44px;text-align:center}
  button{font-family:'Chakra Petch','Noto Sans SC';background:var(--panel);color:var(--ink);
    border:1px solid var(--line);padding:9px 14px;font-size:12px;letter-spacing:1px;
    cursor:pointer;transition:transform .15s,border-color .2s,color .2s,box-shadow .2s}
  button:hover{transform:translateY(-2px);border-color:var(--amber);color:#fff}
  button.on{border-color:var(--amber);color:var(--amber);box-shadow:0 0 14px rgba(255,180,84,.22)}
  button.cool.on{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(94,230,255,.22)}

  /* ---------- 右上数据面板 ---------- */
  #hud-tr{position:fixed;top:22px;right:26px;z-index:6;background:var(--panel);
    border:1px solid var(--line);padding:12px 16px;font-size:11px;letter-spacing:1px;
    color:#8fa0b5;min-width:150px;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
  #hud-tr div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
  #hud-tr b{font-family:'Chakra Petch';color:#fff;font-weight:600}
  #hud-tr b.hot{color:var(--amber)}

  /* ---------- 底部控制台 ---------- */
  #hud-b{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;
    background:var(--panel);border:1px solid var(--line);padding:10px.........完整代码请登录后点击上方下载按钮下载查看