three实现三维音乐喷泉代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由kimi-k3 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>三维音乐喷泉 · Three.js</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#050810;
    font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:#dfe8ff; }
  #app { position:fixed; inset:0; }
  canvas { display:block; }

  /* ---------- 开始遮罩 ---------- */
  #overlay { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 42%, rgba(10,18,38,.45), rgba(3,6,14,.85));
    transition:opacity .9s ease; }
  #overlay.hide { opacity:0; pointer-events:none; }
  .panel { text-align:center; padding:44px 58px; border-radius:22px;
    background:rgba(12,20,40,.55); border:1px solid rgba(120,170,255,.18);
    box-shadow:0 0 60px rgba(40,90,220,.25), inset 0 0 40px rgba(60,120,255,.06);
    backdrop-filter:blur(10px); }
  .panel h1 { font-size:38px; letter-spacing:12px; font-weight:700; text-indent:12px;
    background:linear-gradient(90deg,#5ee7ff,#7aa8ff,#c58bff,#5ee7ff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:16px; }
  .panel p { font-size:14px; color:#9fb4d8; line-height:2.0; letter-spacing:1px; }
  .panel p b { color:#cfe2ff; font-weight:600; }
  #startBtn { margin-top:30px; font-size:17px; letter-spacing:6px; padding:14px 50px 14px 56px;
    color:#eaf3ff; background:linear-gradient(135deg,#1d5cff,#7a3cff);
    border:none; border-radius:999px; cursor:pointer;
    box-shadow:0 0 24px rgba(80,120,255,.55); transition:transform .2s, box-shadow .2s; }
  #startBtn:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 42px rgba(120,150,255,.85); }
  .tip { margin-top:18px; font-size:12px; color:#6d81a5; letter-spacing:2px; }

  /* ---------- HUD ---------- */
  #hud { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:0; transition:opacity .8s; }
  #hud.show { opacity:1; }
  #title { position:absolute; top:18px; left:24px; font-size:15px; letter-spacing:5px; color:#bcd2ff;
    text-shadow:0 0 14px rgba(90,150,255,.7); }
  #title small { display:block; font-size:10px; color:#5f7398; letter-spacing:2px; margin-top:5px; }
  #btns { position:absolute; top:16px; right:20px; display:flex; gap:10px; pointer-events:auto; }
  .hbtn { width:42px; height:42px; border-radius:12px; border:1px solid rgba(130,170,255,.25);
    background:rgba(14,22,44,.6); color:#cfe0ff; font-size:18px; cursor:pointer;
    backdrop-filter:blur(6px); transition:all .2s; display:flex; align-items:center; justify-content:center; }
  .hbtn:hover { background:rgba(40,60,110,.7); box-shadow:0 0 14px rgba(90,140,255,.4); }
  .hbtn.off { opacity:.45; }
  #hint { position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    font-size:11px; letter-spacing:3px; color:#5f7398; white-space:nowrap; }
  #err { position:fixed; left:10px; bottom:10px; z-index:99; max-width:70%; color:#ff7b8a;
    font:12px/1.5 monospace; white-space:pre-wrap; display:none; }
</style>
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>
</head>
<body>
<div id="app"></div>

<div id="hud">
  <div id="title">三维音乐喷泉<small>MUSIC FOUNTAIN · THREE.JS + WEB AUDIO</small></div>
  <div id="btns">
    <button class="hbtn" id="rotBtn" title="自动环绕">🔄</button>
    <button class="hbtn" id="muteBtn" title="静音 / 取消静音">🔊</button>
  </div>
  <div id="hint">拖动旋转 · 滚轮缩放 · 右键平移 ｜ 相邻水柱触碰时会变色并迸发火花</div>
</div>

<div id="overlay">
  <div class="panel">
    <h1>音乐喷泉</h1>
    <p><b>9</b> 组喷头跟随音乐节拍喷射 · 喷头随旋律左右摇摆<br/>
       相邻水柱触碰时会<b>变色</b>并迸发火花 · 水面实时反射彩灯</p>
    <button id="startBtn">▶ 开始表演</button>
    <div class="tip">建议开启声音 🎧 · 音乐由 .........完整代码请登录后点击上方下载按钮下载查看