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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --paper:#f6f1e0; --paper2:#efe7cf; --ink:#2e2a20; --ink2:#5a5342;
  --seal:#b23b2e; --green:#4c7a3d; --green2:#7fb069; --water:#7fb6a4;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0e1a12}
body{font-family:'Noto Sans SC',sans-serif;color:var(--ink)}
#app{position:fixed;inset:0}
#app canvas{display:block}

/* ---------- 覆盖层通用 ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s;}
.overlay.hide{opacity:0;visibility:hidden;pointer-events:none}
#startOverlay{background:
  radial-gradient(120% 90% at 50% 40%, rgba(20,34,22,0) 30%, rgba(16,28,18,.55) 78%, rgba(10,20,13,.82) 100%),
  linear-gradient(to top, rgba(214,226,196,.18), transparent 30%);}
#pauseOverlay,#doneOverlay{background:rgba(14,24,16,.62)}

/* ---------- 开始页 ---------- */
.start-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;max-width:1120px;width:92%;align-items:center}
@media(max-width:900px){.start-wrap{grid-template-columns:1fr;gap:28px}}
.brand{position:relative;color:var(--paper)}
.seal-badge{position:absolute;top:-34px;left:-10px;width:64px;height:64px;background:var(--seal);color:#f6f1e0;
  font-family:'Ma Shan Zheng';font-size:40px;display:flex;align-items:center;justify-content:center;
  transform:rotate(-7deg);border-radius:8px;box-shadow:3px 4px 0 rgba(0,0,0,.35);animation:sealIn .8s .3s both}
@keyframes sealIn{from{transform:rotate(-30deg) scale(2);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
.brand h1{font-family:'Ma Shan Zheng';font-weight:400;font-size:clamp(96px,15vw,182px);line-height:1;
  letter-spacing:.06em;text-shadow:0 4px 0 rgba(0,0,0,.28);animation:riseIn .9s .15s both}
.brand .sub{font-family:'Noto Serif SC';font-size:15px;letter-spacing:.5em;color:#e9e2c8;margin-top:10px;opacity:.92;animation:riseIn .9s .35s both}
.poem{display:flex;flex-direction:row-reverse;gap:26px;height:300px;margin-top:34px;animation:riseIn 1s .5s both}
.poem span{writing-mode:vertical-rl;font-family:'Noto Serif SC';font-weight:600;font-size:26px;letter-spacing:.42em;
  color:#f0ead2;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.poem span:last-child{font-size:19px;color:#cfe0c2;margin-top:34px}
@keyframes riseIn{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.mist{position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
  background:linear-gradient(to top, rgba(230,236,210,.35), transparent);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 120px,transparent 120px 260px);
  animation:mistMove 26s linear infinite}
@keyframes mistMove{to{-webkit-mask-position:520px 0}}

.paper-card{background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:26px 28px;position:relative;
  box-shadow:6px 7px 0 rgba(0,0,0,.32);animation:riseIn .9s .45s both}
.paper-card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(46,42,32,.4);border-radius:3px;pointer-events:none}
.paper-card h2{font-family:'Ma Shan Zheng';font-weight:400;font-size:30px;color:var(--ink);display:flex;align-items:center;gap:10px}
.paper-card h2 i{width:12px;height:12px;background:var(--seal);border-radius:2px;transform:rotate(45deg);flex:none}
.guide{list-style:none;margin:16px 0 20px;display:grid;gap:9px;font-family:'Noto Serif SC';font-size:15px;color:var(--ink2)}
.guide li{display:flex;align-items:center;gap:10px}
kbd{font-family:'Noto Sans SC';font-size:12px;font-weight:700;background:var(--paper2);border:1.5px solid var(--ink);
  border-bottom-width:3px;border-radius:4px;padding:2px 8px;color:var(--ink);min-width:30px;text-align:center}
.btn{display:inline-block;font-family:'Ma Shan Zheng';font-size:24px;letter-spacing:.14em;color:var(--paper);
  background:var(--seal);border:2px solid var(--ink);border-radius:6px;padding:12px 34px;cursor:pointer;
  box-shadow:4px 5px 0 var(--ink);transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translate(-2px,-3px);box-shadow:7px 9px 0 var(--ink)}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--.........完整代码请登录后点击上方下载按钮下载查看