three实现三维荷塘月色景色场景代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：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">
<title>荷塘月色 · 假山曲径 · 漫游</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#04060d}
  canvas{display:block}
  body{animation:fadeIn 2s ease both;font-family:"Kaiti SC","STKaiti","KaiTi","Noto Serif SC",serif}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  #ui{position:fixed;top:26px;left:34px;z-index:10;pointer-events:none;color:#dfeaff}
  #ui h1{font-size:38px;font-weight:400;letter-spacing:12px;
    text-shadow:0 0 24px rgba(140,190,255,.45),0 2px 6px rgba(0,0,0,.6)}
  #ui p{margin-top:8px;font-size:13px;letter-spacing:5px;color:rgba(190,214,255,.6)}
  .pill{position:fixed;z-index:11;cursor:pointer;user-select:none;
    background:rgba(10,20,40,.5);border:1px solid rgba(150,190,255,.28);
    color:rgba(215,232,255,.9);padding:9px 20px;border-radius:999px;
    font-size:13px;letter-spacing:2px;backdrop-filter:blur(6px);transition:all .3s;font-family:inherit}
  .pill:hover{background:rgba(40,70,120,.6);border-color:rgba(175,212,255,.55)}
  #toggleBtn{top:32px;right:30px}
  #walkBar{bottom:26px;left:50%;transform:translateX(-50%);white-space:nowrap}
  #walkHint{position:fixed;bottom:22px;left:26px;z-index:10;display:none;pointer-events:none;
    color:rgba(200,220,250,.55);font-size:12px;letter-spacing:2px;line-height:1.9}
  #crosshair{position:fixed;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.75);transform:translate(-50%,-50%);z-index:9;display:none;
    box-shadow:0 0 6px rgba(140,190,255,.9);pointer-events:none}
  #vignette{position:fixed;inset:0;z-index:5;pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 55%, rgba(2,4,12,.6) 100%)}
</style>
</head>
<body>
<div id="ui"><h1>荷塘月色</h1><p>月色入户 · 荷风送香 · 曲径通幽</p></div>
<button id="toggleBtn" class="pill">⏸ 暂停旋转</button>
<div id="walkBar" class="pill">🚶 进入漫游 · WASD 移动 · 鼠标环视 · Shift 疾跑 · 空格跳跃</div>
<div id="walkHint">漫游中:WASD 移动 · 鼠标环视 · Shift 疾跑 · 空格跳跃 · ESC 退出</div>
<div id="crosshair"></div>
<div id="vignette"></div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/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/postprocessing/OutputPass.js';
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';

const rnd=(a=1,b)=>b===undefined?Math.random()*a:a+Math.random()*(b-a);
const clamp=(x,a,b)=>Math.max(a,Math.min(b,x));

/* ================= 地形高度场(漫游/攀登的基础) ================= */
const sstep=(a,b,x)=>{const t=clamp((x-a)/(b-a),0,1);return t*t*(3-2*t);};
const G=(x,z,cx,cz,s,A)=>A*Math.exp(-((x-cx)*(x-cx)+(z-cz)*(z-cz))/(2*s*s));
function groundH(x,z){
  const d=Math.hypot(x,z);
  let h=-1.7*sstep(16,9,d);                 // 荷塘盆地
  h+=1.15*sstep(14,23,d);                   // 环岸抬升
  h+=0.22*Math.sin(x*0.14)*Math.cos(z*0.11);
  h+=0.16*Math.sin(x*0.31+1.7)*Math.cos(z*0.27+0.6);
  h+=G(x,z,-15,-6,4.6,5.0);                 // 假山主峰
  h+=G(x,z,-19,-2,3.0,2.8);
  h+=G(x,z,-11,-12,2.8,2.2);
  h+=G(x,z,14,-9,4.2,0.9);                  // 凉亭小丘
  h+=G(x,z,10,14,5.0,1.2);
  h+=G(x,z,-8,16,4.0,1.0);
  h+=2.2*sstep(60,105,d);                   // 远景坡地
  return h;
}

/* ================= 渲染器 / 场景 / 相机 ================= */
const renderer=new THREE.WebGLRe.........完整代码请登录后点击上方下载按钮下载查看