three实现三维海边便利店场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-v4.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">
<title>盛夏黄昏 · 海边便利店</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#0a0f1c;}
  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.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x8fa8c4, 0.0032);

const camera = new THREE.PerspectiveCamera(38, innerWidth / innerHeight, 0.5, 800);
camera.position.set(34, 25, 39);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(-0.5, 3.2, 0.5);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.minDistance = 16;
controls.maxDistance = 95;
controls.minPolarAngle = 0.12;
controls.maxPolarAngle = Math.PI * 0.488;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.32;

let idleTimer = null;
controls.addEventListener('start', () => {
  controls.autoRotate = false;
  if (idleTimer) clearTimeout(idleTimer);
});
controls.addEventListener('end', () => {
  idleTimer = setTimeout(() => { controls.autoRotate = true; }, 7000);
});

/* ============================================================
   1. 工具函数
   ============================================================ */
const gradData = new Uint8Array([70, 145, 215, 255]);
const gradientMap = new THREE.DataTexture(gradData, gradData.length, 1, THREE.RedFormat);
gradientMap.minFilter = THREE.NearestFilter;
gradientMap.magFilter = THREE.NearestFilter;
gradientMap.generateMipmaps = false;
gradientMap.needsUpdate = true;

const toonMat = (color, opts = {}) =>
  new THREE.MeshToonMaterial({ color, gradientMap, ...opts });

const glowMat = (color, opts = {}) =>
  new THREE.MeshBasicMaterial({ color, ...opts });

const outlineMat = new THREE.MeshBasicMaterial({
  color: 0x1b1a26, side: THREE.BackSide
});

function addOutline(mesh, s = 0.03) {
  const o = new THREE.Mesh(mesh.geometry, outlineMat);
  o.scale.setScalar(1 + s);
  mesh.add(o);
  return mesh;
}

let _seed = 20240801;
function rnd() {
  _seed = (_seed * 16807) % 2147483647;
  return (_seed - 1) / 2147483646;
}

function pick(arr) { return arr[Math.floor(rnd() * arr.length)]; }

function makeTextTexture(text, opt = {}) {
  const {
    fg = '#1e7f8e', bg = null,
    font = 'bold 150px "Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif',
    w = 1024, h = 256
  } = opt;
  const c = document.createElement('canvas');
  c.width = w; c.height = h;
  const ctx = c.getContext('2d');
  if (bg) { ctx.fillStyle = bg; ctx.fillRect(0, 0, w, h); }
  ctx.fillStyle = fg;
  ctx.font = font;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, w / 2, h / 2 + 6);
  const tex = new THREE.CanvasTexture(c);
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.anisotropy = 8;
  return tex;
}

const box = (w, h, d, mat) => new THREE.Mesh(new THREE.BoxGeometry(w, h, d), mat);

/* ============================================================
   2. 灯光
   ============================================================ */
scene.add(new THREE.HemisphereLight(0x9cc0e6, 0xd6a882, 1.05));
scene.add(new THREE.AmbientLight(0x51628c, 0.32));

const sun = new THREE.DirectionalLight(0xffb177, 1.35);
sun.position.set(-26, 16, -46);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -30;
sun.shadow.camera.right = 30;
sun.shadow.camera.top = 30;
sun.shadow.camera.bottom = -30;
sun.shadow.camera.near = 1;
sun.shadow.camera.far = 140;
sun.shadow.bias = -0.0012;
sun.shadow.normalBias = 0.025;
scene.add(sun);

const fill = new THREE.DirectionalLight(0x8fb6dd, 0.42);
fill.position.set(36, 22, 44);
scene.add(fill);

/* ============================================================
   3. 天空
   ============================================================ */
function buildSky() {
  const geo = new THREE.SphereGeometry(320, 40, 28);
  const mat = new THREE.ShaderMaterial({
    side: THREE.BackSide,
    depthWrite: false,
    fog: false,
    vertexShader: `
      varying vec3 vDir;
      void main(){
        vDir = normalize(position);
     .........完整代码请登录后点击上方下载按钮下载查看