three做个三维黄昏寺庙微缩沙盘模型代码

代码语言:html

所属分类:其他

代码由glm-5.3-flash ai生成,可能有错误,仅供参考:点击查看提示词

代码描述:三维黄昏寺庙微缩沙盘模型

代码标签: three 三维 黄昏 寺庙 微缩 沙盘 模型 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>栖云寺 · 盛夏黄昏 — 微缩景观</title>
<style>
  html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#191627;}
  canvas{display:block;}
  .vignette{pointer-events:none;position:fixed;inset:0;z-index:10;
    background:radial-gradient(ellipse at center, transparent 58%, rgba(10,8,20,0.28) 100%);}
</style>
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
    "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
  }
}
</script>
</head>
<body>
<div class="vignette"></div>
<script type="module">
// scripts/standalone.ts
import * as THREE7 from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// src/components/scene/kit.ts
import * as THREE from "three";
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
var C = {
  ink: 2761784,
  tile: 4674668,
  tileDark: 3555668,
  ridge: 5924992,
  gold: 14264655,
  goldBright: 15911022,
  bronze: 7232056,
  bronzeLight: 9861450,
  woodRed: 10894128,
  woodRedDark: 8137507,
  woodDark: 4994343,
  wallCream: 15787469,
  wallWarm: 15127732,
  stoneBlue: 9082511,
  stoneLight: 11975854,
  stoneDark: 6582379,
  jade: 15394261,
  grass: 7971420,
  grassDark: 6261322,
  bamboo: 7647333,
  bambooDark: 5607758,
  pine: 4223055,
  pineDark: 3299905,
  ginkgo: 10464850,
  bush: 6263125,
  lotusLeaf: 5542764,
  lotusPink: 15844043,
  lotusCore: 15979644,
  water: 5213593,
  lantern: 14177341,
  lanternLit: 16750418,
  candle: 16763000,
  koiOrange: 15234620,
  koiWhite: 16052196,
  mist: 14213099,
  rock: 8226689,
  rockDark: 6253156,
  moss: 6130258,
  trunk: 6047284,
  trunkDark: 4666922,
  baseSide: 6248010,
  baseTop: 10659480,
  pathStone: 11843750
};
var _grad = null;
function gradientMap() {
  if (_grad)
    return _grad;
  const data = new Uint8Array([96, 150, 208, 255]);
  const t = new THREE.DataTexture(data, 4, 1, THREE.RedFormat);
  t.minFilter = THREE.NearestFilter;
  t.magFilter = THREE.NearestFilter;
  t.generateMipmaps = false;
  t.needsUpdate = true;
  _grad = t;
  return t;
}
var _matCache = new Map;
function toon(color, o = {}) {
  const key = `${color}|${o.emissive ?? 0}|${o.emissiveIntensity ?? 0}|${o.opacity ?? 1}|${o.side ?? 0}`;
  const hit = _matCache.get(key);
  if (hit)
    return hit;
  const m = new THREE.MeshToonMaterial({
    color,
    gradientMap: gradientMap(),
    emissive: o.emissive ?? 0,
    emissiveIntensity: o.emissiveIntensity ?? 1,
    transparent: o.transparent ?? false,
    opacity: o.opacity ?? 1,
    side: o.side ?? THREE.FrontSide
  });
  _matCache.set(key, m);
  return m;
}
var OUTLINE_VERT = `
uniform float uThick;
void main() {
  vec4 mvPosition;
  vec3 n;
  #ifdef USE_INSTANCING
    mvPosition = modelViewMatrix * instanceMatrix * vec4(position, 1.0);
    n = normalize(mat3(modelViewMatrix) * mat3(instanceMatrix) * normal);
  #else
    mvPosition = modelViewMatrix * vec4(position, 1.0);
    n = normalize(normalMatrix * normal);
  #endif
  float dist = max(-mvPosition.z, 0.001);
  float w = clamp(uThick * dist, 0.0045, 0.05);
  mvPosition.xyz += n * w;
  gl_Position = projectionMatrix * mvPosition;
}`;
var OUTLINE_FRAG = `
uniform vec3 uColor;
void main() { gl_FragColor = vec4(uColor, 1.0); }`;
function outlineMaterial(thick, color = C.ink) {
  return new THREE.ShaderMaterial({
    uniforms: { uThick: { value: thick }, uColor: { value: new THREE.Color(color) } },
    vertexShader: OUTLINE_VERT,
    fragmentShader: OUTLINE_FRAG,
    side: THREE.BackSide
  });
}
function addOutline(mesh, thick = 0.0016) {
  const m = new THREE.Mesh(mesh.geometry, outlineMaterial(thick));
  m.castShadow = false;
  m.receiveShadow = false;
  mesh.add(m);
  return mesh;
}
function addInstancedOutline(src, thick = 0.0016) {
  const m = new THREE.InstancedMesh(src.geometry, outlineMaterial(thick), src.count);
  const tmp = new THREE.Matrix4;
  for (let i = 0;i < src.count; i++) {
    src.getMatrixAt(i, tmp);
    m.setMatrixAt(i, tmp);
  }
  m.instanceMatrix.needsUpdate = true;
  m.frustumCulled = false;
  src.parent?.add(m);
}
var windTime = { value: 0 };
function applyWind(mat, amp = 0.05, freq = 1.3, instancedPhase = false) {
  mat.onBeforeCompile = (shader) => {
    shader.uniforms.uWindTime = windTime;
    shader.uniforms.uWindAmp = { value: amp };
    shader.uniforms.uWindFreq = { value: freq };
    shader.vertexShader = `uniform float uWindTime;
uniform float uWindAmp;
uniform float uWindFreq;
` + (instancedPhase ? `attribute float aPhase;
` : "") + shader.vertexShader.replace("#include <begin_vertex>", `#include <begin_vertex>
        {
          float wph = ${instancedPhase ? "(instanceMatrix[3].x * 0.8 + instanceMatrix[3].z * 0.6 + aPhase)" : "(position.x * 0.7 + position.z * 0.9)"};
          float wamp = uWindAmp * smoothstep(0.02, 1.4, position.y);
          float ws = sin(uWindTime * uWindFreq + wph) * 0.7 + sin(uWindTime * uWindFreq * 2.33 + wph * 1.7) * 0.3;
          transformed.x += ws * wamp;
          transformed.z += ws * 0.6 * wamp;
        }`);
  };
  mat.customProgramCacheKey = () => `wind|${amp}|${freq}|${instancedPhase ? 1 : 0}`;
}
function makeRegistry() {
  return { pendulums: [], flames: [], crowns: [], kois: [], smokeSpots: [], leafSpots: [] };
}
function canvasTexture(w, h, draw) {
  const cv = document.createElement("canvas");
  cv.width = w;
  cv.height = h;
  const ctx = cv.getContext("2d");
  draw(ctx);
  const t = new THREE.CanvasTexture(cv);
  t.colorSpace = THREE.SRGBColorSpace;
  t.anisotropy = 4;
  return t;
}
var _glowCache = new Map;
function glowTexture(key, stops) {
  const hit = _glowCache.get(key);
  if (hit)
    return hit;
  const t = canvasTexture(128, 128, (ctx) => {
    const g = ctx.createRadialGradient(64, 64, 2, 64, 64, 64);
    for (const [o, c] of stops)
      g.addColorStop(o, c);
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, 128, 128);
  });
  _glowCache.set(key, t);
  return t;
}
function xform(geo, o = {}) {
  const s = o.s === undefined ? [1, 1, 1] : typeof o.s === "number" ? [o.s, o.s, o.s] : o.s;
  const m = new THREE.Matrix4().compose(new THREE.Vector3(o.x ?? 0, o.y ?? 0, o.z ?? 0), new THREE.Quaternion().setFromEuler(new THREE.Euler(o.rx ?? 0, o.ry ?? 0, o.rz ?? 0)), new THREE.Vector3(s[0], s[1], s[2]));
  geo.applyMatrix4(m);
  return geo;
}
function mergeAll(geos) {
  const merged = BufferGeometryUtils.mergeGeometries(geos, false);
  geos.forEach((g) => g.dispose());
  return merged;
}
function mesh(geo, mat, o = {}) {
  const m = new THREE.Mesh(geo, mat);
  m.position.set(o.x ?? 0, o.y ?? 0, o.z ?? 0);
  m.rotation.set(o.rx ?? 0, o.ry ?? 0, o.rz ?? 0);
  m.castShadow = true;
  m.receiveShadow = true;
  return m;
}

// src/components/scene/architecture.ts
import * as THREE3 from "three";

// src/components/scene/shapes.ts
import * as THREE2 from "three";
function curvedHipRoof(o) {
  const { width: w, depth: d, height: h } = o;
  const ridge = o.ridge ?? w * 0.42;
  const lift = o.cornerLift ?? h * 0.18;
  const S = o.segs ?? 72, R = o.rows ?? 9;
  const per = 2 * (w + d);
  const corners = [0, w / per, (w + d) / per, (2 * w + d) / per];
  const sigma = 0.05;
  const pointAt = (u) => {
    let s = (u % 1 + 1) % 1 * per;
    if (s < w)
      return new THREE2.Vector2(-w / 2 + s, -d / 2);
    s -= w;
    if (s < d)
      return new THREE2.Vector2(w / 2, -d / 2 + s);
    s -= d;
    if (s < w)
      return new THREE2.Vector2(w / 2 - s, d / 2);
    s -= w;
    return new THREE2.Vector2(-w / 2, d / 2 - s);
  };
  const liftAt = (u) => {
    let best = 0;
    for (const cu of corners) {
      let du = Math.abs(u - cu);
      du = Math.min(du, 1 - du);
      best = Math.max(best, Math.exp(-(du * du) / (2 * sigma * sigma)));
    }
    return lift * best;
  };
  const pos = [];
  const idx = [];
  for (let i = 0;i <= S; i++) {
    const u = i / S;
    const e = pointAt(u);
    const l = liftAt(u);
    const rx = Math.max(-ridge / 2, Math.min(ridge / 2, e.x));
    for (let j = 0;j <= R; j++) {
      const v = j / R;
      const eh = Math.pow(v, 1.45);
      const x = e.x + (rx - e.x) * eh;
      const z = e.y + (0 - e.y) * eh;
      const y = h * Math.pow(v, 1.6) + l * (1 - v);
      pos.push(x, y, z);
    }
  }
  for (let i = 0;i < S; i++) {
    for (let j = 0;j < R; j++) {
      const a = i * (R + 1) + j;
      const b = (i + 1) * (R + 1) + j;
      idx.push(a, a + 1, b, a + 1, b + 1, b);
    }
  }
  const geo = new THREE2.BufferGeometry;
  geo.s.........完整代码请登录后点击上方下载按钮下载查看

网友评论0