three实现三维寺庙拜佛打坐礼佛场景体验代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由hy4 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, maximum-scale=1.0, user-scalable=no" />
<title>大雄宝殿 · 沉浸礼佛</title>
<style>
  :root{
    --gold:#e7bd72; --gold-dim:#a9843f; --ink:#f3e7cf; --panel:rgba(26,17,12,.78);
    --line:rgba(224,181,107,.26);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0705;color:var(--ink);
    font-family:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif}
  #app{position:fixed;inset:0}
  canvas{display:block;width:100%;height:100%}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,225,170,.09)}
  #title{position:absolute;top:18px;left:20px;padding:12px 18px 11px;pointer-events:none}
  #title h1{margin:0;font-size:23px;letter-spacing:5px;font-weight:600;
    background:linear-gradient(180deg,#fff1cf,#d2a455);-webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 2px 12px rgba(220,160,60,.18)}
  #title p{margin:6px 0 0;font-size:11px;letter-spacing:2px;color:#bda584}
  #tools{position:absolute;top:18px;right:20px;width:216px;padding:12px}
  .sec{font-size:11px;letter-spacing:3px;color:var(--gold-dim);margin:2px 0 9px;
    border-bottom:1px solid rgba(224,181,107,.14);padding-bottom:6px}
  .row{display:flex;gap:7px;margin-bottom:8px;flex-wrap:wrap}
  button{font-family:inherit;cursor:pointer;color:#eadfc7;font-size:12px;letter-spacing:1px;
    border:1px solid rgba(224,181,107,.3);border-radius:7px;padding:8px 10px;
    background:linear-gradient(180deg,rgba(92,62,34,.62),rgba(45,29,18,.72));transition:.2s;flex:1;min-width:64px}
  button:hover{border-color:var(--gold);color:#fff4dc;background:linear-gradient(180deg,rgba(140,94,45,.8),rgba(70,44,22,.85));
    box-shadow:0 0 14px rgba(224,170,80,.22)}
  button.on{background:linear-gradient(180deg,#b98b42,#7a5524);color:#fff8e6;border-color:#f0cd86;
    box-shadow:0 0 16px rgba(235,180,90,.35)}
  #acts{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:11px 14px 12px;
    display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:min(94vw,940px)}
  #acts button{min-width:78px;padding:10px 12px;font-size:13px}
  #acts button.primary{background:linear-gradient(180deg,#a9782f,#68421c);border-color:#e2b56c;color:#fff6e2}
  #hint{position:absolute;right:20px;bottom:22px;padding:10px 14px;font-size:11.5px;line-height:1.85;
    color:#c9b694;letter-spacing:.5px;max-width:230px}
  #hint b{color:var(--gold);font-weight:600}
  #toast{position:absolute;top:96px;left:50%;transform:translate(-50%,-12px);padding:10px 22px;
    font-size:14px;letter-spacing:2px;opacity:0;pointer-events:none;transition:.45s;white-space:nowrap;
    background:rgba(30,19,11,.86);border:1px solid var(--line);border-radius:30px;color:#ffe9bd}
  #toast.show{opacity:1;transform:translate(-50%,0)}
  #loader{position:fixed;inset:0;background:radial-gradient(circle at 50% 46%,#24170e,#080604 72%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;transition:opacity .7s}
  #loader.done{opacity:0;pointer-events:none}
  .ring{width:58px;height:58px;border-radius:50%;border:2px solid rgba(224,181,107,.16);
    border-top-color:var(--gold);animation:spin 1.5s linear infinite;margin-bottom:24px}
  @keyframes spin{to{transform:rotate(360deg)}}
  #loader h2{font-size:20px;letter-spacing:8px;font-weight:400;color:#e7c78d;margin:0 0 12px}
  #loaderMsg{font-size:12px;letter-spacing:2px;color:#9c876a;text-align:center;line-height:2}
  #vignette{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(8,4,2,.42) 88%,rgba(6,3,1,.78) 100%)}
  @media(max-width:760px){
    #title{top:10px;left:10px;padding:8px 12px}#title h1{font-size:16px;letter-spacing:3px}#title p{display:none}
    #tools{top:10px;right:10px;width:150px;padding:9px}#tools .sec{margin-bottom:6px}
    button{font-size:11px;padding:6px 7px;min-width:50px}
    #acts{bottom:10px;gap:5px;padding:8px;max-width:96vw}#acts button{min-width:62px;padding:8px 7px;font-size:11.5px}
    #hint{display:none}#toast{top:70px;font-size:12px}
  }
</style>
</head>
<body>
<div id="app"></div>
<div id="vignette"></div>

<div id="title" class="panel">
  <h1>大雄宝殿</h1>
  <p>TEMPLE · 沉浸礼佛 / 程序化实时三维</p>
</div>

<div id="tools" class="panel">
  <div class="sec">法 器 与 环 境</div>
  <div class="row">
    <button id="btnAudio">开启音效</button>
    <button id="btnBell">撞钟</button>
  </div>
  <div class="row">
    <button id="btnFish">木鱼</button>
    <button id="btnChime">引磬</button>
  </div>
  <div class="sec">视 角</div>
  <div class="row">
    <button id="btnFollow">跟随</button>
    <button id="btnFree" class="on">全景</button>
    <button id="btnClose">佛前</button>
  </div>
  <div class="sec">光 影</div>
  <div class="row">
    <button id="btnLight" class="on">烛光</button>
    <button id="btnDust" class="on">香烟</button>
  </div>
</div>

<div id="acts" class="panel">
  <button id="btnEnter" class="primary">步入大殿</button>
  <button id="btnIncense">上香</button>
  <button id="btnWorship">三拜</button>
  <button id="btnKowtow">磕头</button>
  <button id="btnMeditate">打坐</button>
  <button id="btnPray">合十</button>
  <button id="btnStand">起身</button>
</div>

<div id="hint" class="panel">
  <b>W A S D</b> 行走　<b>Shift</b> 快步<br>
  <b>鼠标拖拽</b> 环视　<b>滚轮</b> 远近<br>
  走近蒲团与香炉，点击上方动作
</div>

<div id="toast"></div>

<div id="loader">
  <div class="ring"></div>
  <h2>大 雄 宝 殿</h2>
  <div id="loaderMsg">正在营造殿宇与金身…<br>首次载入需获取三维引擎</div>
</div>

<script>
// CDN 镜像：由普通脚本生成 importmap，模块失败时看门狗自动切换
(function(){
  var p = new URLSearchParams(location.search);
  var base = p.get('cdn') === 'jsdelivr'
    ? 'https://cdn.jsdelivr.net/npm/three@0.160.0/'
    : 'https://unpkg.com/three@0.160.0/';
  var map = {imports:{'three':base+'build/three.module.js','three/addons/':base+'examples/jsm/'}};
  document.write('<script type="importmap">'+JSON.stringify(map)+'<\/script>');
  window.__TEMPLE_READY = false;
  setTimeout(function(){
    if(window.__TEMPLE_READY) return;
    var tries = +(sessionStorage.getItem('temple_try')||0);
    var msg = document.getElementById('loaderMsg');
    if(tries < 1){
      sessionStorage.setItem('temple_try','1');
      var u = new URL(location.href); u.searchParams.set('cdn','jsdelivr');
      location.replace(u.href);
    }else if(msg){
      msg.innerHTML='三维引擎加载失败，请检查网络后<br><a href="javascript:location.reload()" style="color:#e7bd72">点击重新载入</a>';
    }
  },9000);
})();
</script>

<script type="module">
import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.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';

const PI = Math.PI, TAU = PI*2;
const clamp = (v,a,b)=>Math.max(a,Math.min(b,v));
const lerp = (a,b,t)=>a+(b-a)*t;
const rnd = (a,b)=>a+Math.random()*(b-a);
const smooth = (cur,tgt,dt,spd=6)=>lerp(cur,tgt,1-Math.exp(-sp.........完整代码请登录后点击上方下载按钮下载查看