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">
<title>烟雨亭 · 湖畔四时漫游</title>
<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;900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<link href="https://fonts.loli.net/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<style>
  :root{
    --ink:#0c1416; --paper:#e9e4d6; --muted:#9db0ab;
    --seal:#a8392b; --gold:#c9a061; --line:rgba(233,228,214,.16);
    --disp:'Ma Shan Zheng','KaiTi','STKaiti','楷体',serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; overflow:hidden; background:var(--ink);
    font-family:'Noto Serif SC','Songti SC','SimSun',serif; color:var(--paper); -webkit-user-select:none; user-select:none;}
  #scene{position:fixed; inset:0;}
  #scene canvas{display:block; cursor:crosshair;}

  .hud{position:fixed; z-index:10; pointer-events:none; opacity:0; transition:opacity 1.2s ease .3s;}
  body.started .hud{opacity:1;}

  #brand{top:22px; left:26px; display:flex; align-items:flex-start; gap:12px;}
  #brand .mark{width:10px; height:44px; background:linear-gradient(var(--seal),#5e1f16); border-radius:2px; margin-top:4px;}
  #brand h1{font-family:var(--disp); font-weight:400; font-size:30px; letter-spacing:8px; line-height:1;
    text-shadow:0 2px 14px rgba(0,0,0,.55);}
  #brand p{font-size:10px; letter-spacing:5px; color:var(--muted); margin-top:7px;}

  #weatherBox{top:20px; right:24px; display:flex; align-items:center; gap:12px;
    background:rgba(9,15,17,.55); border:1px solid var(--line); border-radius:8px;
    padding:9px 14px 9px 10px; backdrop-filter:blur(6px);}
  .seal{font-family:var(--disp); background:var(--seal); color:#f6ecda;
    width:46px; height:46px; display:grid; place-items:center; font-size:27px; border-radius:5px;
    transform:rotate(-5deg); box-shadow:inset 0 0 0 2px rgba(246,236,218,.4), 0 3px 12px rgba(0,0,0,.45);}
  .seal.pop{animation:sealPop .55s cubic-bezier(.2,1.6,.4,1);}
  @keyframes sealPop{0%{transform:rotate(-5deg) scale(.4);}100%{transform:rotate(-5deg) scale(1);}}
  #weatherBox .info b{display:block; font-size:15px; letter-spacing:3px; font-weight:600;}
  #weatherBox .info span{display:block; font-size:10px; letter-spacing:2px; color:var(--muted); margin-top:4px;}

  #hints{bottom:20px; left:24px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; max-width:46vw;}
  kbd{font-family:inherit; font-size:11px; letter-spacing:1px; color:var(--paper);
    border:1px solid var(--line); background:rgba(9,15,17,.55); border-radius:4px; padding:3px 8px;}
  #hints i{font-style:normal; font-size:11px; color:var(--muted); letter-spacing:2px; margin-right:6px;}
  #muteBtn{pointer-events:auto; cursor:pointer; transition:.25s;}
  #muteBtn:hover{border-color:var(--gold); color:var(--gold);}
  #muteBtn.off{opacity:.4; text-decoration:line-through;}

  #chips{bottom:20px; right:24px; display:flex; gap:7px; pointer-events:auto;}
  .chip{font-family:var(--disp); font-size:17px; width:38px; height:38px; border-radius:6px;
    border:1px solid var(--line); background:rgba(9,15,17,.55); color:var(--paper); cursor:pointer;
    transition:transform .2s, border-color .2s, background .2s; backdrop-filter:blur(6px);}
  .chip:hover{transform:translateY(-3px); border-color:rgba(233,228,214,.45);}
  .chip.active{border-color:var(--seal); background:rgba(168,57,43,.28); color:#f0c9a0;
    box-shadow:0 0 14px rgba(168,57,43,.35);}
  .chip small{display:block; font-family:'Noto Serif SC',serif; font-size:8px; letter-spacing:2px; color:var(--muted); line-height:0; margin-top:14px;}

  #toast{bottom:86px; left:50%; transform:translate(-50%,14px); z-index:12;
    background:rgba(9,15,17,.72); border:1px solid var(--line); border-left:3px solid var(--seal);
    padding:10px 22px; border-radius:6px; font-size:14px; letter-spacing:4px;
    opacity:0; transition:opacity .6s, transform .6s; backdrop-filter:blur(6px);}
  #toast.show{opacity:1; transform:translate(-50%,0);}
  #toast small{display:block; font-size:10px; color:var(--muted); letter-spacing:3px; margin-top:5px;}

  #crosshair{top:50%; left:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%;
    background:rgba(240,238,228,.75); box-shadow:0 0 6px rgba(0,0,0,.6); opacity:0;}
  body.locked #crosshair{opacity:.8;}

  #wet{position:fixed; inset:0; z-index:8; pointer-events:none; opacity:0;}
  #wet .streaks{position:absolute; inset:-40%;
    background-image:repeating-linear-gradient(103deg,
      rgba(190,212,232,0) 0 7px, rgba(190,212,232,.13) 7px 8px, rgba(190,212,232,0) 8px 15px);
    animation:lens .55s linear infinite;}
  @keyframes lens{to{transform:translate(-46px,96px);}}
  #wet .vig{position:absolute; inset:0;
    background:radial-gradient(ellipse at center, transparent 52%, rgba(14,24,32,.5) 100%);}

  #intro{position:fixed; inset:0; z-index:40; cursor:pointer; overflow:hidden;
    background:
      radial-gradient(1200px 700px at 78% 18%, rgba(64,92,96,.35), transparent 60%),
      radial-gradient(900px 600px at 15% 85%, rgba(38,58,56,.5), transparent 65%),
      linear-gradient(160deg,#0e181a 0%, #0a1113 55%, #070c0e 100%);
    transition:opacity 1.1s ease;}
  #intro.hide{opacity:0; pointer-events:none;}
  #intro .grain{position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");}
  #intro .mtn{position:absolute; left:0; right:0; bottom:0; width:100%; height:42vh; display:block;}
  #intro .inner{position:relative; z-index:2; height:100%; display:flex; align-items:center;
    justify-content:space-between; padding:0 9vw;}
  #intro .left{max-width:540px;}
  #intro .tag{font-size:11px; letter-spacing:6px; color:var(--gold); border:1px solid rgba(201,160,97,.4);
    display:inline-block; padding:6px 14px; border-radius:3px; margin-bottom:34px;}
  #intro .poem{font-size:19px; letter-spacing:4px; line-height:2.1; color:#d9d4c4;}
  #intro .poem em{font-style:normal; color:var(--muted); font-size:12px; letter-spacing:3px; display:block; margin-top:10px;}
  #intro .feat{margin-top:34px; display:flex; flex-direction:column; gap:10px;}
  #intro .feat span{font-size:12px; letter-spacing:3px; color:var(--muted); padding-left:18px; position:relative;}
  #intro .feat span::before{content:''; position:absolute; left:0; top:8px; width:9px; height:1px; background:var(--seal);}
  #enterBtn{margin-top:44px; pointer-events:none; display:inline-block;
    font-family:var(--disp); font-size:22px; letter-spacing:10px; color:var(--paper);
    border:1px solid rgba(233,228,214,.4); padding:14px 34px 14px 44px; border-radius:4px;
    position:relative; transition:.35s; background:rgba(168,57,43,.12);}
  #intro:hover #enterBtn{background:var(--seal); border-color:var(--seal); letter-spacing:14px;
    box-shadow:0 8px 30px rgba(168,57,43,.4);}
  #loadStatus{margin-top:18px; font-size:11px; letter-spacing:3px; color:var(--gold);
    min-height:16px; animation:pulse 1.6s ease-in-out infinite;}
  @keyframes pulse{50%{opacity:.35;}}
  #intro .keys{margin-top:14px; font-size:11px; letter-spacing:2px; color:#6f837e;}
  #intro .right{display:flex; flex-direction:column; align-items:center; gap:26px;}
  #intro .vtitle{writing-mode:vertical-rl; font-family:var(--disp); font-size:clamp(84px,15vh,150px);
    letter-spacing:18px; color:#ece7d8; text-shadow:0 4px 30px rgba(0,0,0,.6);
    border-right:1px solid rgba(233,228,214,.18); padding-right:26px;}
  #intro .vseal{font-family:var(--disp); background:var(--seal); color:#f6ecda; writing-mode:vertical-rl;
    font-size:20px; letter-spacing:8px; padding:14px 8px; border-radius:4px; transform:rotate(3deg);
    box-shadow:inset 0 0 0 2px rgba(246,236,218,.4), 0 4px 18px rgba(0,0,0,.5);}
  #touchNote{position:absolute; z-index:3; bottom:16px; left:50%; transform:translateX(-50%);
    font-size:11px; letter-spacing:2px; color:#7d918c; display:n.........完整代码请登录后点击上方下载按钮下载查看