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, user-scalable=no">
<title>铁牛翻田 · 拖拉机耕地体验</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&family=Chakra+Petch:wght@500;700&display=swap" rel="stylesheet">
<style>
:root{
  --green-900:#131f10; --green-800:#22371f; --green-700:#2f4a28;
  --gold:#e9b949; --gold-soft:#f4d47c; --cream:#f3ead2; --soil:#5b3d22;
  --display:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --num:'Chakra Petch','Noto Sans SC',monospace;
  --body:'Noto Sans SC',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#131f10;font-family:var(--body);color:var(--cream)}
#world{position:fixed;inset:0}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(8,14,6,.4) 100%)}

/* ===== 金属面板风格 ===== */
.plate{position:relative;color:var(--cream);border:2px solid #0e160b;border-radius:10px;
  background:linear-gradient(160deg,#33452c,#243320 58%,#1b2817);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 0 rgba(0,0,0,.45),0 8px 22px rgba(6,10,4,.5)}
.plate::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:8px;
  background-image:
   radial-gradient(circle 2.6px at 11px 11px,#aab396 40%,rgba(0,0,0,.55) 60%,transparent 70%),
   radial-gradient(circle 2.6px at calc(100% - 11px) 11px,#aab396 40%,rgba(0,0,0,.55) 60%,transparent 70%),
   radial-gradient(circle 2.6px at 11px calc(100% - 11px),#aab396 40%,rgba(0,0,0,.55) 60%,transparent 70%),
   radial-gradient(circle 2.6px at calc(100% - 11px) calc(100% - 11px),#aab396 40%,rgba(0,0,0,.55) 60%,transparent 70%);
  background-repeat:no-repeat}
.hazard{height:8px;border-radius:8px 8px 0 0;
  background:repeating-linear-gradient(-45deg,var(--gold) 0 14px,#1a2118 14px 28px)}
kbd{font-family:var(--num);font-size:12px;background:#1a2416;border:1px solid #4a5f3c;
  border-bottom:3px solid #0b100a;border-radius:6px;padding:1px 7px;color:var(--gold-soft)}

/* ===== 左上标题牌 ===== */
#brand{position:fixed;top:16px;left:16px;z-index:20;min-width:210px}
.brand-in{padding:10px 18px 12px}
.brand-cn{font-family:var(--display);font-size:32px;letter-spacing:6px;color:var(--gold);
  text-shadow:0 2px 0 #6b4a12,0 4px 8px rgba(0,0,0,.5)}
.brand-en{font-family:var(--num);font-size:10px;letter-spacing:3px;color:#a9bb93;margin-top:2px}
.brand-model{font-size:11px;color:#d8cba4;margin-top:6px;border-top:1px dashed #4a5f3c;padding-top:5px}

/* ===== 右上统计 ===== */
#stats{position:fixed;top:16px;right:16px;z-index:20;padding:12px 16px;min-width:168px}
.stat{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:3px 0}
.stat-k{color:#a9bb93;letter-spacing:2px}
.stat-v{font-family:var(--num);color:var(--gold-soft)}
.stat-v b{font-size:17px;color:var(--gold)}

/* ===== 左下操作手册 ===== */
#help{position:fixed;left:16px;bottom:16px;z-index:20;padding:12px 16px;font-size:13px}
.help-t{font-family:var(--display);letter-spacing:4px;color:var(--gold);font-size:16px;margin-bottom:7px}
.help-r{margin:5px 0;color:#d8d0b4}
.help-r kbd{margin-right:4px}

/* ===== 底部仪表盘 ===== */
#dash{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:20;width:min(680px,94vw)}
.dash-in{display:flex;align-items:center;gap:22px;padding:12px 20px 14px}
.gauge{position:relative;width:116px;height:116px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#22301b,#0c130a 74%);
  border:3px solid #0a1008;
  box-shadow:inset 0 0 0 3px #3e5132,inset 0 8px 16px rgba(0,0,0,.65),0 4px 10px rgba(0,0,0,.45)}
#gTicks{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
#needle{position:absolute;left:50%;bottom:50%;width:4px;height:42px;margin-left:-2px;
  background:linear-gradient(#ff6a3d,#ffd23e);border-radius:3px;transform-origin:50% 100%;
  transform:rotate(-120deg);transition:transform .12s linear;box-shadow:0 0 7px rgba(255,130,60,.8)}
.gauge::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#cfd6bd,#3a4530);box-shadow:0 0 4px #000}
.gauge-num{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--num)}
.gauge-num b{font-size:25px;color:var(--gold-soft);text-shadow:0 0 8px rgba(244,212,124,.4)}
.gauge-num i{display:block;font-style:normal;font-size:9px;letter-spacing:3px;color:#8fa37c}
.prog-wrap{flex:1;min-width:0}
.prog-top{display:flex;justify-content:space-between;font-size:13px;letter-spacing:2px;color:#c9c19d;margin-bottom:6px}
.prog-top b{font-family:var(--num);f.........完整代码请登录后点击上方下载按钮下载查看