three实现三维山坡寺庙场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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">
<title>云隐寺 · 山坡古寺三维场景 (Three.js)</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0b0f14;
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    -webkit-user-select:none;user-select:none}
  #app{position:fixed;inset:0}
  canvas{display:block}
  #hud{position:fixed;inset:0;pointer-events:none;z-index:10}
  #title{position:absolute;left:26px;top:22px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
  #title h1{font-size:26px;letter-spacing:6px;font-weight:600;
    font-family:"KaiTi","STKaiti","Songti SC",serif}
  #title p{font-size:12px;letter-spacing:2px;opacity:.72;margin-top:6px}
  #panel{position:absolute;right:22px;top:22px;pointer-events:auto;width:250px;
    background:rgba(16,22,30,.52);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 14px 12px;
    box-shadow:0 12px 40px rgba(0,0,0,.35)}
  #panel .row{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
  #panel .lbl{font-size:11px;color:rgba(255,255,255,.55);width:32px;letter-spacing:2px}
  #panel button{flex:1 1 auto;pointer-events:auto;cursor:pointer;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.07);color:#e8eef5;font-size:12px;padding:6px 4px;border-radius:8px;
    transition:.22s;letter-spacing:1px;font-family:inherit}
  #panel button:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
  #panel button.on{background:linear-gradient(180deg,#d9a441,#b8802a);border-color:#e6c07a;color:#231a09;font-weight:600}
  #tip{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
    color:rgba(255,255,255,.6);font-size:12px;letter-spacing:1.5px;
    background:rgba(0,0,0,.28);padding:7px 16px;border-radius:20px;backdrop-filter:blur(6px)}
  #loading{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
    align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#1b2733,#070a0e 75%);
    color:#dfe7ef;transition:opacity .9s ease;letter-spacing:3px}
  #loading .ring{width:52px;height:52px;border:2px solid rgba(255,255,255,.16);
    border-top-color:#d9a441;border-radius:50%;animation:sp 1s linear infinite;margin-bottom:20px}
  @keyframes sp{to{transform:rotate(360deg)}}
  #loading.hide{opacity:0;pointer-events:none}
  @media (max-width:720px){#panel{width:196px;right:12px;top:12px}#title{left:14px;top:14px}#title h1{font-size:20px}}
</style>
</head>
<body>
<div id="app"></div>

<div id="hud">
  <div id="title"><h1>云 隐 寺</h1><p>THREE.JS · 程序化山坡古寺场景</p></div>
  <div id="panel">
    <div class="row"><span class="lbl">时辰</span>
      <button data-time="dawn">晨曦</button>
      <button data-time="day" class="on">正午</button>
      <button data-time="dusk">黄昏</button>
      <button data-time="night">静夜</button>
    </div>
    <div class="row"><span class="lbl">视角</span>
      <button data-view="pano">远眺</button>
      <button data-view="front">殿前</button>
      <button data-view="path">山道</button>
      <button data-view="tower">塔影</button>
    </div>
    <div class="row">
      <button id="btnRotate" class="on">自动环绕</button>
      <button id="btnMist">云雾 浓</button>
    </div>
  </div>
  <div id="tip">左键拖拽旋转 · 滚轮缩放 · 右键平移</div>
</div>

<div id="loading"><div class="ring"></div><p>正在筑山造寺 …</p></div>

<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';
import { Sky } from 'three/addons/objects/Sky.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';

/* ══════════════════ 0. 工具函数 ══════════════════ */
const clamp=(v,a,b)=>v<a?a:(v>b?b:v);
const lerp=(a,b,t)=>a+(b-a)*t;
const smoothstep=(e0,e1,x)=>{const t=clamp((x-e0)/(e1-e0||1e-6),0,1);return t*t*(3-2*t);};
function rng(seed){let a=seed>>>0;return()=>{a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296;};}
function hash2(x,y){let h=Math.imul(x|0,374761393)+Math.imul(y|0,668265263);h=Math.imul(h^(h>>>13),1274126177);return((h^(h>>>16))>>>0)/4294967295;}
function vnoise(x,y){
  const xi=Math.floor(x),yi=Math.floor(y),xf=x-xi,yf=y-yi;
  const u=xf*xf*(3-2*xf),v=yf*yf*(3-2*yf);
  return lerp(lerp(hash2(xi,yi),hash2(xi+1,yi),u),lerp(hash2(xi,yi+1),hash2(xi+1,yi+1),u),v);
}
function fbm(x,y,oct=4){let a=.5,f=1,s=0,n=0;for(let i=0;i<oct;i++){s+=a*vnoise(x*f,y*f);n+=a;a*=.5;f*=2.03;}return s/n;}
const RR=rng(20240915);

/* ══════════════════ 1. 程序化贴图 ══════════════════ */
function cnv(w,h){const c=document.createElement('canvas');c.width=w;c.height=h;return c;}
function grain(g,w,h,amt){
  const d=g.getImageData(0,0,w,h),p=d.data;
  for(let i=0;i<p.length;i+=4){const n=(Math.random()-.5)*amt*255;p[i]+=n;p[i+1]+=n;p[i+2]+=n;}
  g.putImageData(d,0,0);
}
function tex(canvas,rx=1,ry=1){
  const t=new THREE.CanvasTexture(canvas);
  t.wrapS=t.wrapT=THREE.RepeatWrapping;t.repeat.set(rx,ry);
  t.colorSpace=THREE.SRGBColorSpace;t.anisotropy=maxAniso;return t;
}
/* 筒瓦 */
function tileCanvas(){
  const S=512,c=cnv(S,S),g=c.getContext('2d');
  g.fillStyle='#33383e';g.fillRect(0,0,S,S);
  const rows=10,rh=S/rows,cols=8,rw=S/cols;
  for(let r=0;r<rows;r++)for(let i=-1;i<=cols;i++){
    const x=i*rw+((r%2)?rw*.5:0),y=r*rh;
    const grd=g.createLinearGradient(x,0,x+rw,0);
    grd.addColorStop(0,'#22262b');grd.addColorStop(.32,'#5d666f');
    grd.addColorStop(.5,'#6b747e');grd.addColorStop(.72,'#4c545c');grd.addColorStop(1,'#1e2226');
    g.fillStyle=grd;g.beginPath();
    g.roundRect?g.roundRect(x+1,y+1,rw-2,rh-2,4):g.rect(x+1,y+1,rw-2,rh-2);g.fill();
    g.fillStyle='rgba(255,255,255,.07)';g.fillRect(x+rw*.36,y+2,rw*.1,rh-5);
    g.fillStyle='rgba(0,0,0,.45)';g.fillRect(x,y+rh-2.5,rw,2.5);
    g.fillStyle='rgba(0,0,0,.28)';g.fillRect(x+rw-1.5,y,1.5,rh);
  }
  for(let r=0;r<rows;r++).........完整代码请登录后点击上方下载按钮下载查看