代码语言：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,user-scalable=no">
<title>雨夜の街角 · 便利店微缩模型</title>
<style>
  html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#070a12;}
  canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
  canvas:active{cursor:grabbing;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<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';

/* ================================================================
   0. 渲染器 / 场景 / 相机 / 背景
================================================================ */
const canvas = document.getElementById('c');
const renderer = new THREE.WebGLRenderer({canvas, antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.setSize(innerWidth, innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x0d1526, 0.0125);

function canvasTex(w,h,fn,rx=1,ry=1){
  const c=document.createElement('canvas');c.width=w;c.height=h;
  fn(c.getContext('2d'),w,h);
  const t=new THREE.CanvasTexture(c);
  t.colorSpace=THREE.SRGBColorSpace;
  t.wrapS=t.wrapT=THREE.RepeatWrapping;t.repeat.set(rx,ry);
  t.anisotropy=4;return t;
}

scene.background = canvasTex(16,256,(g,w,h)=>{
  const gr=g.createLinearGradient(0,0,0,h);
  gr.addColorStop(0,'#04060e');gr.addColorStop(0.42,'#0c1424');
  gr.addColorStop(0.72,'#1a2138');gr.addColorStop(1,'#2b2440');
  g.fillStyle=gr;g.fillRect(0,0,w,h);
});

const camera = new THREE.PerspectiveCamera(42, innerWidth/innerHeight, 0.1, 220);

/* ================================================================
   1. 各类 Canvas 贴图
================================================================ */
const asphaltTex = canvasTex(128,128,(g,w,h)=>{
  g.fillStyle='#2a2e39';g.fillRect(0,0,w,h);
  for(let i=0;i<900;i++){g.fillStyle=`rgba(${130+Math.random()*50|0},${140+Math.random()*50|0},${165+Math.random()*50|0},${0.03+Math.random()*0.05})`;g.fillRect(Math.random()*w,Math.random()*h,1.6,1.6);}
  for(let i=0;i<14;i++){g.fillStyle='rgba(18,20,28,0.16)';g.beginPath();g.ellipse(Math.random()*w,Math.random()*h,6+Math.random()*16,4+Math.random()*10,Math.random()*3,0,7);g.fill();}
},5,5);

const walkTex = canvasTex(128,128,(g,w,h)=>{
  g.fillStyle='#4b5162';g.fillRect(0,0,w,h);
  for(let i=0;i<300;i++){g.fillStyle='rgba(200,210,230,0.03)';g.fillRect(Math.random()*w,Math.random()*h,2,2);}
  g.strokeStyle='rgba(26,30,42,0.65)';g.lineWidth=3;
  for(let i=0;i<=2;i++){g.beginPath();g.moveTo(i*64,0);g.lineTo(i*64,128);g.stroke();g.beginPath();g.moveTo(0,i*64);g.lineTo(128,i*64);g.stroke();}
},4,4);

const tileTex = canvasTex(128,128,(g,w,h)=>{
  g.fillStyle='#efe9dc';g.fillRect(0,0,w,h);
  g.strokeStyle='rgba(160,150,130,0.6)';g.lineWidth=2;
  for(let i=0;i<=4;i++){g.beginPath();g.moveTo(i*32,0);g.lineTo(i*32,128);g.stroke();g.beginPath();g.moveTo(0,i*32);g.lineTo(128,i*32);g.stroke();}
},7,7);

const glowTex = canvasTex(128,128,(g,w,h)=>{
  const gr=g.createRadialGradient(64,64,0,64,64,64);
  gr.addColorStop(0,'rgba(255,255,255,1)');gr.addColorStop(0.32,'rgba(255,255,255,0.42)');gr.addColorStop(1,'rgba(255,255,255,0)');
  g.fillStyle=gr;g.fillRect(0,0,w,h);
});

const streakTex = canvasTex(64,256,(g,w,h)=>{
  const lg=g.createLinearGradient(0,0,0,h);
  lg.addColorStop(0,'rgba(255,255,255,0.9)');lg.addColorStop(1,'rgba(255,255,255,0)');
  g.fillStyle=lg;g.fillRect(0,0,w,h);
  g.globalCompositeOperation='destination-in';
  const hg=g.createLinearGradient(0,0,w,0);
  hg.addColorStop(0,'rgba(0,0,0,0)');hg.addColorStop(0.5,'rgba(0,0,0,1)');hg.addColorStop(1,'rgba(0,0,0,0)');
  g.fillStyle=hg;g.fillRect(0,0,w,h);
});

const puddleTex = canvasTex(128,128,(g,w,h)=>{
  const draw=(cx,cy,r,a)=>{const gr=g.createRadialGradient(cx,cy,0,cx,cy,r);
    gr.addColorStop(0,`rgba(120,150,205,${a})`);gr.addColorStop(0.7,`rgba(80,105,160,${a*0.6})`);gr.addColorStop(1,'rgba(60,80,130,0)');
    g.fillStyle=gr;g.fillRect(0,0,w,h);};
  draw(64,64,60,0.62);draw(46,52,34,0.3);draw(84,78,30,0.25);
});

const ringTex = canvasTex(128,128,(g,w,h)=>{
  g.strokeStyle='rgba(190,215,255,0.85)';g.lineWidth=5;g.beginPath();g.arc(64,64,46,0,7);g.stroke();
  g.strokeStyle='rgba(190,215,255,0.28)';g.lineWidth=10;g.beginPath();g.arc(64,64,38,0,7);g.stroke();
});

function rainGlassTex(){
  return canvasTex(256,256,(g,w,h)=>{
    g.clearRect(0,0,w,h);
    for(let i=0;i<16;i++){
      const x=Math.random()*w;
      g.strokeStyle=`rgba(195,218,255,${0.14+Math.random()*0.24})`;
      g.lineWidth=0.6+Math.random()*1.5;
      g.beginPath();let px=x;g.moveTo(px,0);
      for(let y=0;y<=h;y+=8){px+=(Math.random()-0.5)*2.4;g.lineTo(px,y);}
      g.stroke();
      for(let j=0;j<3;j++){g.fillStyle='rgba(205,225,255,0.3)';g.beginPath();g.arc(px,Math.random()*h,1+Math.random()*2,0,7);g.fill();}
    }
    for(let i=0;i<130;i++){g.fillStyle=`rgba(200,225,255,${0.04+Math.random()*0.14})`;g.beginPath();g.arc(Math.random()*w,Math.random()*h,0.5+Math.random()*1.6,0,7);g.fill();}
  });
}
const rainGlassFast = rainGlassTex();
const rainGlassSlow = rainGlassTex();

function signTex(){
  return canvasTex(1024,160,(g,w,h)=>{
    g.fillStyle='#f4f7fb';g.fillRect(0,0,w,h);
    g.fillStyle='#2fa06e';g.fillRect(0,Math.floor(h*0.66),w,Math.floor(h*0.17));
    g.fillStyle='#2a6fd6';g.fillRect(0,Math.floor(h*0.83),w,Math.ceil(h*0.17));
    g.fillStyle='#f7b73d';g.beginPath();g.arc(86,58,38,0,7);g.fill();
    g.fillStyle='#f4f7fb';g.beginPath();g.arc(104,48,32,0,7);g.fill();
    g.fillStyle='#1d3f8f';g.textBaseline='middle';
    g.font='bold 72px "Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif';
    g.fillTe.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论