three实现三维雨夜便利店建筑场景动画代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash 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>雨夜便利店 · 街角微缩</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#070a16}
  canvas{display:block}
</style>
</head>
<body>
<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 renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.setSize(innerWidth,innerHeight);
renderer.outputColorSpace=THREE.SRGBColorSpace;
renderer.toneMapping=THREE.NoToneMapping;
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

const scene=new THREE.Scene();
const camera=new THREE.PerspectiveCamera(38,innerWidth/innerHeight,0.1,300);
camera.position.set(21,14,26);
const controls=new OrbitControls(camera,renderer.domElement);
controls.target.set(-1.2,1.4,-0.6);
controls.enableDamping=true;
controls.dampingFactor=0.06;
controls.minDistance=7;
controls.maxDistance=58;
controls.maxPolarAngle=1.44;
controls.minPolarAngle=0.12;
controls.screenSpacePanning=false;

addEventListener('resize',()=>{
  camera.aspect=innerWidth/innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth,innerHeight);
});

/* ========== 三渲二材质 / 描边 / 工具 ========== */
const grad=(()=>{
  const d=new Uint8Array([80,80,80,255,135,135,135,255,200,200,200,255,255,255,255,255]);
  const t=new THREE.DataTexture(d,4,1,THREE.RGBAFormat);
  t.minFilter=THREE.NearestFilter;
  t.magFilter=THREE.NearestFilter;
  t.needsUpdate=true;
  return t;
})();
const _tm={};
function T(c,e){                       // 卡通材质（按色缓存）
  const k=c+'|'+(e||0);
  if(!_tm[k]){
    _tm[k]=new THREE.MeshToonMaterial({color:c,gradientMap:grad});
    if(e){_tm[k].emissive=new THREE.Color(c);_tm[k].emissiveIntensity=e;}
  }
  return _tm[k];
}
const _bm={};
function EK(c){                        // 纯自发光（缓存）
  if(!_bm[c])_bm[c]=new THREE.MeshBasicMaterial({color:c});
  return _bm[c];
}
function E(c){ return new THREE.MeshBasicMaterial({color:c}); }
function texMat(w,h,draw){ return new THREE.MeshBasicMaterial({map:ctex(w,h,draw)}); }

const _ol={};
function olMat(t,mode){                // BackSide 外扩壳描边
  mode=mode||'hull';
  const k=t+'|'+mode;
  if(!_ol[k]){
    const m=new THREE.MeshBasicMaterial({color:0x11101e,side:THREE.BackSide});
    m.onBeforeCompile=s=>{
      const dir=(mode==='hull')?'normalize(position)':'objectNormal';
      s.vertexShader=s.vertexShader.replace(
        '#include <begin_vertex>',
        '#include <begin_vertex>\ntransformed += '+dir+' * '+t.toFixed(4)+';'
      );
    };
    _ol[k]=m;
  }
  return _ol[k];
}
function addOL(m,t,mode){
  const o=new THREE.Mesh(m.geometry,olMat(t,mode));
  o.raycast=function(){};
  m.add(o);
  return m;
}

let WORLD=scene;                       // 当前挂载目标（默认场景）
function parent(g,fn){ const old=WORLD; WORLD=g; fn(); WORLD=old; }
function M(geo,mat,x,y,z,o){
  x=x||0; y=y||0; z=z||0; o=o||{};
  const m=new THREE.Mesh(geo,mat);
  m.position.set(x,y,z);
  if(o.rx)m.rotation.x=o.rx;
  if(o.ry)m.rotation.y=o.ry;
  if(o.rz)m.rotation.z=o.rz;
  if(o.ol)addOL(m,o.ol,o.olm);
  if(o.sh)m.castShadow=true;
  if(o.rc)m.receiveShadow=true;
  WORLD.add(m);
  return m;
}
function bx(w,h,d,mat,x,y,z,o){ return M(new THREE.BoxGeometry(w,h,d),mat,x,y,z,o); }
function cy(rt,rb,h,mat,x,y,z,o){
  o=o||{};
  const seg=Math.max(10,o.seg||16);
  return M(new THREE.CylinderGeometry(rt,rb,h,seg),mat,x,y,z,o);
}
function ctex(w,h,draw){
  const c=document.createElement('canvas');
  c.width=w; c.height=h;
  draw(c.getContext('2d'),w,h);
  const t=new THREE.CanvasTexture(c);
  t.colorSpace=THREE.SRGBColorSpace;
  return t;
}
const GT=ctex(128,128,(g,w,h)=>{
  const r=g.createRadialGradient(64,64,2,64,64,62);
  r.addColorStop(0,'rgba(255,255,255,0.9)');
  r.addColorStop(0.4,'rgba(255,255,255,0.28)');
  r.addColorStop(1,'rgba(255,255,255,0)');
  g.fillStyle=r;
  g.fillRect(0,0,w,h);
});
function glow(color,s,op,x,y,z){       // 光晕精灵（手动挂载）
  const sp=new THREE.Sprite(new THREE.SpriteMaterial({
    map:GT,color:color,transparent:true,opacity:op,
    blending:THREE.AdditiveBlending,depthWrite:false
  }));
  sp.scale.set(s,s,1);
  sp.position.set(x,y,z);
  sp.renderOrder=5;
  return sp;
}
const h1=n=>{const s=Math.sin(n*127.1)*43758.5453;return s-Math.floor(s);};
function flick(t,seed,amt){            // 霓虹闪烁
  let f=1-amt*(0.5+0.5*Math.sin(t*11.3+seed*7)*Math.sin(t*4.7+seed*3));
  if(h1(Math.........完整代码请登录后点击上方下载按钮下载查看