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

代码语言：html

所属分类：其他

代码由qwen-3.8-max ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维寺庙拜佛打坐礼佛

下面为部分代码预览，完整代码请点击下载或在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>古刹禅境 · 大殿礼佛</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;
 font-family:"STKaiti","KaiTi","Noto Serif SC","SimSun",serif;color:#d8b878}
canvas{display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
 background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
#overlay{position:fixed;inset:0;background:rgba(6,4,3,.9);backdrop-filter:blur(6px);
 display:flex;align-items:center;justify-content:center;z-index:10;transition:opacity 1.4s}
#overlay.gone{opacity:0;pointer-events:none}
.panel{max-width:580px;width:92%;padding:44px 52px;text-align:center;border:1px solid #6d5423;
 background:linear-gradient(180deg,rgba(32,21,10,.92),rgba(14,9,5,.94));
 box-shadow:0 0 70px rgba(200,150,60,.09),inset 0 0 50px rgba(0,0,0,.6)}
.symbol{font-size:32px;color:#c99a3f;margin-bottom:10px;text-shadow:0 0 18px rgba(230,180,80,.55)}
h1{font-size:50px;letter-spacing:14px;font-weight:400;color:#e8c987;
 text-shadow:0 2px 24px rgba(230,180,80,.28);margin-bottom:10px}
.sub{color:#9a7f4e;letter-spacing:4px;margin-bottom:26px;font-size:15px}
.keys{display:grid;gap:9px;font-size:14px;color:#b99b62;margin-bottom:28px;text-align:left;padding:0 8px}
.keys b{color:#e2c077;font-weight:400;border:1px solid #6d5423;padding:1px 7px;border-radius:4px;
 font-size:12px;margin-right:6px;background:rgba(60,40,15,.35)}
#enter{font-family:inherit;font-size:19px;letter-spacing:10px;padding:13px 40px 13px 50px;color:#1c1206;
 background:linear-gradient(180deg,#e7c47a,#b98a3a);border:none;cursor:pointer;
 box-shadow:0 4px 26px rgba(200,150,60,.35);transition:.25s}
#enter:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(230,180,80,.55)}
.tip{margin-top:18px;font-size:12px;color:#7a6540;letter-spacing:2px}
#hud{position:fixed;left:16px;bottom:14px;z-index:5;font-size:12.5px;color:#a98c55;line-height:2;
 background:rgba(12,8,4,.55);border:1px solid rgba(120,90,40,.4);padding:9px 14px;border-radius:6px;
 backdrop-filter:blur(3px);transition:opacity .4s}
#hud.hide{opacity:0}
#hud b{color:#e0bd76;font-weight:400}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);z-index:6;
 font-size:19px;letter-spacing:6px;color:#ecd39a;background:rgba(15,10,5,.74);
 border:1px solid rgba(160,120,50,.45);padding:10px 30px;border-radius:4px;opacity:0;
 transition:.5s;pointer-events:none;text-shadow:0 0 14px rgba(230,180,80,.35);white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#counter{position:fixed;right:16px;top:14px;z-index:5;font-size:14px;letter-spacing:3px;color:#c8a45e;
 background:rgba(12,8,4,.55);border:1px solid rgba(120,90,40,.4);padding:8px 16px;border-radius:6px;
 backdrop-filter:blur(3px)}
@media(max-width:640px){h1{font-size:36px;letter-spacing:8px}.panel{padding:30px 22px}}
</style>
</head>
<body>
<div id="vignette"></div>

<div id="overlay">
  <div class="panel">
    <div class="symbol">卍</div>
    <h1>古刹禅境</h1>
    <p class="sub">—— 三步一拜 · 一炷清香 ——</p>
    <div class="keys">
      <div><b>W A S D / 方向键</b>殿内行走</div>
      <div><b>鼠标拖动</b>转动视角 · <b>滚轮</b>推近拉远</div>
      <div><b>K</b>跪拜磕头（三拜）&nbsp;<b>J</b>打坐入定&nbsp;<b>L</b>上香供养</div>
      <div><b>M</b>静音&nbsp;<b>R</b>回到殿门&nbsp;<b>H</b>隐藏帮助</div>
    </div>
    <button id="enter">推 开 殿 门</button>
    <p class="tip">建议佩戴耳机 · 进入后自动开启殿内音声</p>
  </div>
</div>

<div id="hud">
  <b>WASD</b>行走 · <b>鼠标</b>视角 · <b>滚轮</b>缩放<br>
  <b>K</b>磕头 · <b>J</b>打坐 · <b>L</b>上香 · <b>Shift</b>疾行<br>
  <b>M</b>静音 · <b>R</b>回殿门 · <b>H</b>隐藏
</div>
<div id="toast"></div>
<div id="counter">香炉 · <span id="stickN">0</span> 炷</div>

<script type="importmap">
{"imports":{
 "three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
 "three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
}}
</script>

<script type="module">
import * as THREE from 'three';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

/* ================= 基础工具 ================= */
const rnd=(a,b)=>a+Math.random()*(b-a);
const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));
const V2=p=>new THREE.Vector2(p[0],p[1]);
const ease=t=>t<.5?2*t*t:1-Math.pow(-2*t+2,2)/2;
function lerpAngle(a,b,t){let d=(b-a)%(Math.PI*2);if(d>Math.PI)d-=Math.PI*2;if(d<-Math.PI)d+=Math.PI*2;return a+d*t;}.........完整代码请登录后点击上方下载按钮下载查看