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

three实现三维音乐喷泉代码

代码语言：html

所属分类：其他

代码由claude-5.0 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, user-scalable=no">
<title>三维音乐喷泉动画</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#000;font-family:"Microsoft YaHei",Arial,sans-serif;}
  #container{width:100vw;height:100vh;display:block;touch-action:none;}
  #ui{
    position:fixed;top:16px;left:16px;z-index:10;
    background:rgba(10,20,40,0.55);
    backdrop-filter:blur(6px);
    border:1px solid rgba(120,200,255,0.3);
    border-radius:12px;
    padding:14px 18px;
    color:#e8f6ff;
    width:240px;
    box-shadow:0 4px 24px rgba(0,0,0,0.4);
  }
  #ui h2{margin:0 0 8px;font-size:16px;color:#7fd7ff;letter-spacing:1px;}
  #ui p{margin:4px 0;font-size:12px;line-height:1.5;color:#bcd9ea;}
  .btn{
    display:inline-block;
    margin:4px 4px 4px 0;
    padding:7px 14px;
    font-size:12px;
    color:#fff;
    background:linear-gradient(135deg,#1e90ff,#00c6ff);
    border:none;border-radius:20px;
    cursor:pointer;
    transition:.25s;
    user-select:none;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,198,255,0.5);}
  .btn:active{transform:translateY(0);}
  #fileBtn input{display:none;}
  #range{width:100%;margin-top:6px;}
  #status{margin-top:8px;font-size:11px;color:#8fe3ff;}
  #loading{
    position:fixed;inset:0;background:#020510;color:#7fd7ff;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;z-index:100;letter-spacing:2px;
  }
</style>
</head>
<body>
<div id="loading">正在加载三维场景...</div>
<div id="container"></div>
<div id="ui">
  <h2>🎶 音乐喷泉控制台</h2>
  <button class="btn" id="playBtn">▶ 播放模拟音乐</button>
  <label class="btn" id="fileBtn">📁 选择本地音乐
    <input type="file" id="fileInput" accept="audio/*">
  </label>
  <br>
.........完整代码请登录后点击上方下载按钮下载查看