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.0">
<meta name="theme-color" content="#0c1a15">
<title>山水漂流 · 从云顶湖泊到山脚河谷</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
      rel="stylesheet" media="print" onload="this.media='all'">
<style>
:root{
  --ink:#0c1a15; --paper:#f2ede0; --gold:#e0b45c; --teal:#7fd0c0;
  --line:rgba(242,237,224,.22);
  --f-display:'Ma Shan Zheng','Kaiti SC','KaiTi','STKaiti','DFKai-SB',serif;
  --f-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink);font-family:var(--f-body);color:var(--paper)}
#scene{position:fixed;inset:0;display:block}
button{font-family:var(--f-body)}

#vig{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,rgba(7,14,11,.52),transparent 16%,transparent 79%,rgba(7,14,11,.58))}

#brand{position:fixed;top:28px;left:34px;z-index:10;user-select:none}
#brand h1{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,5vw,56px);line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.brand-seal{display:inline-block;width:26px;height:26px;background:#b03a2e;color:#f5e9d8;
  font-family:var(--f-display);font-size:16px;text-align:center;line-height:26px;border-radius:3px;
  transform:rotate(-8deg) translateY(-8px);margin-left:10px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#brand .tag{margin-top:8px;font-size:10px;letter-spacing:.46em;opacity:.7}
#stats{display:flex;gap:28px;margin-top:20px}
.stat label{display:block;font-size:10px;letter-spacing:.34em;opacity:.55;margin-bottom:4px}
.stat b{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.stat i{font-style:normal;font-size:11px;opacity:.6;margin-left:3px}

#rail{position:fixed;right:38px;top:50%;transform:translateY(-50%);height:46vh;width:2px;
  background:rgba(242,237,224,.18);z-index:10}
#railFill{position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--gold),var(--teal));transition:height .15s linear}
.node{position:absolute;right:-7px;transform:translateY(-50%);padding:8px;cursor:pointer}
.node .dot{display:block;width:11px;height:11px;border-radius:50%;
  border:2px solid rgba(242,237,224,.55);background:rgba(12,26,21,.6);transition:.3s}
.node .lbl{position:absolute;right:26px;top:50%;transform:translate(8px,-50%);opacity:0;
  transition:.35s;white-space:nowrap;font-size:12px;letter-spacing:.3em;color:var(--paper)}
.node:hover .lbl,.node.active .lbl{opacity:.92;transform:translate(0,-50%)}
.node.active .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(224,180,92,.85)}
.node.done .dot{background:var(--teal);border-color:var(--teal)}

#chapter{position:fixed;left:36px;bottom:120px;z-index:10;opacity:0;pointer-events:none}
#chapter.show{opacity:1}
.ch-kicker{font-size:11px;letter-spacing:.52em;color:var(--gold)}
.ch-title{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.5vw,54px);
  margin:6px 0 4px;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.ch-sub{font-size:13px;letter-spacing:.14em;opacity:.72;font-weight:300}
#chapter.show .ch-kicker{animation:chIn .8s .05s cubic-bezier(.2,.8,.2,1) both}
#chapter.show .ch-title{animation:chIn 1s cubic-bezier(.2,.8,.2,1) both}
#chapter.show .ch-sub{animation:chIn .9s .18s cubic-bezier(.2,.8,.2,1) both}
@keyframes chIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

#controls{position:fixed;left:34px;bottom:28px;display:flex;gap:12px;align-items:center;z-index:12}
.cbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(12,26,21,.55);backdrop-filter:blur(6px);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s,border-color .25s,color .25s,box-shadow .25s}
.cbtn:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--gold);
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.cbtn svg{width:19px;height:19px;fill:currentColor}
.cbtn svg .stroke{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#btnSpeed{width:auto;min-width:60px;border-radius:23px;padding:0 16px;font-size:13px;font-weight:700;letter-spacing:.08em}
#btnPlay .i-play{display:none}
#btnPlay.paused .i-play{display:block}
#btnPlay.paused .i-pause{display:none}
#btnSound .i-off{display:none}
#btnSound.off .i-off{display:block}
#btnSound.off .i-on{display:none}

#hint{position:fixed;right:38px;bottom:30px;z-index:10;text-align:right;
  font-size:11px;letter-spacing:.26em;line-height:2.1;color:rgba(242,237,224,.45);user-select:none}

#toast{position:fixed;left:50%;bottom:98px;transform:translateX(-50%);z-index:28;
  padding:10px 28px;border:1px solid var(--line);background:rgba(12,26,21,.82);
  font-size:12px;letter-spacing:.32em;opacity:0;transition:opacity .35s;pointer-events:none}
#toast.show{opacity:1}

#intro{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(200deg,rgba(9,20,16,.92),rgba(9,20,16,.55) 46%,rgba(11,23,18,.94));
  transition:opacity .9s ease}
#intro.hide{opacity:0;pointer-events:none}
.intro-inner{display:grid;grid-template-columns:1.25fr auto;gap:7vw;align-items:center;
  width:100%;max-width:1380px;padding:0 8vw}
.kicker{font-size:11px;letter-spacing:.5em;color:var(--gold)}
#intro h1{font-family:var(--f-display);font-weight:400;font-size:clamp(70px,11.5vw,148px);
  line-height:1.06;margin:18px 0 14px;text-shadow:0 4px 30px rgba(0,0,0,.5)}
#intro h1 span{display:inline-block;opacity:0;transform:translateY(34px) rotate(4deg);
  animation:charIn .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
@keyframes charIn{to{opacity:1;transform:none}}
.lead{max-width:560px;font-weight:300;font-size:15px;line-height:2;letter-spacing:.08em;color:rgba(242,237,224,.82)}
.lead b{color:var(--gold);font-weight:500}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.chip{padding:7px 16px;border:1px solid var(--line);border-radius:999px;font-size:12px;letter-spacing:.24em}
.route .arrow{opacity:.4;font-size:14px}
#startBtn{margin-top:36px;display:inline-flex;align-items:center;gap:14px;border:none;cursor:pointer;
  padding:17px 46px;border-radius:999px;background:linear-gradient(135deg,#ecc26a,#d9a442);
  color:#17251e;font-size:15px;font-weight:700;letter-spacing:.34em;
  box-shadow:0 12px 34px rgba(224,180,92,.28);transition:transform .3s,box-shadow .3s}
#startBtn svg{width:18px;height:18px;transition:transform .3s}
#startBtn svg .stroke{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#startBtn:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(224,180,92,.42)}
#startBtn:hover svg{transform:translateX(5px)}
#startBtn.disabled{opacity:.4;pointer-events:none}
.note{margin-top:18px;font-size:11px;letter-spacing:.24em;color:rgba(242,237,224,.5)}
.poem{writing-mode:vertical-rl;font-family:var(--f-display);font-size:25px;line-height:1;
  letter-spacing:.42em;color:rgba(242,237,224,.85);height:360px;display:flex}
.poem p{margin:0 15px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.poem .seal{writing-mode:horizontal-tb;align-self:flex-end;margin-top:22px;width:36px;height:36px;
  ba.........完整代码请登录后点击上方下载按钮下载查看