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

代码语言：html

所属分类：其他

代码由deepseek-4.1 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:"Songti SC","STSong","SimSun",serif;}
  canvas{display:block;}

  #hud{
    position:fixed;left:24px;top:22px;color:#e8d5b0;
    font-size:13px;line-height:2;letter-spacing:1px;
    text-shadow:0 0 12px rgba(255,170,60,.55),0 1px 3px #000;
    pointer-events:none;user-select:none;z-index:10;
  }
  #hud b{color:#ffd27f;font-weight:normal;letter-spacing:3px;}
  #hud .k{
    display:inline-block;min-width:20px;text-align:center;
    border:1px solid rgba(255,210,140,.45);border-radius:3px;
    padding:0 5px;margin-right:5px;color:#ffd27f;font-size:12px;
    background:rgba(255,170,60,.08);
  }

  #start{
    position:fixed;inset:0;z-index:50;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at center,rgba(30,18,8,.82) 0%,rgba(0,0,0,.96) 75%);
    color:#e8d5b0;text-align:center;cursor:pointer;
    transition:opacity 1s;
  }
  #start h1{
    font-size:44px;font-weight:normal;letter-spacing:14px;
    color:#f0d9a8;text-shadow:0 0 30px rgba(255,170,60,.6);margin-bottom:14px;
    padding-left:14px;
  }
  #start p{font-size:14px;letter-spacing:3px;color:#a08a68;line-height:2.2;}
  #start .hint{
    margin-top:36px;font-size:13px;color:#c9a86e;letter-spacing:2px;
    animation:breathe 2.6s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{opacity:.35;}50%{opacity:1;}}

  #toast{
    position:fixed;left:50%;bottom:15%;transform:translateX(-50%) translateY(12px);
    color:#ffd99a;font-size:15px;letter-spacing:3px;
    text-shadow:0 0 18px rgba(255,160,40,.8),0 1px 4px #000;
    opacity:0;transition:all .5s;pointer-events:none;z-index:20;
  }
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  #mode{
    position:fixed;right:26px;bottom:26px;color:#c9a86e;font-size:13px;
    letter-spacing:3px;text-shadow:0 0 12px rgba(255,170,60,.5);z-index:10;
    pointer-events:none;opacity:.85;
  }
</style>
</head>
<body>

<canvas id="scene"></canvas>

<div id="hud">
  <div><b>大雄宝殿</b></div>
  <div><span class="k">W</span><span class="k">A</span><span class="k">S</span><span class="k">D</span> 行走　<span class="k">Shift</span> 快走</div>
  <div><span class="k">F</span> 跪拜磕头　<span class="k">M</span> 打坐　<span class="k">E</span> 上香</div>
  <div><span class="k">G</span> 诵经声开关　鼠标 环绕视角　<span class="k">ESC</span> 释放</div>
</div>

<div id="mode">行 走</div>
<div id="toast"></div>

<div id="start">
  <h1>古寺</h1>
  <p>大 雄 宝 殿</p>
  <div class="hint">点 击 进 入</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script>
/* =========================================================
   工具函数
   ========================================================= */
const clamp = (v,a,b)=>Math.max(a,Math.min(b,v));
const lerp  = (a,b,t)=>a+(b-a)*t;
const easeInOut = t => t<0.5 ? 2*t*t : -1+(4-2*t)*t;

/* =========================================================
   渲染器 / 场景 / 相机
   ========================================================= */
const canvas = document.getElementById('scene');
const renderer = new THREE.WebGLRenderer({canvas, antialias:true, powerPreference:'high-performance'});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.08;
renderer.outputEncoding = THREE.sRGBEncoding;

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x080503);
scene.fog = new THREE.Fog(0x120a05, 20, 62);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.08, 200);

/* =========================================================
   程序化贴图
   ========================================================= */
function makeWoodTexture(){
  const c = document.createElement('canvas');
  c.width = c.height = 512;
  const ctx = c.getContext('2d');
  ctx.fillStyle = '#2e2016';
  ctx.fillRect(0,0,512,512);

  const plankH = 85;
  for(let y=0; y<512; y+=plankH){
    const s = 0.75 + Math.random()*0.5;
    ctx.fillStyle = `rgb(${Math.floor(74*s)},${Math.floor(51*s)},${Math.floor(33*s)})`;
    ctx.fillRect(0, y, 512, plankH-3);
    ctx.fillStyle = 'rgba(0,0,0,.55)';
    ctx.fillRect(0, y+plankH-3, 512, 3);

    for(let i=0;i<52;i++){
      const yy = y + Math.random()*plankH;
      ctx.strokeStyle = `rgba(${Math.random()>.5?25:105},${Math.floor(20+Math.random()*25)},12,${0.04+Math.random()*0.12})`;
      ctx.lineWidth = 0.6 + Math.random()*1.6;
      ctx.beginPath();
      ctx.moveTo(-10, yy);
      ctx.bezierCurveTo(150, yy+(Math.random()-.5)*9, 350, yy+(Math.random()-.5)*9, 522, yy);
      ctx.stroke();
    }
  }
  const t = new THREE.CanvasTexture(c);
  t.wrapS = t.wrapT = THREE.RepeatWrapping;
  t.rep.........完整代码请登录后点击上方下载按钮下载查看