three实现三维外滩音乐喷泉灯光秀动画代码-html代码-BFW代码库

three实现三维外滩音乐喷泉灯光秀动画代码

代码语言：html

所属分类：三维

代码描述：three实现三维外滩音乐喷泉灯光秀动画代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>上海外滩 · 黄浦江大型音乐喷泉灯光秀</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;
    font-family:"Microsoft YaHei","PingFang SC",sans-serif}
  #app{position:fixed;inset:0}
  #app canvas{display:block}
  #title{position:fixed;top:18px;left:22px;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.85);z-index:10}
  #title h1{font-size:13px;letter-spacing:6px;color:#7fd4ff;opacity:.85;font-weight:400}
  #title h2{font-size:24px;letter-spacing:3px;margin-top:4px;font-weight:700;
    background:linear-gradient(90deg,#ffe9a8,#ffb84d,#ff8a3d,#ffd28a);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  #title .sub{font-size:11px;color:#9ab8cc;letter-spacing:1px;margin-top:6px;opacity:.85}
  #status{position:fixed;top:20px;right:22px;font-size:12px;color:#ffd28a;z-index:10;
    background:rgba(8,12,24,.55);border:1px solid rgba(255,200,100,.25);
    padding:6px 12px;border-radius:20px;backdrop-filter:blur(6px)}
  #vis{position:fixed;left:0;bottom:0;width:100%;height:56px;pointer-events:none;opacity:.5;z-index:5}
  #controls{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:10;
    display:flex;align-items:center;gap:14px;padding:10px 16px;font-size:12px;
    background:rgba(8,12,24,.6);border:1px solid rgba(120,180,255,.18);
    border-radius:14px;backdrop-filter:blur(10px);flex-wrap:wrap;justify-content:center;max-width:94vw}
  #controls button{background:linear-gradient(135deg,#2a3a5f,#16213c);color:#cfe6ff;
    border:1px solid rgba(130,190,255,.4);padding:7px 14px;border-radius:9px;
    cursor:pointer;font-size:12px;transition:.2s}
  #controls button:hover{background:linear-gradient(135deg,#3a5a8f,#1c2c50);
    box-shadow:0 0 12px rgba(90,170,255,.4)}
  #track{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8fd0ff}
  #controls label{display:flex;align-items:center;gap:5px;color:#a8c4e0;white-space:nowrap}
  input[type=range]{width:80px;accent-color:#ffb84d}
  input[type=checkbox]{accent-color:#ffb84d}
  @media (max-width:760px){#title h2{font-size:16px}#controls{gap:8px;font-size:11px}}
</style>
</head>
<body>
<div id="app"></div>

<div id="title">
  <h1>SHANGHAI · THE BUND · HUANGPU RIVER</h1>
  <h2>上海外滩 · 黄浦江音乐喷泉灯光秀</h2>
  <p class="sub">Three.js 实时渲染 ｜ 拖拽旋转 · 滚轮缩放 · 双击切换自动镜头</p>
</div>
<div id="status">✨ 自动演示模式</div>
<canvas id="vis"></canvas>

<div id="controls">
  <button id="btnFile">📁 选择本地音乐</button>
  <button id="btnPlay">▶ 播放</button>
  <span id="track">未选择音乐</span>
  <label>音量 <input type="range" id="vol" min="0" max="1" step="0.01" value="0.9"></label>
  <label>灵敏度 <input type="range" id="sens" min="0.5" max="2.4" step="0.05" value="1.25"></label>
  <label><input type="checkbox" id="chkAuto" checked> 自动镜头</label>
  <label><input type="checkbox" id="chkBloom" checked> 辉光</labe.........完整代码请登录后点击上方下载按钮下载查看