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, maximum-scale=1.0, user-scalable=no">
<title>骏马牧场 · Three.js 骑马模拟</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
  :root{
    --leather:#3d2a1a; --leather2:#2b1c10; --cream:#f3e7cf; --gold:#e8b04b;
    --gold2:#ffd98a; --ink:#1c120a; --red:#b0402f;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#1a120a;
    font-family:'Noto Sans SC',system-ui,sans-serif;color:var(--cream);
    -webkit-user-select:none;user-select:none}
  canvas{display:block}
  .disp{font-family:'Ma Shan Zheng','STKaiti','KaiTi',serif}
  .hidden{display:none !important}
  .panel{
    background:linear-gradient(160deg,#4a3421,var(--leather2));
    border:2px solid #1e1208;border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,230,180,.25), inset 0 0 22px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.45);
    padding:10px 14px;
  }
  kbd{display:inline-block;min-width:26px;text-align:center;padding:3px 8px;margin:0 2px;
    background:linear-gradient(#5c4426,#3a2814);border:1px solid #1e1208;border-radius:6px;
    box-shadow:0 2px 0 #16100a;font-family:inherit;font-weight:700;font-size:12px;color:var(--gold2)}
  /* ---------------- HUD ---------------- */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:20}
  #topbar{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  #statPanel{display:flex;gap:20px;align-items:center;font-size:15px}
  .stat{display:flex;align-items:center;gap:7px;white-space:nowrap}
  .stat b{font-size:22px;color:var(--gold2);font-weight:900;min-width:2ch}
  .stat span{opacity:.65}
  .stat svg{width:22px;height:22px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
  #timer.low{color:#ff8d6b;animation:pulse .7s infinite alternate}
  @keyframes pulse{from{opacity:1}to{opacity:.45}}
  #rightCol{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:auto}
  #muteBtn{pointer-events:auto;cursor:pointer;font-size:16px;padding:7px 12px;border-radius:10px;
    background:linear-gradient(#4a3421,#2b1c10);border:2px solid #1e1208;color:var(--cream);
    box-shadow:0 4px 12px rgba(0,0,0,.4)}
  #muteBtn:hover{transform:translateY(-1px)}
  #minimap{border-radius:50%;border:4px solid #241608;box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 12px rgba(0,0,0,.4)}
  #speedPanel{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:4px;min-width:190px}
  #speedRow{display:flex;align-items:baseline;gap:8px}
  #speedNum{font-size:52px;font-weight:900;color:var(--gold2);line-height:1;text-shadow:0 3px 8px rgba(0,0,0,.6)}
  #speedUnit{font-size:13px;opacity:.7}
  #gait{font-size:17px;letter-spacing:6px;color:#ffd98a}
  #staminaWrap{height:10px;border-radius:6px;background:#1a0f06;border:1px solid #000;overflow:hidden;margin-top:4px}
  #staminaFill{height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,#7fb35a,#cfe08a);transition:width .15s}
  #staminaFill.tired{background:linear-gradient(90deg,#c0392b,#e67e22)}
  #staminaLabel{font-size:11px;opacity:.6;letter-spacing:2px}
  #toasts{position:absolute;top:24%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
  .toast{font-size:22px;font-weight:900;color:var(--gold2);text-shadow:0 2px 0 #4a2f10,0 4px 14px rgba(0,0,0,.7);
    animation:toastUp 1.6s ease-out forwards}
  .toast.bad{color:#ff9d7d}
  @keyframes toastUp{0%{opacity:0;transform:translateY(18px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.08)}
    30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
  #bigMsg{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:110px;color:var(--gold2);
    text-shadow:0 4px 0 #4a2f10,0 10px 34px rgba(0,0,0,.8);pointer-events:none;opacity:0}
  #bigMsg.pop{animation:bigPop .9s ease-out}
  @keyframes bigPop{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
  #hitFlash{position:fixed;inset:0;pointer-events:none;z-index:19;box-shadow:inset 0 0 140px rgba(200,40,20,.9);opacity:0;transition:opacity .5s}
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:18;box-shadow:inset 0 0 180px rgba(15,8,2,.55)}
  /* ---------------- 开始界面 ---------------- */
  #startOverlay{position:fixed;inset:0;z-index:40;display:flex;
    background:radial-gradient(1100px 700px at 68% 42%, rgba(30,16,6,.05), rgba(22,12,5,.72) 85%);}
  #startLeft{margin:auto 0 auto clamp(20px,6vw,90px);max-width:560px;padding:24px 0 24px 26px;
    border-left:5px solid var(--gold);background:linear-gradient(90deg,rgba(20,11,4,.55),rgba(20,11,4,0))}
  #kicker{font-size:13px;letter-spacing:8px;color:var(--gold);font-weight:700;margin-bottom:6px}
  #gameTitle{font-size:clamp(64px,9vw,118px);line-height:1.02;color:#f7ead2;font-weight:400;
    text-shadow:0 3px 0 #6b4518, 0 10px 30px rgba(0,0,0,.75)}
  #gameTitle em{font-style:normal;color:var(--gold2)}
  #sub{font-size:16px;letter-spacing:5px;opacity:.85;margin:8px 0 22px}
  .pickLabel{font-size:13px;letter-spacing:4px;opacity:.75;margin-bottom:8px}
  #coats{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
  .coat{cursor:pointer;text-align:left;padding:10px 14px;border-radius:10px;border:2px solid #20130a;
    background:linear-gradient(#3f2c19,#271809);color:var(--cream);display:flex;gap:10px;align-items:center;
    transition:transform .15s, border-color .15s, box-shadow .15s}
  .coat:hover{transform:translateY(-3px)}
  .coat.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,176,75,.35), 0 8px 20px rgba(0,0,0,.5)}
  .coat .dot{width:34px;height:34px;border-radius:50%;border:3px solid #14100a;box-shadow:inset -4px -6px 10px rgba(0,0,0,.45)}
  .coat .cname{font-size:18px;font-weight:900}
  .coat .cdesc{font-size:11px;opacity:.7}
  #mission{font-size:14px;line-height:1.9;background:rgba(20,11,4,.5);border:1px dashed rgba(232,176,75,.5);
    border-radius:10px;padding:10px 14px;margin-bottom:20px}
  #mission b{color:var(--gold2)}
  #startBtn{cursor:pointer;font-family:'Ma Shan Zheng',serif;font-size:34px;letter-spacing:8px;color:#241305;
    background:linear-gradient(#.........完整代码请登录后点击上方下载按钮下载查看