three实现三维农村手动脱谷机操作体验代码-html代码-BFW代码库

three实现三维农村手动脱谷机操作体验代码

代码语言：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>
<style>
    html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#87CEEB;
        font-family:"Microsoft YaHei","PingFang SC",sans-serif;}
    canvas{display:block;touch-action:none;}
    #hud{position:fixed;left:14px;top:14px;z-index:10;color:#fff;background:rgba(0,0,0,.45);
        border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:13px 15px;max-width:300px;
        backdrop-filter:blur(6px);user-select:none;pointer-events:none;}
    #hud h1{margin:0 0 8px;font-size:19px;font-weight:700;}
    #hud .row{font-size:13px;line-height:1.65;opacity:.95;}
    #hud .barWrap{width:100%;height:12px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.18);margin:8px 0;}
    #speedBar{width:0%;height:100%;background:linear-gradient(90deg,#ffd75e,#ff9d2e);}
    #bottom{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:14px;z-index:10;pointer-events:none;}
    #bottom button{pointer-events:auto;touch-action:none;user-select:none;border:none;outline:none;border-radius:999px;
        padding:13px 22px;font-size:16px;font-weight:700;color:#3b2612;background:rgba(255,255,255,.92);
        box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;}
    #bottom button:active{transform:scale(.96);background:#ffe8b3;}
    @media (max-width:640px){
        #hud{transform:scale(.88);transform-origin:left top;max-width:240px;}
        #bottom button{padding:12px 16px;font-size:14px;}
    }
</style>
</head>
<body>
<div id="hud">
    <h1>🌾 手动踩脚脱谷机</h1>
    <div class="row">按住 <b>空格键</b> / 按钮 / 点击踏板：踩动</div>
    <div class="row">转速足够后，农夫会<b>一边踩一边喂料</b>脱粒</div>
    <div class="row">鼠标拖动旋转视角，滚轮缩放</div>
    <div class="row">转速：<span id="rpm">0</span> rpm</div>
    <div class="barWrap"><div id="speedBar"></div></div>
    <div class="row">已脱谷粒：<span id="grainCount">0</span></div>
</div>
<div id="bottom">
    <button id="pedalBtn">🦶🌾 按住踩动脱谷</button>
</div>

<script type="importmap">
{
    "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
    }
}
</script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

/* ---------------- 全局 ---------------- */
let scene, camera, renderer, controls, clock;
let machine, drum, crank, flywheel, treadle, rod, treadleBoard, hood;
let pile;
let bundle;

/* 农夫部件 */
let torso, hipBox, headGroup;
let upperArmL, foreArmL, upperArmR, foreArmR, ha.........完整代码请登录后点击上方下载按钮下载查看