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

代码语言：html

所属分类：其他

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

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

下面为部分代码预览，完整代码请点击下载或在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>NIGHTFALL 夜幕 · 户外电音节舞台</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700&family=Noto+Sans+SC:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root{ --acc:#6ef3ff; --txt:#dfe7ee; --dim:#9db0bf; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; overflow:hidden; background:#04060b;
    font-family:'Noto Sans SC',sans-serif; color:var(--txt); }
  #c{ position:fixed; inset:0; display:block; }
  #fade{ position:fixed; inset:0; background:#02040a; z-index:50; pointer-events:none;
    transition:opacity 1.8s ease; }
  #fade.out{ opacity:0; }
  .hud{ position:fixed; z-index:10; opacity:0; animation:fadein 1.2s ease .6s forwards; }
  @keyframes fadein{ to{opacity:1} }

  /* 左上标题 */
  .title{ left:26px; top:24px; pointer-events:none; }
  .title .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.34em;
    color:var(--acc); margin-bottom:10px; }
  .title h1{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,44px);
    line-height:1; color:#fff; letter-spacing:.02em; text-shadow:0 2px 30px rgba(110,243,255,.25); }
  .title h1 span{ display:block; font-family:'Noto Sans SC',sans-serif; font-weight:700;
    font-size:.42em; letter-spacing:1.1em; margin-top:10px; color:var(--dim); }
  .title .sub{ margin-top:12px; font-size:11px; letter-spacing:.18em; color:var(--dim);
    border-top:1px solid rgba(255,255,255,.14); padding-top:9px; width:fit-content; }

  /* 左下控制 */
  .ctrl{ left:26px; bottom:24px; display:flex; flex-direction:column; gap:11px;
    background:rgba(7,11,18,.62); border:1px solid rgba(110,243,255,.16); border-radius:16px;
    padding:16px 18px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .ctrl .btns{ display:flex; flex-wrap:wrap; gap:8px; }
  .btn{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
    font-family:'IBM Plex Mono','Noto Sans SC',monospace; font-size:11.5px; letter-spacing:.08em;
    color:#c6d2dc; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.15);
    border-radius:999px; padding:8px 15px; transition:all .18s ease; white-space:nowrap; }
  .btn svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .btn:hover{ border-color:var(--acc); color:var(--acc); }
  .btn.on{ border-color:var(--acc); color:var(--acc); background:rgba(110,243,255,.12);
    box-shadow:0 0 18px rgba(110,243,255,.15) inset; }
  .wx-line{ display:flex; align-items:center; gap:12px; font-family:'IBM Plex Mono',monospace;
    font-size:10px; letter-spacing:.1em; color:var(--dim); }
  .wx-line .bar{ flex:1; height:2px; min-width:130px; background:rgba(255,255,255,.12);
    border-radius:2px; overflow:hidden; }
  .wx-line .bar i{ display:block; height:100%; width:0%; background:var(--acc);
    border-radius:2px; transition:width .4s linear; }

  /* 右下读数 */
  .readout{ right:26px; bottom:24px; font-family:'IBM Plex Mono',monospace; font-size:11px;
    background:rgba(7,11,18,.55); border:1px solid rgba(255,255,255,.1); border-radius:14px;
    padding:14px 16px; backdrop-filter:blur(12px); min-width:212px; }
  .readout .row{ display:flex; justify-content:space-between; gap:22px; padding:3.5px 0; }
  .readout .row span{ color:var(--dim); letter-spacing:.12em; }
  .readout .row b{ font-weight:500; color:#fff; letter-spacing:.04em; }
  .readout .row b.wx{ color:var(--acc); }

  .hint{ right:26px; top:24px; font-family:'IBM Plex Mono',monospace; font-size:10px;
    letter-spacing:.16em; color:var(--dim); pointer-events:none; text-align:right; }

  @media (max-width:720px){
    .title{ left:16px; top:14px; } .ctrl{ left:16px; bottom:14px; padding:12px; gap:8px; }
    .readout{ display:none; } .hint{ display:none; }
    .btn{ font-size:10.5px; padding:7px 11px; }
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="fade"></div>

<header class="hud title">
  <div class="eyebrow">OPEN-AIR FESTIVAL · LIVE 3D</div>
  <h1>NIGHTFALL<span>夜幕</span></h1>
  <div class="sub">户外主舞台 / 激光秀 / 随机天气系统</div>
</header>

<div class="hud hint">拖拽旋转 · 滚轮缩放 · 右键平移</div>

<div class="hud ctrl">
  <div class="btns">
    <button class="btn" id="btnSound">
      <svg viewBox="0 0 16 16"><circle cx="5" cy="12" r="2.4"/><path d="M7.4 12V4.2l6-1.4v6.6"/><circle cx="10.8" cy="10.6" r="2.4"/></svg>
      <span id="btnSoundTxt">开启音效</span></button>
    <button class="btn" id="btnLaser">
      <svg viewBox="0 0 16 16"><path d="M9 1L3 9h4l-1 6 7-9H8l1-5z"/></svg>
      <span id="btnLaserTxt">激光 · 自动</span></button>
    <button class="btn" id="btnCam">
      <svg vie.........完整代码请登录后点击上方下载按钮下载查看