代码语言：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,maximum-scale=1,user-scalable=no"/>
<title>禅音古刹 · 三维寺庙参拜</title>
<style>
  :root{ --gold:#d9b25f; --gold2:#f0d38a; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:100%; height:100%; overflow:hidden; background:#0e0b18; color:#f0e6d2;
    font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif; }
  canvas{ display:block; touch-action:none; }
  #app{ position:fixed; inset:0; }

  /* ---------- 标题页 ---------- */
  #title{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(120% 100% at 50% 18%, #2c2244 0%, #161126 55%, #0a0812 100%);
    transition:opacity 1.2s ease; }
  #title.hide{ opacity:0; pointer-events:none; }
  .tbox{ text-align:center; padding:42px 58px; border:1px solid rgba(217,178,95,.35); border-radius:6px;
    background:rgba(10,8,18,.45); box-shadow:0 0 60px rgba(217,178,95,.08) inset; max-width:92vw; }
  .tbox h1{ font-size:52px; letter-spacing:18px; color:var(--gold2); text-shadow:0 0 24px rgba(240,190,90,.35); font-weight:600; }
  .tbox .sub{ margin-top:14px; font-size:16px; letter-spacing:8px; color:#c9b68a; }
  #btnStart{ margin-top:34px; font-size:20px; letter-spacing:10px; padding:14px 46px; cursor:pointer;
    color:#1a1206; background:linear-gradient(180deg,#ecd08a,#c99b46); border:none; border-radius:4px;
    font-family:inherit; box-shadow:0 4px 18px rgba(201,155,70,.35); transition:transform .15s; }
  #btnStart:hover{ transform:translateY(-2px); }
  .tbox .tip{ margin-top:16px; font-size:13px; color:#a4906c; letter-spacing:2px; line-height:1.9; }
  .tbox .warn{ margin-top:18px; font-size:12px; color:#6f6350; }

  /* ---------- HUD ---------- */
  #hud{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:30; display:flex; gap:12px;
    opacity:0; pointer-events:none; transition:opacity .8s; }
  #hud.show{ opacity:1; pointer-events:auto; }
  .act{ font-family:inherit; font-size:15px; letter-spacing:2px; color:#f4e8c8; cursor:pointer;
    padding:11px 20px; border-radius:999px; border:1px solid rgba(217,178,95,.45);
    background:rgba(22,16,32,.72); backdrop-filter:blur(6px); transition:all .15s; }
  .act:hover{ background:rgba(60,42,20,.85); border-color:var(--gold); }
  .act:active{ transform:scale(.96); }
  .act b{ color:var(--gold2); margin-left:8px; font-size:13px; border:1px solid rgba(217,178,95,.5);
    border-radius:4px; padding:1px 6px; }

  #panel{ position:fixed; top:14px; right:14px; z-index:30; display:flex; gap:10px; align-items:center;
    opacity:0; pointer-events:none; transition:opacity .8s; }
  #panel.show{ opacity:1; pointer-events:auto; }
  #panel button{ font-family:inherit; font-size:13px; letter-spacing:1px; color:#f0e2c0; cursor:pointer;
    padding:8px 14px; border-radius:6px; border:1px solid rgba(217,178,95,.4); background:rgba(20,14,30,.7); }
  #panel label{ font-size:12px; color:#c8b68e; display:flex; align-items:center; gap:8px;
    background:rgba(20,14,30,.7); padding:7px 12px; border-radius:6px; border:1px solid rgba(217,178,95,.25); }
  #vol{ width:90px; accent-color:#c99b46; }

  #hint{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:29; font-size:15px;
    letter-spacing:3px; color:var(--gold2); text-shadow:0 0 12px rgba(240,190,90,.5);
    opacity:0; transition:opacity .4s; pointer-events:none; white-space:nowrap; }
  #hint.show{ opacity:1; }
  #status{ position:fixed; left:50%; top:14%; transform:translateX(-50%); z-index:29; font-size:20px;
    letter-spacing:6px; color:#ffe9b8; text-shadow:0 2px 14px rgba(0,0,0,.8); opacity:0; transition:opacity .5s;
    pointer-events:none; white-space:nowrap; }
  #status.show{ opacity:1; }
  #toast{ position:fixed; left:50%; top:22%; transform:translateX(-50%); z-index:40; font-size:14px;
    letter-spacing:2px; color:#ffd9a0; background:rgba(30,18,10,.85); border:1px solid rgba(217,178,95,.5);
    padding:10px 22px; border-radius:6px; opacity:0; transition:opacity .4s; pointer-events:none; white-space:nowrap; }
  #toast.show{ opacity:1; }

  #joy{ position:fixed; left:26px; bottom:96px; width:118px; height:118px; border-radius:50%; z-index:35;
    background:rgba(30,22,44,.35); border:1px solid rgba(217,178,95,.3); display:none; touch-action:none; }
  #knob{ position:absolute; left:50%; top:50%; width:52px; height:52px; border-radius:50%;
    background:rgba(217,178,95,.4); border:1px solid rgba(240,211,138,.6); transform:translate(-50%,-50%); }
  body.touch #joy{ display:block; }

  #bootMsg{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:70; display:none;
    color:#e8b98a; font-size:15px; letter-spacing:2px; background:rgba(20,10,6,.9); padding:22px 34px;
    border:1px solid rgba(217,178,95,.4); border-radius:8px; max-width:86vw; text-align:center; line-height:1.9; }
  #credit{ position:fixed; left:12px; bottom:10px; z-index:20; font-size:11px; color:rgba(200,180,140,.4); letter-spacing:1px; }
</style>
</head>
<body>
<div id="app"></div>

<div id="title">
  <div class="tbox">
    <h1>禅音古刹</h1>
    <p class="sub">大雄宝殿 · 三维参拜</p>
    <button id="btnStart">入 寺 参 拜</button>
    <p class="tip">WASD / 方向键 行走 · 鼠标拖动 环视 · 滚轮 缩放</p>
    <p class="tip">E 跪拜磕头 · F 打坐 · C 烧香敬佛</p>
    <p class="warn">需联网加载 Three.js 引擎 · 建议佩戴耳机聆听钟磬与僧众诵经</p>
  </div>
</div>

<div id="hud">
  <button class="act" id="btnBow">跪拜磕头<b>E</b></button>
  <button class="act" id="btnMed">打坐<b>F</b></button>
  <button class="act" id="btnInc">烧香敬佛<b>C</b></button>
</div>

<div id="panel">
  <button id="btnSnd">音效：开</button>
  <label>音量 <input id="vol" type="range" min="0" max="100" value="70"></label>
  <button id="btnBGM">诵经：开</button>
</div>

<div id="hint"></div>
<div id="status"></div>
<div id="toast"></div>
<div id="joy"><div id="knob"></div></div>
<div id="bootMsg"></div>
<div id="credit">Three.js · WebAudio 程序化音效</div>

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

<script type="module">
import * as THREE from 'three';

/* ================================================================
   禅音古刹 —— 三维寺庙参拜
   所有模型程序化生成，所有音效由 WebAudio 实时合成（钟、磬、木鱼、僧众诵经）
   ================================================================ */

const $ = id => document.getElementById(id);
const rand = (a,b)=>a+Math.random()*(b-a);
const clamp = (v,a,b)=>Math.min(b,Math.max(a,v));
const lerpAngle = (a,b,t)=>{ let d=b-a; while(d>Math.PI)d-=Math.PI*2; while(d<-Math.PI)d+=Math.PI*2; return a+d*t; };
function bootError(m){ const el=$('bootMsg'); el.style.display='block'; el.innerHTML=m; }
setTimeout(()=>{ if(!window.__booted) bootError('三维引擎加载失败：请确认网络可以访问 cdn.jsdelivr.net 后刷新页面。'); }, 12000);

function main(){

/* ---------------- 渲染器 / 场景 / 相机 ---------------- */
let renderer;
try{
  renderer = new THREE.WebGLRenderer({ antialias:true });
}catch(e){
  boo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论