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

代码语言：html

所属分类：其他

代码由minimax-m3.1-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, maximum-scale=1, user-scalable=no" />
<title>高山流水 · 玻璃立方体微缩景观</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;overflow:hidden;background:#04060b;color:#e8f1ff;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;}
  #app{position:fixed;inset:0}
  canvas{display:block;touch-action:none}

  .hud{position:fixed;left:30px;top:28px;pointer-events:none;user-select:none;z-index:5}
  .hud h1{margin:0 0 10px;font-size:20px;font-weight:400;letter-spacing:.42em;color:#f4f8ff;
    text-shadow:0 2px 26px rgba(0,0,0,.75)}
  .hud .rule{width:52px;height:1px;background:linear-gradient(90deg,rgba(160,210,255,.85),rgba(160,210,255,0));margin:0 0 12px}
  .hud p{margin:0;font-size:11.5px;line-height:2.05;letter-spacing:.16em;color:rgba(196,220,252,.5);max-width:290px}

  .panel{position:fixed;right:26px;top:28px;display:flex;flex-direction:column;gap:9px;z-index:5}
  .btn{pointer-events:auto;cursor:pointer;width:146px;padding:10px 14px;font-size:11.5px;letter-spacing:.14em;
    color:rgba(216,234,255,.78);background:rgba(11,19,33,.46);border:1px solid rgba(150,190,255,.2);
    border-radius:10px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:.25s;text-align:left;
    font-family:inherit}
  .btn:hover{background:rgba(28,52,88,.6);color:#fff;border-color:rgba(160,205,255,.48)}
  .btn.on{background:rgba(40,110,180,.32);border-color:rgba(120,190,255,.55);color:#eaf4ff}

  .hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);font-size:10.5px;letter-spacing:.26em;
    color:rgba(190,215,250,.3);white-space:nowrap;pointer-events:none;z-index:5}

  #loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
    gap:20px;background:#04060b;z-index:30;transition:opacity .9s ease}
  #loader.hide{opacity:0;pointer-events:none}
  .ring{width:44px;height:44px;border:1px solid rgba(150,200,255,.16);border-top-color:rgba(180,222,255,.9);
    border-radius:50%;animation:spin 1.05s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .tag{font-size:10.5px;letter-spacing:.34em;color:rgba(200,222,255,.45)}
  .err{color:#ff9d9d;font-size:12.5px;letter-spacing:.05em;max-width:440px;text-align:center;line-height:1.9}
  @media (max-width:760px){
    .hud{left:18px;top:18px}.hud h1{font-size:16px;letter-spacing:.3em}
    .panel{right:14px;top:18px}.btn{width:118px;padding:8px 10px;font-size:10.5px}
  }
</style>
</head>
<body>
  <div id="app"></div>

  <div class="hud">
    <h1>高山流水</h1>
    <div class="rule"></div>
    <p>玻璃立方体中的微缩山水<br />程序化地形 · 雕刻水道 · 动态水体<br />拖拽旋转 · 滚轮缩放 · 右键平移</p>
  </div>

  <div class="panel">
    <button class="btn on" id="btnRotate">自动旋转 · 开</button>
    <button class="btn on" id="btnMist">水雾粒子 · 开</button>
    <button class="btn on" id="btnBloom">辉光 · 开</button>
    <button class="btn" id="btnReset">重置视角</button>
  </div>

  <div class="hint">GLASS DIORAMA &nbsp;·&nbsp; THREE.JS &nbsp;·&nbsp; WEBGL</div>

  <div id="loader">
    <div class="ring"></div>
    <div class="tag" id="loadTag">正在生成地形与水体…</div>
  </div>

  <script>
    // CDN 加载失败兜底提示
    setTimeout(function(){
      if (!window.MINI_DIORAMA){
        var tag = document.getElementById('loadTag');
        if (tag){
          tag.innerHTML = '资源加载超时，请检查网络后刷新<br/>（本页通过 CDN 加载 three.js）';
          tag.style.color = 'rgba(255,190,190,.75)';
          tag.style.lineHeight = '1.9';
        }
      }
    }, 15000);
  </script>

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
  }
}
</script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/addons/postprocess.........完整代码请登录后点击上方下载按钮下载查看