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 href="https://fonts.googleapis.com/css2?family=Bungee&family=Chakra+Petch:wght@400;500;600;700&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
:root{--soil:#14261a;--amber:#ffb703;--amber2:#f59e0b;--red:#e4572e;--paper:#f4f1e4}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0d1a10;
  font-family:"Chakra Petch","Microsoft YaHei","PingFang SC",sans-serif;color:var(--paper)}
#app{position:fixed;inset:0}canvas{display:block}
.panel{background:linear-gradient(160deg,rgba(20,38,26,.94),rgba(13,26,16,.92));
  border:1px solid rgba(255,183,3,.35);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:0 6px 24px rgba(0,0,0,.45);position:relative}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:repeating-linear-gradient(45deg,var(--amber) 0 9px,#151515 9px 18px);opacity:.9}
.panel-label{font-size:11px;letter-spacing:.28em;color:var(--amber);font-weight:700;text-transform:uppercase}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .6s}
body.on #hud{opacity:1}#hud .panel{pointer-events:auto}
#mission{position:absolute;top:18px;left:18px;width:300px;padding:16px 16px 14px}
#mission h2{font-family:"ZCOOL KuaiLe";font-size:22px;font-weight:400;margin:6px 0 2px;line-height:1.25}
#mission .sub{font-size:12px;color:#b9c9a8;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,183,3,.12);
  border:1px solid rgba(255,183,3,.4);padding:3px 10px;font-size:13px;font-weight:600;color:#ffe1a0}
.chip .dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 8px currentColor}
#slots{display:flex;gap:6px;margin-top:12px}
#slots .slot{width:26px;height:26px;border:1px dashed rgba(244,241,228,.35);display:flex;align-items:center;justify-content:center;transition:.2s}
#slots .slot.full{border-style:solid;border-color:var(--amber);background:rgba(255,183,3,.15);animation:slotpop .3s}
#slots .slot i{width:14px;height:14px;border-radius:3px;display:block}
@keyframes slotpop{0%{transform:scale(.4)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
#slots-label{font-size:11px;color:#9db18c;margin-top:6px;letter-spacing:.1em}
#stats{position:absolute;top:18px;right:18px;width:210px;padding:14px 14px 12px;text-align:right}
#money{font-family:"Bungee";font-size:34px;color:var(--amber);line-height:1;text-shadow:0 2px 0 #6b4a00,0 4px 14px rgba(0,0,0,.5)}
#money.pop{animation:moneypop .4s}
@keyframes moneypop{0%{transform:scale(1)}40%{transform:scale(1.28);color:#fff}100%{transform:scale(1)}}
#stats .row{display:flex;justify-content:flex-end;gap:14px;font-size:12px;color:#c8d6b6;margin:6px 0 10px}
#stats .row b{color:#fff;font-size:14px}
#minimap-wrap{position:relative;border:2px solid rgba(255,183,3,.5);background:#22391f}
#minimap{display:block;width:100%}
#minimap-wrap .n{position:absolute;top:3px;left:6px;font-size:10px;color:#ffe1a0;font-weight:700}
#minimap-wrap.glow{border-color:#8be48a;box-shadow:0 0 16px rgba(120,230,120,.55)}
#cluster{position:absolute;right:18px;bottom:18px;padding:14px 16px 12px;display:flex;align-items:flex-end;gap:16px}
#gaugebox{text-align:center}#gauge{display:block}
#gneedle{transition:transform .09s linear;transform-origin:110px 112px}
#speed-digital{font-family:"Bungee";font-size:26px;color:#fff;margin-top:-34px}
#speed-digital small{font-family:"Chakra Petch";font-size:10px;color:#9db18c;letter-spacing:.2em}
#gear{display:inline-block;margin-top:4px;min-width:34px;padding:2px 8px;font-weight:700;font-size:16px;
  background:#0a140c;border:1px solid rgba(255,183,3,.5);color:#8be48a}
#gear.rev{color:#ff8a70}
#bedbox{text-align:center}
#bedbar{width:16px;height:74px;border:1px solid rgba(244,241,228,.4);margin:0 auto 5px;position:relative;background:#0a140c}
#bedfill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(#ffd166,var(--amber2));transition:height .1s}
#bedbox .panel-label{font-size:9px}#beddeg{font-size:12px;color:#ffe1a0;margin-top:2px}
#brakelamp{width:14px;height:14px;border-radius:50%;background:#3a1512;border:1px solid #000;margin:0 auto 6px;transition:.15s}
#brakelamp.on{background:var(--red);box-shadow:0 0 12px var(--red)}
#cluster .mini-label{font-size:9px;letter-spacing:.2em;color:#9db18c}
#keys{position:absolute;left:18px;bottom:18px;padding:12px 14px;font-size:12px;color:#c8d6b6;transition:.25s}
#keys.collapsed{transform:translateY(calc(100% - 34px))}
#keys .head{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;margin-bottom:8px}
#keys .head b{color:var(--amber);letter-spacing:.2em;font-size:11px}
#keys table{border-collapse:collapse}#keys td{padding:2px 8px 2px 0}
kbd{display:inline-block;min-width:22px;text-align:center;padding:1px 6px;background:#0a140c;color:#ffe1a0;
  border:1px solid rgba(255,183,3,.55);border-bottom-width:3px;font-family:"Chakra Petch";font-size:11px;font-weight:700}
#prompt{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);
  background:rgba(10,20,12,.92);border:1px solid var(--amber);padding:10px 26px;font-size:16px;font-weight:600;
  color:#ffe9b8;white-space:nowrap;opacity:0;transition:opacity .25s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#prompt.show{opacity:1;animation:ppulse 1.6s infinite}
@keyframes ppulse{0%,100%{box-shadow:0 0 0 rgba(255,183,3,0)}50%{box-shadow:0 0 22px rgba(255,183,3,.5)}}
#prompt kbd{font-size:14px;padding:2px 9px}
#toasts{position:absolute;top:70px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{padding:9px 22px;font-size:14px;font-weight:600;background:rgba(10,20,12,.95);border-left:5px solid var(--amber);
  animation:tin .3s cubic-bezier(.2,1.4,.4,1);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.toast.good{border-color:#8be48a;color:#d6f5c8}.toast.warn{border-color:var(--red);color:#ffd0c4}
.toast.out{animation:tout .35s forwards}
@keyframes tin{from{transform:translateY(-16px) scale(.9);opacity:0}}
@keyframes tout{to{transform:translateY(-12px);opacity:0}}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center,transparent 58%,r.........完整代码请登录后点击上方下载按钮下载查看