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"/>
<meta name="theme-color" content="#17110a"/>
<title>麦浪滚滚 · 丰收号收割体验</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#e8b64c; --gold2:#f5d67e; --ink:#241d10;
  --panel:rgba(32,26,13,.86); --line:rgba(232,182,76,.42);
  --txt:#f3e6c4; --sub:#c9b98f; --red:#d9543a; --green:#8fae5a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Noto Sans SC',sans-serif;background:#17110a;color:var(--txt)}
#scene,#scene canvas{position:fixed;inset:0;display:block;z-index:0}
#vig{position:fixed;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 42%,transparent 55%,rgba(24,12,2,.4) 100%)}
.shade{position:fixed;left:0;right:0;height:130px;z-index:5;pointer-events:none}
#shadeT{top:0;background:linear-gradient(rgba(20,12,2,.42),transparent)}
#shadeB{bottom:0;background:linear-gradient(transparent,rgba(20,12,2,.42))}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);
  box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,230,170,.12);
  backdrop-filter:blur(3px)}

.plate{position:absolute;top:16px;left:16px;padding:10px 20px 11px;
  border-radius:4px 22px 4px 22px}
.plate-t{font-family:'ZCOOL KuaiLe';font-size:27px;color:var(--gold2);
  letter-spacing:3px;text-shadow:0 2px 0 rgba(0,0,0,.45);display:flex;align-items:center;gap:8px}
.wheat-ico{display:inline-block;font-size:24px;transform-origin:50% 90%;
  animation:sway 3.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.plate-s{font-size:12px;color:var(--sub);margin-top:2px;letter-spacing:1px;display:flex;gap:8px;align-items:center}
#camName{font-style:normal;font-size:11px;color:var(--ink);background:var(--gold);
  padding:1px 8px;border-radius:99px;font-weight:700}

.stats{position:absolute;top:16px;right:16px;width:242px;padding:14px 16px;border-radius:16px}
.s-row{display:flex;justify-content:space-between;align-items:baseline}
.s-label{font-size:12px;color:var(--sub);letter-spacing:2px}
.s-val{font-family:'Rajdhani';font-size:26px;font-weight:700;color:var(--gold2)}
.s-val.sm{font-size:15px}
.bar{height:10px;background:#171106;border-radius:6px;overflow:hidden;margin:6px 0 10px;
  border:1px solid rgba(232,182,76,.25)}
.bar i{display:block;height:100%;width:0%;position:relative;
  background:linear-gradient(90deg,#c98f2e,#f0cf7a);transition:width .25s}
.bar i::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(60deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px);
  animation:stripes .8s linear infinite}
@keyframes stripes{to{background-position:24px 0}}
.bar.tank i{background:linear-gradient(90deg,#6f9440,#b9d77e)}
.bar.tank.full i{background:linear-gradient(90deg,#c04a2c,#f08a5a);animation:tPulse .6s infinite alternate}
@keyframes tPulse{to{filter:brightness(1.45)}}
.s-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:2px 0 12px}
.s-grid b{display:block;font-family:'Rajdhani';font-size:22px;font-weight:700;color:var(--gold2);line-height:1}
.s-grid b.bump{animation:pop .18s}
@keyframes pop{50%{transform:scale(1.28);color:#fff}}
.s-grid span{font-size:11px;color:var(--sub)}
.s-grid em{font-style:normal;opacity:.7}

.keys{position:absolute;left:16px;bottom:16px;padding:12px 16px;border-radius:14px;
  display:grid;grid-template-columns:repeat(4,auto);gap:9px 16px}
.ki{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--sub)}
kbd{min-width:32px;height:30px;padding:0 7px;display:grid;place-items:center;
  background:#221a0b;border:1px solid var(--line);border-bottom-width:3px;border-radius:7px;
  font:600 13px 'Rajdhani';color:var(--gold2);transition:all .1s}
kbd.active{background:var(--gold);color:var(--ink);transform:translateY(2px);border-bottom-width:1px}

.dock{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
#mini{border-radius:10px;background:rgba(22,17,8,.88);display:block}
.camBtns,.sysBtns{display:flex;gap:6px}
.btn{pointer-events:auto;background:#241c0d;border:1px solid var(--line);color:var(--gold2);
  padding:7px 13px;border-radius:9px;font-size:13px;font-family:'Noto Sans SC';cursor:pointer;
  transition:all .15s}
.btn:hover{background:#35280f;transform:translateY(-1px);box-shadow:0 5px 16px rgba(232,182,76,.25)}
.btn:active{transform:translateY(1px)}
.btn.on{background:linear-gradient(180deg,#f0cf7a,#d9a441);color:var(--ink);font-weight:700}

.gauge{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:158px;
  padding:8px 12px 6px;border-radius:16px;text-align:center}
.gauge svg{width:100%;display:block}
.spd{font-family:'Rajdhani';font-size:34px;font-weight:700;color:var(--gold2);line-height:.9;margin-top:-34px}
.spd small{font-size:11px;color:var(--sub);font-weight:500;margin-left:3px}

#toasts{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{backgrou.........完整代码请登录后点击上方下载按钮下载查看