three实现三维公园凉亭池塘场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：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>公园池塘 · Park Pond</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;height:100%;background:#0b1420;
    font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;}
  #app{position:fixed;inset:0;}
  #panel{position:fixed;top:16px;left:16px;z-index:10;color:#eef4fb;background:rgba(13,20,30,.60);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);
    border-radius:16px;padding:14px 16px;max-width:360px;box-shadow:0 8px 30px rgba(0,0,0,.35);user-select:none;}
  #panel h1{font-size:16px;margin:0 0 4px;font-weight:600;letter-spacing:.5px;}
  #panel .sub{font-size:11px;opacity:.65;margin-bottom:10px;}
  #status{display:flex;align-items:center;gap:7px;font-size:14px;margin-bottom:10px;}
  #wIcon{font-size:20px;line-height:1;}
  #wName{font-weight:600;}
  #count{font-size:11px;opacity:.55;margin-left:auto;padding-left:10px;}
  #btns{display:flex;flex-wrap:wrap;gap:6px;}
  .wbtn{cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#eef4fb;
    border-radius:9px;padding:5px 10px;font-size:12px;transition:.18s;font-family:inherit;}
  .wbtn:hover{background:rgba(255,255,255,.2);}
  .wbtn.active{background:#3f8fe0;border-color:#5aa9f5;color:#fff;}
  #hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:10;color:rgba(255,255,255,.78);
    background:rgba(13,20,30,.45);backdrop-filter:blur(8px);border-radius:999px;padding:6px 16px;font-size:12px;
    border:1px solid rgba(255,255,255,.10);user-select:none;white-space:nowrap;}
  #err{position:fixed;inset:0;display:none;place-items:center;color:#fff;background:#101820;z-index:99;font-size:14px;}
</style>
</head>
<body>
<div id="app"></div>
<div id="panel">
  <h1>🏞️ 公园池塘</h1>
  <div class="sub">Three.js · 锦鲤 · 凉亭 · 假山瀑布 · 随机天气</div>
  <div id="status">
    <span id="wIcon">☀️</span><span>当前天气：</span><span id="wName">晴</span><span id="count"></span>
  </div>
  <div id="btns">
    <button class="wbtn active" data-mode="auto">🔄 自动</button>
    <button class="wbtn" data-w="sunny">☀️ 晴</button>
    <button class="wbtn" data-w="cloudy">⛅ 多云</button>
    <button class="wbtn" data-w="rain">🌧️ 雨</button>
    <button class="wbtn" data-w="storm">⛈️ 雷雨</button>
    <button class="wbtn" data-w="snow">❄️ 雪</button>
  </div>
</div>
<div id="hint">🖱️ 左键拖拽旋转 · 滚轮缩放 · 右键平移</div>
<div id="err"><div>抱歉，当前浏览器不支持 WebGL。</div></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';

/* ================= 基础渲染 ================= */
let renderer;
try {
  renderer = new THREE.WebGLRenderer({ antialias: true });
} catch (e) {
  document.getElementById('err').style.display = 'grid';
  throw e;
}
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.08;
document.getElementById('app').appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x9fc7ec);
scene.fog = new THREE.FogExp2(0xcfe0ef, 0.0036);

const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 500);
camera.position.set(17, 10.5, 21);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.8, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.maxPolarAngle = Math.PI * 0.495;
controls.minDistance = 6;
controls.maxDistance = 75;

/* 可复现随机数 */
let _seed = 20240521;
function rand() {
  _seed = (_seed * 1664525 + 1013904223) >>> 0;
  return _seed / 4294967296;
}
function angDiff(a, b) {
  let d = a - b;
  while (d > Math.PI) d -= Math.PI * 2;
  while (d < -Math.........完整代码请登录后点击上方下载按钮下载查看