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

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

代码语言：html

所属分类：其他

代码由deepseek-4.1 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" />
<title>玻璃立方体 · 高山流水</title>
<style>
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #05070f; }
  canvas { display: block; }
  #title {
    position: fixed; left: 30px; top: 28px;
    color: rgba(190, 222, 255, .8);
    font: 600 15px/1.4 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: .34em;
    pointer-events: none; user-select: none;
    text-shadow: 0 0 22px rgba(80, 160, 255, .55);
  }
  #hint {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    color: rgba(180, 210, 245, .45);
    font: 400 12px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: .18em;
    pointer-events: none; user-select: none;
    white-space: nowrap;
  }
</style>
</head>
<body>
<div id="title">高 山 流 水</div>
<div id="hint">拖拽旋转 · 滚轮缩放</div>

<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 { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

/* ============================================================
   基础常量
   ============================================================ */
const S = 6;              // 玻璃立方体边长
const HALF = S / 2;
const WATER_Y = 0.45;     // 湖面高度

/* ============================================================
   渲染器 / 场景 / .........完整代码请登录后点击上方下载按钮下载查看