three实现三维迪士尼乐园烟花秀代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash 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>夜光城堡 · 程序化烟花秀</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #05070f;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
  canvas { display: block; }

  /* ---------- 左上角毛玻璃控制面板 ---------- */
  #panel {
    position: fixed; top: 18px; left: 18px; z-index: 20; width: 296px;
    padding: 16px 18px 14px; border-radius: 18px; color: #eef1ff;
    background: linear-gradient(160deg, rgba(44,54,100,.50), rgba(14,18,40,.42));
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
    user-select: none;
  }
  .panel-title {
    font-size: 17px; font-weight: 700; letter-spacing: .5px;
    background: linear-gradient(90deg, #ffd9a8, #ff9ecf 45%, #9db4ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .panel-sub { font-size: 11px; color: rgba(238,241,255,.55); margin: 3px 0 14px; letter-spacing: 1.5px; }
  .ctl { margin-bottom: 13px; }
  .ctl-head { display: flex; justify-content: space-between; font-size: 12.5px;
    color: rgba(238,241,255,.85); margin-bottom: 6px; }
  .ctl-head span:last-child { color: #9db4ff; font-variant-numeric: tabular-nums; }
  input[type=range] { width: 100%; accent-color: #8aa4ff; cursor: pointer; height: 18px; }
  .seg { display: flex; gap: 6px; }
  .seg button {
    flex: 1; padding: 7px 0; font-size: 12.5px; color: #cdd6f4; cursor: pointer;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; transition: all .18s; font-family: inherit;
  }
  .seg button:hover { background: rgba(255,255,255,.15); }
  .seg button.active {
    background: linear-gradient(135deg, #5b7cfa, #9a5bff); border-color: transparent;
    color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(110,90,250,.45);
  }
  .launch {
    width: 100%; margin-top: 2px; padding: 10px 0; border: none; border-radius: 12px;
    cursor: pointer; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 3px;
    font-family: inherit; background: linear-gradient(135deg, #ff7ab8, #8a5bff);
    box-shadow: 0 6px 20px rgba(200,90,220,.4); transition: transform .12s, box-shadow .2s;
  }
  .launch:hover { box-shadow: 0 8px 26px rgba(210,100,230,.6); }
  .launch:active { transform: scale(.96); }
  .hint { margin-top: 11px; font-size: 11px; line-height: 1.7; color: rgba(238,241,255,.5); text-align: center; }

  /* 暗角，增加影院感 */
  #vignette { position: fixed; inset: 0; z-index: 10; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(2,3,12,.5) 100%); }

  /* 加载遮罩 */
  #loading { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center;
    justify-content: center; color: rgba(238,241,255,.85); font-size: 14px;
    letter-spacing: 4px; background: #05070f; transition: opacity .6s; }

  @media (max-width: 480px) { #panel { width: calc(100vw - 28px); top: 12px; left: 14px; } }
</style>
</head>
<body>

<div id="vignette"></div>

<div id="panel">
  <div class="panel-title">夜光城堡 · 烟花秀</div>
  <div class="panel-sub">THREE.JS 程序化粒子烟花</div>

  <div class="ctl">
    <div class="ctl-head"><span>自动发射频率</span><span id="freqVal">每 1.8 秒</span></div>
    <input id="freq" type="range" min="0" max="100" step="1" value="76"/>
  </div>

  <div class="ctl">
    <div class="ctl-head&qu.........完整代码请登录后点击上方下载按钮下载查看