three实现三维第一视角寺庙烧香磕头礼佛爬楼灯塔漫游场景体验代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维第一视角寺庙烧香磕头礼佛爬楼灯塔漫游场景体验代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>云隐禅寺 · 九层佛塔</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"PingFang SC","Microsoft YaHei",sans-serif;}
  canvas{display:block;}
  #hud{position:fixed;inset:0;pointer-events:none;z-index:5;}
  #hint{position:absolute;top:12px;left:12px;color:#eee;background:rgba(0,0,0,.38);padding:7px 12px;border-radius:8px;font-size:12px;line-height:1.7;}
  #merit{position:absolute;top:12px;left:50%;transform:translateX(-50%);color:#ffd76e;background:rgba(40,22,6,.55);padding:6px 18px;border-radius:20px;font-size:15px;border:1px solid rgba(255,200,90,.45);letter-spacing:2px;}
  #floorChip{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);color:#e8f0ff;background:rgba(10,20,40,.5);padding:5px 16px;border-radius:16px;font-size:14px;display:none;border:1px solid rgba(140,170,220,.4);}
  #prompt{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.55);padding:10px 26px;border-radius:24px;font-size:17px;display:none;letter-spacing:3px;border:1px solid rgba(255,210,110,.5);}
  #toast{position:absolute;top:60px;left:50%;transform:translateX(-50%);color:#ffe9a8;background:rgba(50,30,8,.72);padding:9px 22px;border-radius:10px;font-size:15px;opacity:0;transition:opacity .45s;border:1px solid rgba(255,200,90,.35);}
  #cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.45);font-size:16px;}
  #menu{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(20,15,8,.55),rgba(8,6,3,.85));}
  .panel{width:min(600px,94vw);background:rgba(24,16,9,.93);border:1px solid #6b5326;border-radius:16px;padding:30px 36px;color:#e8d9b0;text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.6);}
  .panel h1{font-family:KaiTi,STKaiti,serif;font-size:46px;color:#f0c860;letter-spacing:14px;margin:0 0 4px;text-indent:14px;}
  .panel .sub{color:#bfa76a;margin:0 0 18px;font-size:14px;letter-spacing:4px;}
  .row{margin:10px 0;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;}
  .row span{width:46px;color:#bfa76a;font-size:14px;}
  .panel button{background:#3a2c14;color:#f0d890;border:1px solid #8a6c30;border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer;transition:.15s;}
  .panel button:hover{background:#57411d;}
  .panel button.on{background:#c1922f;color:#221705;font-weight:bold;}
  #startBtn{margin-top:18px;font-size:19px;padding:12px 46px;letter-spacing:8px;background:#a8322a;border-color:#d8a04a;color:#ffe9c0;}
  #startBtn:hover{background:#c23f30;}
  .keys{margin-top:14px;font-size:12.5px;color:#a89468;line-height:1.9;}
  .tip{font-size:11px;color:#7a6a48;margin-top:10px;}
</style>
</head>
<body>
<div id="hud">
  <div id="hint">WASD/方向键 移动 · Shift 疾走 · Space 跳跃 · 鼠标 视角<br>E 上香/礼佛 · 1-4 天气 · 5-7 时辰 · Esc 菜单</div>
  <div id="merit">功德 ×0</div>
  <div id="floorChip"></div>
  <div id="prompt"></div>
  <div id="toast"></div>
  <div id="cross">＋</div>
</div>
<div id="menu">
  <div class="panel">
    <h1>云隐禅寺</h1>
    <p class="sub">三维寺院漫游 · 九层佛塔登顶 · 上香礼佛</p>
    <div class="row"><span>天气</span>
      <button data-w="clear">☀ 晴</button><button data-w="rain">🌧 雨</button>
      <button data-w="snow">❄ 雪</button><button data-w="fog">🌫 雾</button>
    </div>
    <div class="row"><span>时辰</span>
      <button data-t="day">白天</button><button data-t="dusk">黄昏</button><button data-t="night">夜晚</button>
    </div>
    <div class="keys">WASD 移动 · Shift 疾走 · Space 跳跃 · 鼠标控制视角 · E 上香 / 礼佛<br>快捷键 1-4 切换天气，5-7 切换时辰 · Esc 暂停</div>
    <button id="startBtn">进 入 寺 院</button>
    <p class="tip">需桌面浏览器 + 鼠标指针锁定。雨雪会被屋顶遮挡：殿内、塔内无雨，檐下避雨，窗外观雨</p>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0.........完整代码请登录后点击上方下载按钮下载查看