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>彩虹游乐场 · Three.js 儿童乐园</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=Baloo+2:wght@600;800&family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#37345e; --paper:#fffdf6;
    --coral:#ff6b6b; --sun:#ffd93d; --mint:#6bcb77; --sky:#4d96ff; --pink:#ff8fab;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;overflow:hidden;font-family:'Noto Sans SC',sans-serif;background:#8fd8ff;}
  #app{position:fixed;inset:0;}
  #app canvas{display:block;}

  .sticker{
    background:var(--paper); border:3px solid var(--ink); border-radius:16px;
    box-shadow:5px 6px 0 rgba(55,52,94,.16);
    transition:background .6s,color .6s,border-color .6s;
  }

  /* ---------- 品牌标题 ---------- */
  #brand{position:fixed;top:18px;left:20px;padding:10px 22px 13px;transform:rotate(-2deg);z-index:10;user-select:none;}
  #brand h1{
    font-family:'ZCOOL KuaiLe';font-weight:400;margin:0;letter-spacing:3px;
    font-size:clamp(26px,4.2vw,40px);color:var(--coral);
    text-shadow:2.5px 2.5px 0 var(--sun), 5px 5px 0 rgba(55,52,94,.12);
  }
  #brand p{margin:3px 0 0;font-size:10.5px;letter-spacing:3.5px;color:#8a87ad;font-weight:700;}

  /* ---------- 右上角按钮 ---------- */
  #hud{position:fixed;top:18px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:12;}
  .cbtn{
    width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);
    font-size:21px;cursor:pointer;display:grid;place-items:center;line-height:1;padding:0;
    box-shadow:3px 4px 0 rgba(55,52,94,.18);
    transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .4s;
  }
  .cbtn:hover{transform:translateY(-3px) scale(1.07);box-shadow:3px 8px 0 rgba(55,52,94,.22);}
  .cbtn:active{transform:translateY(1px) scale(.96);box-shadow:2px 2px 0 rgba(55,52,94,.2);}
  .cbtn.on{background:var(--sun)!important;}
  #hud .cbtn:nth-child(1){background:#cdeaff;}
  #hud .cbtn:nth-child(2){background:#ffe3e3;}
  #hud .cbtn:nth-child(3){background:#d9f7e6;}
  #hud .cbtn:nth-child(4){background:#fff0c2;}
  #hud .cbtn:nth-child(5){background:#e8f0ff;}

  /* ---------- 快乐值 ---------- */
  #score{
    position:fixed;top:18px;left:50%;transform:translateX(-50%) rotate(1deg);
    padding:8px 20px;font-family:'ZCOOL KuaiLe';font-size:17px;color:var(--ink);
    z-index:10;display:flex;gap:8px;align-items:center;user-select:none;
  }
  #score b{color:var(--coral);font-size:23px;display:inline-block;font-weight:400;}
  #score.bump b{animation:bump .45s cubic-bezier(.34,1.56,.64,1);}
  @keyframes bump{40%{transform:scale(1.6) rotate(10deg);}}

  /* ---------- 提示 / 弹窗 ---------- */
  #hint{position:fixed;left:20px;bottom:18px;padding:8px 15px;font-size:12.5px;color:var(--ink);z-index:10;transform:rotate(1deg);user-select:none;}
  #toast{
    position:fixed;left:50%;bottom:66px;transform:translate(-50%,18px);
    background:var(--ink);color:#fff;padding:10px 24px;border-radius:999px;
    font-family:'ZCOOL KuaiLe';font-size:16px;letter-spacing:1.5px;opacity:0;pointer-events:none;
    transition:.35s cubic-bezier(.34,1.56,.64,1);z-index:20;box-shadow:0 8px 24px rgba(20,18,50,.35);
  }
  #toast.show{opacity:1;transform:translate(-50%,0);}

  /* ---------- 玩法说明 ---------- */
  #help{
    position:fixed;right:20px;top:50%;width:256px;padding:16px 20px;z-index:15;
    transform:translateY(-50%) translateX(24px);opacity:0;pointer-events:none;transition:.3s ease;
  }
  #help.show{opacity:1;pointer-events:auto;transform:translateY(-50%);}
  #help h3{font-family:'ZCOOL KuaiLe';font-weight:400;margin:0 0 10px;color:var(--sky);font-size:20px;letter-spacing:2px;}
  #help ul{padding:0;margin:0;}
  #help li{font-size:13px;color:var(--ink);margin:7px 0;list-style:none;line-height:1.5;}
  #help footer{margin-top:12px;padding-top:9px;border-top:2px dashed #d9d6ef;font-size:10.5px;color:#9a97bb;letter-spacing:1px;}

  /* ---------- 漂浮 +N ---------- */
  #floats{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden;}
  #floats span{
    position:absolute;font-family:'ZCOOL KuaiLe';font-size:22px;color:var(--sun);
    text-shadow:2px 2px 0 var(--ink);animation:floatUp 1.1s ease-out forwards;white-space:nowrap;
  }
  @keyframes floatUp{to{transform:translateY(-76px) rotate(6deg);opacity:0;}}

  /* ---------- 加载页 ---------- */
  #loader{
    position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;gap:26px;align-items:center;justify-content:center;
    background:linear-gradient(#79cdff 0%,#c6eeff 62%,#eafbff 100%);transition:opacity .7s ease;
  }
  #loader.done{opacity:0;pointer-events:none;}
  .loader-sun{
    width:74px;height:74px;border-radius:50%;background:var(--sun);
    box-shadow:0 0 0 14px rgba(255,217,61,.35),0 0 0 30px rgba(255.........完整代码请登录后点击上方下载按钮下载查看