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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
  :root{
    --red:#d5382e; --paper:#fffdf6; --ink:#2b2b33;
    --chalk:#f5f2e8; --board:#2f5d4a; --wood:#8a5a30; --gold:#ffd76a;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden}
  body{font-family:'Noto Sans SC',sans-serif;background:#87b7e0;color:var(--ink)}
  canvas.webgl{display:block}

  /* ---------- 加载页 ---------- */
  #loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:18px;
    align-items:center;justify-content:center;background:
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/7px 7px,
    linear-gradient(160deg,#37695a,#2b5544 60%,#244a3b);
    color:var(--chalk);transition:opacity .6s;}
  #loader .star{font-size:52px;color:var(--gold);animation:spin 2.4s linear infinite;text-shadow:0 0 18px rgba(255,215,106,.6)}
  #loader p{font-family:'ZCOOL KuaiLe';font-size:22px;letter-spacing:4px}
  #loader p::after{content:'';animation:dots 1.2s steps(1) infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
  #loader.done{opacity:0;pointer-events:none}

  /* ---------- 开始菜单(黑板风) ---------- */
  #menu{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
    background:rgba(12,22,18,.42);opacity:0;pointer-events:none;transition:opacity .5s}
  #menu.show{opacity:1;pointer-events:auto}
  .board{position:relative;width:min(720px,94vw);padding:44px 48px 58px;border-radius:6px;
    border:14px solid transparent;
    border-image:linear-gradient(45deg,#b07a42,#6f4522 30%,#a9743f 55%,#7c4f28 80%,#b07a42) 1;
    background:
      radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.6px) 0 0/7px 7px,
      radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.6px) 3px 5px/11px 11px,
      radial-gradient(600px 260px at 20% 0%,rgba(255,255,255,.06),transparent 70%),
      linear-gradient(160deg,#37695a,#2b5544 60%,#244a3b);
    box-shadow:0 30px 70px rgba(5,15,10,.55), inset 0 0 60px rgba(0,0,0,.25);
    color:var(--chalk);text-align:center;transform:translateY(14px);transition:transform .5s}
  #menu.show .board{transform:translateY(0)}
  .board .tag{display:inline-block;font-size:12px;letter-spacing:3px;padding:4px 14px;margin-bottom:14px;
    border:1.5px dashed rgba(245,242,232,.5);border-radius:99px;color:rgba(245,242,232,.85)}
  .board h1{font-family:'ZCOOL KuaiLe';font-weight:400;font-size:clamp(40px,7vw,62px);letter-spacing:8px;
    text-shadow:0 0 1px #fff,2px 3px 0 rgba(0,0,0,.28)}
  .board .squig{width:min(300px,60%);margin:6px auto 10px;display:block}
  .board .sub{font-size:15px;letter-spacing:2px;color:rgba(245,242,232,.85);margin-bottom:24px}
  .board .sub b{color:var(--gold);font-weight:700}
  .keys{display:grid;grid-template-columns:repeat(3,auto);gap:10px 26px;justify-content:center;margin-bottom:28px}
  .keys div{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(245,242,232,.9)}
  kbd.chalk{font-family:inherit;font-weight:600;font-size:13px;color:var(--chalk);
    border:1.5px solid rgba(245,242,232,.55);border-radius:7px;padding:3px 9px;background:rgba(255,255,255,.06)}
  #startBtn{cursor:pointer;font-family:'ZCOOL KuaiLe';font-size:24px;letter-spacing:4px;color:#fff;
    background:linear-gradient(180deg,#e14b3f,#c22e26);border:none;border-radius:12px;padding:14px 46px;
    box-shadow:0 6px 0 #8f1f18,0 14px 30px rgba(0,0,0,.35);transition:transform .18s,box-shadow .18s}
  #startBtn:hover{transform:translateY(-3px) rotate(-1deg) scale(1.03);box-shadow:0 9px 0 #8f1f18,0 20px 36px rgba(0,0,0,.4)}
  #startBtn:active{transform:translateY(2px);box-shadow:0 3px 0 #8f1f18}
  .board .note{margin-top:18px;font-size:12px;letter-spacing:1px;color:rgba(245,242,232,.55)}
  .doodle{position:absolute;font-size:30px;color:rgba(245,242,232,.7);animation:float 5s ease-in-out infinite}
  .doodle.d1{top:16px;left:22px;transform:rotate(-14deg)}
  .doodle.d2{top:20px;right:26px;transform:rotate(10deg);animation-delay:1.2s}
  .doodle.d3{bottom:52px;left:30px;transform:rotate(8deg);animation-delay:2s}
  .doodle.d4{bottom:60px;right:34px;transform:rotate(-8deg);animation-delay:.6s}
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
  .tray{position:absolute;left:50%;bottom:-30px;translate:-50% 0;width:46%;height:16px;border-radius:3px;
    background:linear-gradient(180deg,#a9743f,#7c4f28);box-shadow:0 6px 14px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;padding:0 14px}
  .tray i{display:block;width:34px;height:6px;border-radius:3px;background:#f7f4ea;box-shadow:0 1px 2px rgba(0,0,0,.4)}
  .tray i+i{width:22px;background:#ffd76a}
  .tray .eraser{margin-left:auto;width:40px;height:10px;border-radius:2px;background:#3a4a5c;box-shadow:0 1px 2px rgba(0,0,0,.4)}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .4s}
  #hud.on{opacity:1}
  #vig{position:fixed;inset:0;z-index:20;pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 58%,rgba(15,28,38,.30) 100%)}
  #xh{position:fixed;left:50%;top:50%;z-index:31}
  #xh .dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;translate:-50% -50%;
    box-shadow:0 0 0 1.5px rgba(20,30,40,.75)}
  #xh .ring{position:absolute;width:26px;height:26px;border-radius:50%;translate:-50% -50%;
    border:1.5px solid rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(20,30,40,.25);transition:all .25s}
  body.running #xh .ring{width:42px;height:42px;border-color:rgba(255,214,90,.95)}

  .paper{background-color:var(--paper);
    background-image:linear-gradient(90deg,transparent 0 10px,rgba(213,56,46,.30) 10px 11px,transparent 11px),
      repeating-linear-gradient(0deg,transparent 0 19px,rgba(120,170,210,.22) 19px 20px);
    border:1px solid #e5ddc9;border-left:4px solid var(--red);border-radius:8px;
    box-shadow:0 8px 22px rgba(25,40,60,.22)}
  .badge{position:fixed;top:16px;left:16px;display:fl.........完整代码请登录后点击上方下载按钮下载查看