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">
<meta name="color-scheme" content="dark">
<title>高山流水 · 玻璃立方微缩景观</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
<style>
  :root{ --gold:#e2c187; --ink:#dfe8ec; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ height:100%; overflow:hidden; background:#070b0f; }
  body{ font-family:'Noto Serif SC','Songti SC','SimSun',serif; color:var(--ink); }
  canvas{ position:fixed; inset:0; display:block; z-index:0; }

  /* 暗角 */
  #vignette{ position:fixed; inset:0; z-index:3; pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(2,4,6,.55) 100%); }

  /* 标题区 */
  .title{ position:fixed; top:36px; left:44px; z-index:10; pointer-events:none;
    display:flex; align-items:flex-start; gap:18px; }
  .seal{ width:48px; height:48px; margin-top:10px; background:#9e3126; color:#f6ecd4;
    border-radius:7px; display:grid; place-items:center; font-family:'KaiTi','STKaiti',serif;
    font-size:19px; letter-spacing:2px; writing-mode:vertical-rl; text-align:center;
    box-shadow:0 4px 18px rgba(158,49,38,.45), inset 0 0 0 1.5px rgba(246,236,212,.35); }
  .title h1{ font-family:'Ma Shan Zheng','KaiTi','STKaiti',serif; font-weight:400;
    font-size:clamp(42px,5.6vw,78px); line-height:1.05; letter-spacing:.1em; color:#f2e7c9;
    text-shadow:0 2px 28px rgba(226,193,135,.28); }
  .title .zh{ margin-top:8px; font-size:13px; letter-spacing:.5em; color:rgba(223,232,236,.62); }
  .title .en{ margin-top:6px; font-size:10px; letter-spacing:.32em; color:rgba(223,232,236,.34); }

  /* 右上 / 右下信息 */
  #tech{ position:fixed; top:40px; right:44px; z-index:10; font-size:11px; letter-spacing:.26em;
    color:rgba(223,232,236,.42); border:1px solid rgba(223,232,236,.14); padding:8px 16px;
    border-radius:999px; background:rgba(10,16,20,.35); backdrop-filter:blur(8px); }
  #hint{ position:fixed; right:44px; bottom:30px; z-index:10; font-size:12px;
    letter-spacing:.16em; color:rgba(223,232,236,.42); }

  /* 底部控制栏 */
  #ui{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:10;
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
  #ui button{ cursor:pointer; font-family:inherit; font-size:13px; letter-spacing:.14em;
    color:var(--ink); background:rgba(16,24,30,.55); border:1px solid rgba(223,232,236,.16);
    padding:10px 22px; border-radius:999px; backdrop-filter:blur(10px); transition:all .25s ease; }
  #ui button:hover{ background:rgba(40,56,66,.72); border-color:rgba(226,193,135,.55); }
  #ui button.on{ color:#0d1216; background:var(--gold); border-color:var(--gold);
    box-shadow:0 4px 22px rgba(226,193,135,.35); }

  /* 加载页 */
  #loader{ position:fixed; inset:0; z-index:100; background:#070b0f; display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:26px; transition:opacity 1s ease; }
  #loader.done{ opacity:0; pointer-events:none; }
  .spinner{ width:52px; height:52px; perspective:300px; }
  .spinner .c{ width:100%; height:100%; position:relative; transform-style:preserve-3d;
    animation:cubespin 2.6s linear infinite; }
  .spinner i{ position:absolute; inset:0; border:1px solid rgba(226,193,135,.7); background:rgba(226,193,135,.06); }
  .spinner i:nth-child(1){ transform:translateZ(26px); }
  .spinner i:nth-child(2){ transform:rotateY(180deg) translateZ(26px); }
  .spinner i:nth-child(3){ transform:rotateY(90deg) translateZ(26px); }
  .spinner i:nth-child(4){ transform:rotateY(-90deg) translateZ(26px); }
  .spinner i:nth-child(5){ transform:rotateX(.........完整代码请登录后点击上方下载按钮下载查看