three做个三维公园池塘亭子场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：三维公园池塘亭子

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公园池塘 · Three.js 随机天气</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#000;font-family:"Microsoft YaHei",system-ui,sans-serif;}
  #panel{
    position:fixed;left:16px;top:16px;z-index:10;color:#fff;
    background:rgba(10,20,30,.45);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.15);border-radius:14px;
    padding:14px 16px;width:300px;user-select:none;
  }
  #panel h1{font-size:18px;margin:0 0 8px;}
  #winfo{font-size:14px;margin-bottom:4px;}
  #cd{font-size:12px;opacity:.75;margin-bottom:10px;}
  #btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
  #btns button{
    background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
    border-radius:8px;padding:5px 9px;font-size:12px;cursor:pointer;transition:.2s;
  }
  #btns button:hover{background:rgba(255,255,255,.25);}
  #btns button.active{background:#3d8fd9;border-color:#7cc0ff;}
  #autoWrap{font-size:13px;display:flex;align-items:center;gap:6px;margin-bottom:8px;cursor:pointer;}
  #tip{font-size:12px;opacity:.8;line-height:1.6;border-top:1px solid rgba(255,255,255,.15);padding-top:8px;}
</style>
</head>
<body>
<div id="panel">
  <h1>🏞️ 公园池塘</h1>
  <div id="winfo">当前天气：<b id="wlabel">☀️ 晴</b></div>
  <div id="cd">下次随机切换：--</div>
  <div id="btns"></div>
  <label id="autoWrap"><input type="checkbox" id="autoChk" checked>自动随机天气</label>
  <div id="tip">🖱️ 拖动旋转 · 滚轮缩放 · 右键平移<br>🐟 点击水面可以喂鱼，鱼群会聚过来！</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';

/* ================= 基础 ================= */
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xcfe8ff, 0.0018);

const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 1000);
camera.position.set(21, 10, 25);

const renderer = new THREE.WebGLRenderer({antialias:true});
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.05;
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1, 0);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.495;
controls.minDistance = 5;
controls.maxDistance = 90;

const clock = new THREE.Clock();
const rnd = (a,b)=>a+Math.random()*(b-a);

/* ================= 灯光 ================= */
const sun = new THREE.DirectionalLight(0xfff2d9, 2.2);
sun.position.set(60, 80, 25);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -48; sun.shadow.camera.right = 48;
sun.shadow.camera.top = 48;  sun.shadow.camera.bottom = -48;
sun.shadow.camera.near = 5;  sun.shadow.camera.far = 250;
sun.shadow.bias = -0.0004; sun.shadow.normalBias = 0.3;
scene.add(sun);

const hemi = new THREE.HemisphereLight(0xcfe8ff, 0x55663a, 0.9);
scene.add(hemi);

/* ================= 天空 ================= */
const skyMat = new THREE.ShaderMateria.........完整代码请登录后点击上方下载按钮下载查看