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