three做个三维西湖水面第一人称划船体验场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由claude-fable-5.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维西湖水面第一人称划船体验

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>西湖泛舟 · 第一人称划船体验</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"Microsoft YaHei",Arial,sans-serif;}
  #overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:rgba(0,0,0,.65);color:#fff;cursor:pointer;z-index:20;text-align:center;}
  #overlay h1{font-size:36px;margin:0 0 6px;letter-spacing:6px}
  #overlay h2{font-size:15px;font-weight:normal;margin:0 0 18px;opacity:.8;letter-spacing:2px}
  #overlay p{margin:4px;font-size:15px;opacity:.92}
  #overlay .tip{margin-top:24px;font-size:18px;color:#9fe0ff}
  #hud{position:fixed;left:14px;top:14px;color:#fff;font-size:13px;background:rgba(0,0,0,.4);
    padding:10px 14px;border-radius:8px;line-height:1.75;pointer-events:none;text-shadow:0 1px 2px #000;z-index:5;min-width:210px}
  #hud b{color:#ffe08a}
  #place{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);color:#fff;font-size:22px;letter-spacing:6px;
    text-shadow:0 2px 6px #000;pointer-events:none;z-index:5;opacity:0;transition:opacity .8s}
  #crosshair{position:fixed;left:50%;top:50%;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;
    background:rgba(255,255,255,.7);box-shadow:0 0 4px #000;pointer-events:none;z-index:5}
  #flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
  #loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;
    background:#111;font-size:20px;z-index:30;letter-spacing:2px}
</style>
</head>
<body>
<div id="loading">正在生成西湖山水，请稍候…</div>
<div id="overlay">
  <h1>西 湖 泛 舟</h1>
  <h2>欲把西湖比西子，淡妆浓抹总相宜</h2>
  <p>鼠标：转动视角 &nbsp;|&nbsp; W / S：向前划 / 倒划 &nbsp;|&nbsp; A / D：左转 / 右转</p>
  <p>Shift：用力划 &nbsp;|&nbsp; T：立即切换天气 &nbsp;|&nbsp; ESC：释放鼠标</p>
  <p>可穿过苏堤六桥与断桥的桥洞，前往湖心亭、三潭印月…</p>
  <div class="tip">点击任意位置登船</div>
</div>
<div id="hud"></div>
<div id="place"></div>
<div id="crosshair"></div>
<div id="flash"></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 { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
import { Water } from 'three/addons/objects/Water.js';
import { Sky } from 'three/addons/objects/Sky.js';

/* ==================================================================
   1. 噪声工具
   ================================================================== */
class Noise {
  constructor(seed = 1337) {
    const perm = []; for (let i = 0; i < 256; i++) perm[i] = i;
    let s = seed; const rnd = () => { s = (s * 16807) % 2147483647; return s / 2147483647; };
    for (let i = 255; i > 0; i--) { const j = Math.floor(rnd() * (i + 1)); [perm[i], perm[j]] = [perm[j], perm[i]]; }
    this.p = new Uint8Array(512); for (let i = 0; i < 512; i++) this.p[i] = perm[i & 255];
  }
  grad(h, x, y) { h &= 7; const u = h < 4 ? x : y, v = h < 4 ? y : x; return ((h & 1) ? -u : u) + ((h & 2) ? -2 * v : 2 * v); }
  noise2(x, y) {
    const F2 = 0.3660254037844386, G2 = 0.21132486540518713;
    const s = (x + y) * F2, i = Math.floor(x + s), j = Math.floor(y + s);
    const t = (i + j) * G2, x0 = x - (i - t), y0 = y - (j - t);
    const i1 = x0 > y0 ? 1 : 0, j1 = x0 > y0 ? 0 : 1;
    const x1 = x0 - i1 + G2, y1 = y0 - j1 + G2, x2 = x0 - 1 + 2 * G2, y2 = y0 - 1 + 2 * G2;
    const ii = i & 255, jj = j & 255, p = this.p;
    let n = 0, t0 = 0.5 - x0 * x0 - y0 * y0;
    if (t0 > 0) { t0 *= t0; n += t0 * t0 * this.grad(p[ii + p[jj]], x0, y0); }
    let t1 = 0.5 - x1 * x1 - y1 * y1;
    if (t1 > 0) { t1 *= t1; n += t1 * t1 * this.grad(p[ii + i1 + p[jj + j1]], x1, y1); }
    let t2 = 0.5 - x2 * x2 - y2 * y2;
    if (t2 > 0) { t2 *= t2; n += t2 * t2 * this.grad(p[ii + 1 + p[jj + 1]], x2, y2); }
    return 70 * n;
  }
  fbm(x, y, oct = 5, lac = 2, gain = 0.5) {
    let a = 1, f = 1, sum = 0, norm = 0;
    for (let o = 0; o < oct; o++) { sum += a * this.noise2(x * f, y * f); norm += a; a *= gain; f *= lac; }
    return sum / norm;
  }
  ridged(x, y, oct = 5) {
    let a = 1, f = 1, sum = 0, norm = 0;
    for (let o = 0; o < oct; o++) { let n = 1 - Math.abs(this.noise2(x * f, y * f)); n *= n; sum += n * a; norm += a; a *= 0.5; f *= 2.1; }
    return sum / norm;
  }
}
const noise = new Noise(2024);
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const smoothstep = (a, b, x) => { const t = clamp((x - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); };
const rand = (a, b) => a + Math.random() * (b - a);

/* ==================================================================
   2. 西湖地形布局（-z 为北）
   ==================.........完整代码请登录后点击上方下载按钮下载查看