three实现三维高山流水瀑布玻璃微缩场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由hy4 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, maximum-scale=1.0, user-scalable=no">
<title>高山流水 · 玻璃立方体中的一方天地</title>
<style>
  :root{
    --ink:#eaf7fb;
    --dim:rgba(226,244,250,.62);
    --line:rgba(190,230,242,.20);
    --glass:rgba(15,34,46,.42);
    --accent:#8fe4f5;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{width:100%;height:100%;overflow:hidden;background:#060d16}
  body{
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
    color:var(--ink);-webkit-font-smoothing:antialiased;
  }
  #stage{position:fixed;inset:0}
  canvas{display:block;width:100%;height:100%}

  /* ---------- 界面 ---------- */
  .hud{position:fixed;inset:0;pointer-events:none;z-index:5}
  .brand{position:absolute;top:34px;left:40px;user-select:none}
  .brand .cn{
    font-family:"Songti SC","STSong","SimSun",serif;
    font-size:30px;letter-spacing:.30em;font-weight:400;
    text-shadow:0 2px 24px rgba(120,220,255,.35);
  }
  .brand .en{
    margin-top:9px;font-size:10px;letter-spacing:.34em;
    color:var(--dim);text-transform:uppercase;
  }
  .brand .rule{
    width:52px;height:1px;margin-top:16px;
    background:linear-gradient(90deg,var(--accent),transparent);
  }
  .brand .desc{margin-top:14px;font-size:11px;letter-spacing:.16em;color:rgba(226,244,250,.42);line-height:1.9}

  .panel{
    position:absolute;right:34px;bottom:36px;width:236px;pointer-events:auto;
    padding:18px 18px 16px;border-radius:16px;
    background:var(--glass);border:1px solid var(--line);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
  }
  .panel h2{
    font-size:10px;letter-spacing:.3em;font-weight:500;color:var(--dim);
    margin-bottom:14px;display:flex;align-items:center;gap:8px;
  }
  .panel h2::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
  .slider-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .slider-row label{font-size:11px;color:var(--dim);white-space:nowrap;letter-spacing:.1em}
  .slider-row output{font-size:10px;color:var(--accent);width:30px;text-align:right;font-variant-numeric:tabular-nums}
  input[type=range]{
    -webkit-appearance:none;appearance:none;flex:1;height:2px;border-radius:2px;
    background:rgba(180,225,240,.22);outline:none;cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
    background:#c9f2fb;border:2px solid rgba(15,40,55,.9);
    box-shadow:0 0 12px rgba(143,228,245,.8);cursor:pointer;
  }
  input[type=range]::-moz-range-thumb{
    width:12px;height:12px;border-radius:50%;background:#c9f2fb;
    border:2px solid rgba(15,40,55,.9);box-shadow:0 0 12px rgba(143,228,245,.8);cursor:pointer;
  }
  .btns{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  button{
    font:inherit;font-size:11px;letter-spacing:.06em;color:var(--ink);
    padding:9px 4px;border-radius:9px;cursor:pointer;
    border:1px solid rgba(190,230,242,.16);
    background:rgba(255,255,255,.045);transition:.22s ease;
    white-space:nowrap;
  }
  button:hover{background:rgba(143,228,245,.16);border-color:rgba(143,228,245,.42);transform:translateY(-1px)}
  button.off{color:rgba(226,244,250,.42);background:rgba(0,0,0,.12)}
  button.wide{grid-column:span 2}
  .hint{
    position:absolute;left:40px;bottom:38px;font-size:10px;letter-spacing:.15em;
    color:rgba(226,244,250,.38);line-height:2;
  }
  .hint kbd{
    font:inherit;color:var(--accent);border:1px solid rgba(143,228,245,.3);
    border-radius:4px;padding:1px 5px;margin:0 2px;
  }

  /* ---------- 加载 / 错误 ---------- */
  #loader{
    position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:22px;background:#060d16;
    transition:opacity .6s ease,visibility .6s ease;
  }
  #loader .lc{
    font-family:"Songti SC","STSong",serif;font-size:19px;letter-spacing:.5em;
    color:rgba(220,245,252,.82);
  }
  #loader .bar{width:150px;height:1px;background:rgba(160,220,240,.15);overflow:hidden}
  #loader .bar i{display:block;width:40%;height:100%;background:linear-gradient(90deg,transparent,#8fe4f5,transparent);a.........完整代码请登录后点击上方下载按钮下载查看