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

代码语言：html

所属分类：其他

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

代码描述：三维雨夜便利店建筑场景

下面为部分代码预览，完整代码请点击下载或在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>雨夜便利店 · 街角</title>
<style>
  html, body { margin: 0; height: 100%; overflow: hidden; background: #08070f; }
  canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

/* ============================================================
   0. 渲染器 / 场景 / 相机
   ============================================================ */
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0918);
scene.fog = new THREE.FogExp2(0x0d0c1e, 0.015);

const camera = new THREE.PerspectiveCamera(38, innerWidth / innerHeight, 0.1, 300);
camera.position.set(16, 12.5, 18);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0.2, 1.5, -2.6);
controls.enableDamping = true;
controls.dampingFactor = 0.07;
controls.minDistance = 9;
controls.maxDistance = 48;
controls.maxPolarAngle = Math.PI * 0.494;
controls.update();

/* ============================================================
   1. 三渲二 工具
   ============================================================ */
function makeGradient(steps) {
  const c = document.createElement('canvas');
  c.width = steps; c.height = 1;
  const ctx = c.getContext('2d');
  for (let i = 0; i < steps; i++) {
    const v = Math.round(255 * (0.46 + 0.54 * (i / (steps - 1))));
    ctx.fillStyle = `rgb(${v},${v},${v})`;
    ctx.fillRect(i, 0, 1, 1);
  }
  const t = new THREE.CanvasTexture(c);
  t.minFilter = THREE.NearestFilter;
  t.magFilter = THREE.NearestFilter;
  t.generateMipmaps = false;
  return t;
}
const GRAD = makeGradient(3);

const toon = (color, extra = {}) =>
  new THREE.MeshToonMaterial({ color, gradientMap: GRAD, ...extra });

// 轮廓线材质（背面外扩）
const _outlineCache = {};
function outlineMaterial(w) {
  const k = w.toFixed(4);
  if (_outlineCache[k]) return _outlineCache[k];
  const m = new THREE.ShaderMaterial({
    uniforms: {
      uWidth: { value: w },
      uColor: { value: new THREE.Color(0x17131f) }
    },
    vertexShader: /* glsl */`
      uniform float uWidth;
      void main() {
        vec3 p = position + normalize(normal) * uWidth;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
      }`,
    fragmentShader: /* glsl */`
      uniform vec3 uColor;
      void main() { gl_FragColor = vec4(uColor, 1.0); }`,
    side: THREE.BackSide
  });
  _outlineCache[k] = m;
  return m;
}

function addMesh(parent, geo, mat, o = {}) {
  const g = new THREE.Group();
  const m = new THREE.Mesh(geo, mat);
  m.castShadow = o.cast !== false;
  m.receiveShadow = o.receive !== false;
  g.add(m);
  if (o.outline) {
    const om = new THREE.Mesh(geo, outlineMaterial(o.ow ?? 0.016));
    om.castShadow = false;
    om.receiveShadow = false;
    g.add(om);
  }
  if (o.pos) g.position.set(o.pos[0], o.pos[1], o.pos[2]);
  if (o.rot) g.rotation.set(o.rot[0], o.rot[1], o.rot[2]);
  if (o.scale) g.scale.set(o.scale[0], o.scale[1], o.scale[2]);.........完整代码请登录后点击上方下载按钮下载查看