three做个三维西湖水面第一人称划船体验场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash 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, user-scalable=no">
<title>西湖泛舟 · 第一人称湖上漫游</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
  :root{ --ink:#26241f; --paper:#f2ecdf; --seal:#a63a28; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:100%; height:100%; overflow:hidden; background:#101413;
    font-family:'Noto Serif SC','Songti SC','STSong','SimSun',serif; }
  canvas{ display:block; }

  /* ---------- 开场 ---------- */
  #intro{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
      var(--paper);
    transition:opacity 1.6s ease; }
  #intro.hide{ opacity:0; pointer-events:none; }
  #intro .ibox{ text-align:center; padding:44px 58px; border:1px solid rgba(38,36,31,.55);
    outline:1px solid rgba(38,36,31,.22); outline-offset:6px; position:relative; }
  #intro .irow{ display:flex; align-items:center; justify-content:center; gap:34px; }
  #intro h1{ writing-mode:vertical-rl; font-weight:900; font-size:clamp(52px,9vw,92px);
    letter-spacing:.28em; color:var(--ink); line-height:1; }
  #intro .iside{ writing-mode:vertical-rl; display:flex; gap:14px; height:clamp(220px,36vw,340px); }
  #intro .isub{ font-size:13px; letter-spacing:.42em; color:rgba(38,36,31,.66); border-right:1px solid rgba(38,36,31,.3); padding-right:12px; }
  #intro .ipoem{ font-size:15px; letter-spacing:.3em; color:rgba(38,36,31,.85); line-height:2; }
  #start{ margin-top:34px; font-family:inherit; font-size:19px; letter-spacing:.7em; text-indent:.7em;
    padding:12px 42px; background:none; border:1.5px solid var(--ink); color:var(--ink); cursor:pointer;
    transition:all .25s ease; }
  #start:hover{ background:var(--ink); color:var(--paper); }
  .seal{ display:inline-block; background:var(--seal); color:#f6efe2; font-size:15px; line-height:1;
    padding:6px 7px; transform:rotate(-4deg); letter-spacing:0; }
  #intro .ihint{ margin-top:26px; font-size:11px; letter-spacing:.2em; color:rgba(38,36,31,.5); }

  /* ---------- HUD ---------- */
  .hud{ position:fixed; z-index:20; color:var(--paper); text-shadow:0 1px 10px rgba(0,0,0,.45);
    pointer-events:none; user-select:none; }
  #brand{ left:26px; top:24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
  #brand .vtitle{ writing-mode:vertical-rl; font-size:24px; font-weight:600; letter-spacing:.5em;
    color:rgba(246,240,226,.92); }
  #brand .seal{ text-shadow:none; }
  #weather{ right:30px; bottom:64px; text-align:right; opacity:0; transform:translateY(8px);
    transition:opacity 1.2s ease, transform 1.2s ease; }
  #weather.show{ opacity:1; transform:none; }
  #wname{ font-size:24px; letter-spacing:.22em; font-weight:600; }
  #wpoem{ font-size:12.5px; letter-spacing:.28em; margin-top:7px; color:rgba(246,240,226,.72); }
  #tips{ left:26px; bottom:22px; font-size:11.5px; line-height:2; letter-spacing:.14em;
    color:rgba(246,240,226,.66); animation:tipfade 1.4s ease 16s forwards; }
  @keyframes tipfade{ to{ opacity:0; } }

  #wbtns{ position:fixed; z-index:30; left:50%; bottom:20px; transform:translateX(-50%);
    display:flex; gap:6px; }
  #wbtns button{ font-family:inherit; font-size:12.5px; letter-spacing:.1em; padding:6px 13px;
    background:rgba(16,18,17,.32); color:rgba(246,240,226,.85); border:1px solid rgba(246,240,226,.28);
    cursor:pointer; transition:all .2s ease; backdrop-filter:blur(4px); }
  #wbtns button:hover{ background:rgba(246,240,226,.16); }
  #wbtns button.on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

  #mute{ position:fixed; z-index:30; right:24px; top:22px; width:38px; height:38px;
    background:rgba(16,18,17,.32); border:1px solid rgba(246,240,226,.28); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .2s; }
  #mute:hover{ background:rgba(246,240,226,.16); }
  #mute svg{ width:20px; height:20px; stroke:rgba(246,240,226,.9); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  #mute .cross{ display:none; }
  #mute.off .wav{ display:none; } #mute.off .cross{ display:block; }
</style>
</head>
<body>

<div id="intro">
  <div class="ibox">
    <div class="irow">
      <h1>西湖泛舟</h1>
      <div class="iside">
        <span class="isub">湖心亭 · 三潭印月 · 雷峰夕照</span>
        <span class="ipoem">水光潋滟晴方好<br>山色空蒙雨亦奇</span>
      </div>
    </div>
    <button id="start">入舟</button>
    <div class="ihint">建议佩戴耳机 —— 雨声、橹声、鸟鸣皆为实时合成 <span class="seal">游</span></div>
  </div>
</div>

<div class="hud" id="brand"><div class="vtitle">西湖泛舟</div><div class="seal">游</div></div>
<div class="hud" id="weather"><div id="wname"></div><div id="wpoem"></div></div>
<div class="hud" id="tips">拖动 —— 环顾四周<br>W / S —— 摇橹前进 · 后退<br>A / D —— 转向<br>点击水面 —— 荡开涟漪<br>滚轮 —— 远近</.........完整代码请登录后点击上方下载按钮下载查看