three实现带随机天气系统的逼真山水三维场基漫游体验代码-html代码-BFW代码库

three实现带随机天气系统的逼真山水三维场基漫游体验代码

代码语言：html

所属分类：三维

代码描述：three实现带随机天气系统的逼真山水三维场基漫游体验代码，可移动位置，可游泳，可爬山，可切换天气。

下面为部分代码预览，完整代码请点击下载或在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:34px;margin:0 0 14px;letter-spacing:4px}
  #overlay p{margin:4px;font-size:15px;opacity:.9}
  #overlay .tip{margin-top:22px;font-size:18px;color:#9fe0ff}
  #hud{position:fixed;left:14px;top:14px;color:#fff;font-size:13px;background:rgba(0,0,0,.38);
    padding:10px 14px;border-radius:8px;line-height:1.7;pointer-events:none;text-shadow:0 1px 2px #000;z-index:5;min-width:190px}
  #hud b{color:#ffe08a}
  #crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
    background:rgba(255,255,255,.85);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>
  <p>鼠标：转动视角 &nbsp;|&nbsp; W A S D：移动 &nbsp;|&nbsp; Shift：奔跑 &nbsp;|&nbsp; 空格：跳跃</p>
  <p>T：立即切换天气 &nbsp;|&nbsp; ESC：释放鼠标</p>
  <p>可以爬上山顶，走进湖里会开始游泳</p>
  <div class="tip">点击任意位置开始</div>
</div>
<div id="hud"></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. 噪声工具（2D Simplex）
   ================================================================== */
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 : .........完整代码请登录后点击上方下载按钮下载查看