three做个三维体素微缩建筑工地沙盘场景动画模拟代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：three做个三维体素微缩建筑工地沙盘场景动画模拟代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>体素微缩建筑工地沙盘 · Voxel Construction Diorama</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#0a0c10;
    font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;user-select:none}
  canvas{display:block}
  .hud{position:fixed;z-index:10;pointer-events:none;color:#dfe3ea}
  #title{top:18px;left:20px;background:rgba(16,18,24,.82);border:1px solid #2c313c;
    border-radius:6px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.5)}
  #title .stripe{height:9px;background:repeating-linear-gradient(-45deg,#f7c948 0 12px,#15161a 12px 24px)}
  #title h1{margin:10px 16px 2px;font:900 21px/1.1 "Arial Black","Microsoft YaHei",sans-serif;
    letter-spacing:.14em;color:#ffd23f;text-shadow:0 2px 0 #000}
  #title p{margin:3px 16px 11px;font-size:11.5px;color:#9aa3b2;letter-spacing:.28em}
  #help{left:20px;bottom:18px;background:rgba(16,18,24,.78);border:1px solid #2c313c;
    border-radius:6px;padding:10px 14px;font-size:12px;line-height:2;color:#aab2c0}
  #help b{color:#ffd23f;font-weight:700}
  kbd{background:#22262f;border:1px solid #3a4150;border-bottom-width:2px;border-radius:4px;
    padding:1px 7px;font:600 11px ui-monospace,Consolas,monospace;color:#e8ecf3;margin-right:4px}
  #stat{right:20px;bottom:18px;text-align:right;font:12px ui-monospace,Consolas,monospace}
  .chip{display:inline-block;background:rgba(16,18,24,.8);border:1px solid #2c313c;border-radius:5px;
    padding:4px 10px;margin:3px 0 0 6px;color:#cfd6e2}
  .chip i{font-style:normal;color:#ffd23f}
  #fps{color:#6ee7a0}
  #toast{left:50%;top:64px;transform:translateX(-50%);background:rgba(20,22,28,.92);
    border:1px solid #f7c948;border-radius:6px;padding:8px 22px;font-size:14px;color:#ffd23f;
    letter-spacing:.1em;opacity:0;transition:opacity .35s}
  #toast.on{opacity:1}
</style>
</head>
<body>
<div id="title" class="hud"><div class="stripe"></div>
  <h1>体素工地 · 沙盘</h1><p>VOXEL CONSTRUCTION SITE DIORAMA</p></div>
<div id="help" class="hud">
  <b>拖拽</b> 环视 &nbsp;<b>滚轮</b> 缩放 &nbsp;闲置自动环绕<br>
  <b>点击桌前旋钮</b> 速度 / 昼夜 / 尘土 &nbsp; <kbd>SPACE</kbd> 暴雨
</div>
<div id="stat" class="hud">
  <div id="fps" class="chip">FPS --</div>
  <div id="c1" class="chip">设备速度 <i>×1.0</i></div>
  <div id="c2" class="chip">昼夜循环 <i>开</i></div>
  <div id="c3" class="chip">尘土 <i>中</i></div>
  <div id="c4" class="chip">天气 <i>晴</i></div>
</div>
<div id="toast" class="hud"></div>

<script type="importmap">
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"}}
</script>
<script type="module">
import * as THREE from 'three';

/* ============ 基础 ============ */
const R=Math.random, TAU=Math.PI*2, M=THREE.MathUtils;
const clamp=M.clamp, lerp=M.lerp, ez=t=>t*t*(3-2*t);
let renderer;
try{
  renderer=new THREE.WebGLRenderer({antialias:true,powerPreference:'high-performance'});
}catch(e){document.body.innerHTML='<p style="color:#fff;padding:40px">WebGL 不可用</p>';throw e;}
renderer.setPixelRatio(Math.min(devicePixelRatio,1.75));
renderer.setSize(innerWidth,innerHeight);
renderer.shadowMap.enabled=true; renderer.shadowMap.type=THREE.PCFShadowMap;
renderer.toneMapping=THREE.ACESFilmicToneMapping; renderer.toneMappingExposure=1.22;
document.body.appendChild(renderer.domElement);
renderer.domElement.style.touchAction='none';

const scene=new THREE.Scene();
scene.background=new THREE.Color(0x10131a);
scene.fog=new THREE.FogExp2(0x10131a,0.010);
const camera=new THREE.PerspectiveCamera(46,innerWidth/innerHeight,0.1,140);
const TARGET=new THREE.Vector3(0,1.5,-0.8);

const cam={az:0.42,el:0.19,r:15.5,idle:0};
function applyCam(){
  cam.el=clamp(cam.el,0.06,0.85); cam.r=clamp(cam.r,8.5,22);
  const ce=Math.cos(cam.el);
  camera.position.set(TARGET.x+cam.r*ce*Math.sin(cam.az),
    Math.max(1.0,TARGET.y+cam.r*Math.sin(cam.el)), TARGET.z+cam.r*ce*Math.cos(cam.az));
  camera.lookAt(TARGET);
}
applyCam();

/* ============ 灯光 ============ */
const hemi=new THREE.HemisphereLight(0xbfd6ff,0x35291f,0.7); scene.add(hemi);
const sun=new THREE.DirectionalLight(0xfff2d9,1.4);
sun.castShadow=true; sun.shadow.mapSize.set(2048,2048);
const sc=sun.shadow.camera; sc.left=-16;sc.right=16;sc.top=16;sc.bottom=-16;sc.near=4;sc.far=75;
sun.shadow.bias=-0.0006; scene.add(sun); scene.add(sun.target);
sun.target.position.set(0,0.5,-0.8);
const pend=new THREE.PointLight(0xffc98a,9,20,1.7); pend.position.set(0,6.4,0.5); scene.add(pend);
const plPit=new THREE.PointLight(0xffe6b0,0,13,1.5); plPit.position.set(-3.9,3.6,0.4); scene.add(plPit);
const plYard=new THREE.PointLight(0xffe6b0,0,13,1.5); plYard.position.set(4.6,4.2,-0.3); scene.add(plYard);
const plOffice=new THREE.PointLight(0xffb066,0,9,1.6); plOffice.position.set(5.1,2.6,-2.3); scene.add(plOffice);

/* ============ 程序纹理 ============ */
function cnv(w,h,f){const c=document.createElement('canvas');c.width=w;c.height=h;f(c.getContext('2d'));
  const t=new THREE.CanvasTexture(c);t.colorSpace=THREE.SRGBColorSpace;return t;}
const RND=(function(){let s=7;return()=>((s=s*16807%2147483647)/2147483647);})();
const woodTex=cnv(512,512,g=>{g.fillStyle='#4a3320';g.fillRect(0,0,512,512);
  for(let i=0;i<230;i++){const y=RND()*512;g.strokeStyle=`rgba(${20+RND()*40|0},${12+RND()*22|0},8,${.12+RND()*.3})`;
    g.lineWidth=1+RND()*2.5;g.beginPath();g.moveTo(0,y);
    for(let x=0;x<=512;x+=32)g.lineTo(x,y+Math.sin(x*.02+i)*4+(RND()-.5)*4);g.stroke();}
  for(let i=0;i<8;i++){g.fillStyle=�.........完整代码请登录后点击上方下载按钮下载查看