three实现三维花果山水帘洞瀑布场景动画漫游体验代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：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>水帘洞 · Three.js 三维漫游</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{ --ink:#101714; --paper:#f2ead8; --gold:#c9a15a; --vermilion:#b03a2e; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--paper);
  font-family:'Noto Serif SC',serif;-webkit-user-select:none;user-select:none}
#app canvas{position:fixed;inset:0;z-index:0;display:block;touch-action:none}

/* ---------- 暗角 ---------- */
#vig{position:fixed;inset:0;z-index:15;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 55%, rgba(8,13,10,.72) 100%),
             linear-gradient(180deg, rgba(8,13,10,.28), transparent 14%);}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity 1s}
#hud.on{opacity:1}
.brand{position:absolute;top:22px;left:22px;display:flex;gap:12px;align-items:flex-start}
.brand .v{writing-mode:vertical-rl;font-family:'Ma Shan Zheng';font-size:40px;letter-spacing:.26em;
  color:var(--paper);text-shadow:0 2px 14px rgba(0,0,0,.75)}
.brand .sub{writing-mode:vertical-rl;font-size:11px;letter-spacing:.5em;color:var(--gold);margin-top:8px;opacity:.9}
.mini-seal{width:32px;height:32px;background:var(--vermilion);color:var(--paper);border-radius:5px;
  display:grid;place-items:center;font-family:'Ma Shan Zheng';font-size:19px;transform:rotate(-6deg);
  box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(246,231,215,.55)}
#hints{position:absolute;left:22px;bottom:20px;font-size:12.5px;letter-spacing:.12em;color:#d9d0ba;
  display:flex;gap:10px;align-items:center;opacity:.95;transition:opacity 1s}
#hints.dim{opacity:.35}
kbd{background:rgba(13,19,16,.82);border:1px solid rgba(201,161,90,.35);border-bottom-width:2px;
  border-radius:4px;padding:2px 8px;font-family:inherit;color:#eadfc2;font-size:12px}
#tools{position:absolute;right:22px;bottom:20px;display:flex;gap:10px;pointer-events:auto}
#tools button{font-family:'Noto Serif SC';font-size:13px;letter-spacing:.2em;color:var(--paper);
  background:rgba(13,19,16,.82);border:1px solid rgba(201,161,90,.4);border-radius:5px;
  padding:8px 14px;cursor:pointer;transition:.25s}
#tools button:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(24,32,27,.92)}
#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:rgba(242,234,216,.9);box-shadow:0 0 0 2px rgba(16,23,20,.45);opacity:0;transition:opacity .3s}
#caption{position:absolute;left:50%;bottom:11vh;transform:translateX(-50%) translateY(14px);
  text-align:center;opacity:0;transition:opacity .9s,transform .9s;width:100%}
#caption.show{opacity:1;transform:translateX(-50%)}
#caption .t{font-family:'Ma Shan Zheng';font-size:46px;letter-spacing:.32em;color:var(--paper);
  text-shadow:0 3px 22px rgba(0,0,0,.85)}
#caption .s{font-size:13px;letter-spacing:.46em;color:var(--gold);margin-top:8px}

/* ---------- 穿帘水花闪屏 ---------- */
#splash{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .55s;
  background:radial-gradient(circle at 50% 42%, rgba(191,230,239,.5), rgba(127,180,201,.22) 42%, transparent 72%)}
#splash.on{opacity:1;transition:opacity .1s}

/* ---------- 暂停 ---------- */
#pause{position:fixed;inset:0;z-index:30;display:grid;place-items:center;cursor:pointer;
  background:rgba(8,13,10,.62);opacity:0;visibility:hidden;transition:.4s}
#pause.on{opacity:1;visibility:visible}
#pause .p1{font-family:'Ma Shan Zheng';font-size:52px;letter-spacing:.3em;text-align:center}
#pause .p2{font-size:13px;letter-spacing:.4em;color:var(--gold);text-align:center;margin-top:14px}

/* ---------- 触屏摇杆 ---------- */
#joy{position:fixed;left:26px;bottom:64px;width:112px;height:112px;border-radius:50%;z-index:25;
  border:1.5px solid rgba(242,234,216,.25);background:rgba(16,23,20,.4);display:none;pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border-radius:50%;
  background:rgba(201,161,90,.55);border:1.5px solid rgba(242,234,216,.5)}
@media (pointer:coarse){ #joy{display:block} #hints{display:none} }

/* ---------- 开场 ---------- */
#loader{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  transition:opacity 1.1s ease,visibility 1.1s;
  background:radial-gradient(1100px 750px at 72% 18%, #1d2c26 0%, transparent 58%),
             radial-gradient(900px 700px at 18% 86%, #152420 0%, transparent 55%),.........完整代码请登录后点击上方下载按钮下载查看