独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HMT 液力机械双流传动系统 - IFR 零点锁定原理</title>
<style>
:root {
--bg-color: #060b14;
--grid-color: #1a2333;
--text-main: #94a3b8;
--text-highlight: #e2e8f0;
--mech-color: #fbbf24;
--hydro-color: #0ea5e9;
--out-active: #34d399;
--out-locked: #ef4444;
--panel-bg: rgba(15, 23, 42, 0.7);
--panel-border: rgba(51, 65, 85, 0.5);
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 40px 40px;
background-position: center center;
font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
color: var(--text-main);
}
.anim-container {
position: relative;
width: 100vw;
height: 100vh;
max-width: 1400px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 100%;
height: 100%;
display: block;
}
/* 绝对定位的文本/控制面板，严格限制在边缘角落 */
.hud-panel {
position: absolute;
background: var(--panel-bg);
border: 1px solid var(--panel-border);
border-radius: 8px;
padding: 12px 16px;
backdrop-filter: blur(4px);
font-size: 12px;
line-height: 1.6;
pointer-events: none; /* 防止遮挡交互 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.top-left { top: 24px; left: 24px; max-width: 300px; }
.top-right { top: 24px; right: 24px; min-width: 220px; }
.bottom-left { bottom: 24px; left: 24px; min-width: 200px; }
.bottom-right { bottom: 24px; right: 24px; max-width: 280px; }
.title {
font-size: 14px;
font-weight: 700;
color: var(--text-highlight);
margin-bottom: 8px;
border-bottom: 1px solid var(--panel-border);
padding-bottom: 4px;
letter-spacing: 1px;
}
.data-row {
display: flex;
justify-content: space-between;
margin: 4px 0;
}
.data-label { color: #64748b; }
.data-value { font-weight: bold; font-size: 13px; }
.val-mech { color: var(--mech-color); }
.val-hydro { color: var(--hydro-color); }
.val-out { color: var(--out-active); transition: color 0.3s; }
.val-out.locked { color: var(--out-locked); text-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
.tag-ifr {
display: inline-block;
background: rgba(239, 68, 68, 0.15);
color: var(--out-locked);
border: 1px solid rgba(239, 68, 68, 0.3);
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
margin-top: 6px;
opacity: 0.2;
transition: opacity 0.3s;
}
.tag-ifr.active { opacity: 1; }
/* 滑块样式 (允许交互) */
.slider-container {
pointer-events: auto;
margin-top: 10px;
}
.slider-container input[type=range] {
width: 100%;
accent-color: var(--hydro-color);
cursor: pointer;
}
.auto-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
cursor: pointer;
pointer-events: auto;
}
.auto-toggle input { cursor: pointer; }
/* SVG 动画元素效果 */
.glow { filter: drop-shadow(0 0 4px currentColor); }
.flow-path { transition: stroke 0.3s; }
.gear-teeth { stroke-dasharray: 6 4; stroke-linecap: round; }
.ring-teeth { stroke-dasharray: 10 6; }
</style>
</head>
<body>
<div class="anim-container">
<svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 发光滤镜 -->
<filter id="glow-cyan" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<filter id="glow-amber" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<filter id="glow-red" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="5" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<!-- 箭头标记 -->
<marker id="arrow-amber" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#fbbf24" />
</marker>
</defs>
<!-- ================= 核心机械结构与管路 ================= -->
<!-- 1. 动力输入路径 (左侧 -> 太阳轮) -->
<g id="input-group" stroke="#fbbf24" fill="none">
<!-- 主输入轴 -->
<path d="M 50 250 L 710 250" stroke-width="6" class="glow" />
<!-- 分流齿轮箱到变量泵的传动轴 -->
<path d="M 250 250 L 250 410" stroke-width="4" stroke-dasharray="10 5" opacity="0.7"/>
<circle cx="250" cy="250" r="15" fill="#1e293b" stroke-width="3" />
<!-- 太阳轮轴承座标识 -->
<rect x="680" y="240" width="20" height="20" fill="#1e293b" stroke-width="2" />
</g>
<!-- 2. 液压闭环回路 (泵 -> 马达) -->
<!-- 基础管路底色 -->
<path d="M 250 410 L 750 410" stroke="#0f172a" stroke-width="12" fill="none" />
<path d="M 250 490 L 750 490" stroke="#0f172a" stroke-width="12" fill="none" />
<!-- 高压/低压流体管路 -->
<path id="pipe-top" d="M 250 410 L 750 410" stroke="#0ea5e9" stroke-width="8" fill="none" opacity="0.8" class="flow-path" />
<path id="pipe-bot" d="M 750 490 L 250 490" stroke="#0284c7" stroke-width="8" fill="none" opacity="0.4" class="flow-path" />
<!-- 流动粒子动画 (由JS控制dashoffset) -->
<path id="flow-top" d="M 250 410 L 750 410" stroke="#fff" stroke-width="2" stroke-dasharray="8 12" fill="none" filter="url(#glow-cyan)" />
<path id="flow-bot" d="M 750 490 L 250 490" stroke="#fff" stroke-width="2" stroke-dasharray="8 12" fill="none" filter="url(#glow-cyan)" />
<!-- 3. 液压元件 -->
<!-- 变量柱塞泵 (左下) -->
<g id="pump-group" transform="translate(250, 450)">
<rect x="-40" y="-45" width="80" height="90" rx="8" fill="#1e293b" stroke="#38bdf8" stroke-width="2" />
<circle cx="0" cy="0" r="25" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-dasharray="4 4" />
<!-- 斜盘控制端 (Swashplate) -->
<g id="swashplate-pivot">
<line x1="-35" y1="-35" x2="35" y2="35" stroke="#f8fafc" stroke-width="4" filter="url(#glow-cyan)" />
<circle cx="0" cy="0" r="4" fill="#f8fafc" />
</g>
<text x="0" y="60" text-anchor="middle" fill="#64748b" font-size="10" font-family="sans-serif">变量泵</text>
</g>
<!-- 定量马达 (右下) -->
<g id="motor-group" transform="translate(750, 450)">
<rect x="-35" y="-45" width="70" height="90" rx="8" fill="#1e293b" stroke="#38bdf8" stroke-width="2" />
<circle cx="0" cy="0" r="20" fill="none" stroke="#0ea5e9" stroke-width="4" />
<!-- 马达到齿圈的传动轴 -->
<path d="M 0 -45 L 0 -130" stroke="#0ea5e9" stroke-width="4" stroke-dasharray="8 4" />
<text x="0" y="60" text-anchor="middle" fill="#64748b" font-size="10" font-family="sans-serif">定量马达</text>
</g>
<!-- 4. 刚性行星齿轮排 (右侧核心) -->
<g id="planetary-system" transform="translate(750, 250)">
<!-- 齿圈 (Ring Gear) - 被液压马达驱动 -->
<g id="ring-gear">
<!-- 外壳 -->
<circle cx="0" cy="0" r="130" fill="none" stroke="#1e293b" stroke-width="10" />
<!-- 内齿 -->
<circle cx="0" cy="0" r="120" fill="none" stroke="#0ea5e9" stroke-width="8" class="ring-teeth" filter="url(#glow-cyan)" />
<!-- 耦合标识: 液压动力输入点 -->
<circle cx="0" cy="125" r="6" fill="#0ea5e9" />
</g>
<!-- 太阳轮 (Sun Gear) - 机械直接驱动 -->
<g id="sun-gear">
<circle cx="0" cy="0" r="40" fill="none" stroke="#fbbf24" stroke-width="12" class="gear-teeth" filter="url(#glow-amber)" />
<circle cx="0" cy="0" r="15" fill="#1e293b" stroke="#fbbf24" stroke-width="2" />
</g>
<!-- 行星架与行星轮 (Carrier & Planets) - 动力输出 -->
<g id="carrier-group">
<!-- 行星架结构底盘 -->
<path d="M 0 -80 L 69.28 40 L -69.28 40 Z" fill="rgba(52, 211, 153, 0.1)" stroke="#34d399" stroke-width="2" />
<circle cx="0" cy="0" r="80" fill="none" stroke="#34d399" stroke-width="1" stroke-dasharray="4 4" opacity="0.5"/>
<!-- 3个行星轮 -->
<g class="planet" transform="translate(0, -80)">
<circle cx="0" cy="0" r="40" fill="#0f172a" stroke="#34d399" stroke-width="8" class="gear-teeth" />
<circle cx="0" cy="0" r="8" fill="#34d399" />
</g>
<g class="planet" transform="translate(69.28, 40)">
<circle cx="0" cy="0" r="40" fill="#0f172a" stroke="#34d399" stroke-width="8" class="gear-teeth" />
<circle cx="0" cy="0" r="8" fill="#34d399" />
</g>
<g class="planet" transform="translate(-69.28, 40)">
<circle cx="0" cy="0" r="40" fill="#0f172a" stroke="#34d399" stroke-width="8" class="gear-teeth" />
<circle cx="0" cy="0" r="8" fill="#34d399" />
</g>
</g>
</g>
<!-- 5. 最终动力输出轴 -->
<g id="output-system">
<!-- 连接行星架与输出端 -->
<path id="output-shaft" d="M 750 250 L 950 250" stroke="#34d399" stroke-width="8" fill="none" class="glow" />
<path d="M 920 230 L 950 250 L 920 270" fill="none" stroke="#34d399" stroke-width="4" id="output-arrow" />
<!-- 零点锁定高亮环 (初始透明) -->
<circle id="zero-lock-ring" cx="750" cy="250" r="145" fill="none" stroke="#ef4444" stroke-width="4" stroke-dasharray="15 15" opacity="0" filter="url(#glow-red)" />
</g>
</svg>
<!-- ================= 界面 HUD 元素 ================= -->
<!-- 左上：原理简述 -->
<div class="hud-panel top-left">
<div class="title">HMT 零点锁定原理 (IFR)</div>
<p style="margin:4px 0 8px 0; color:#cbd5e1;">通过闭环液压系统无级调节马达转速。当液压驱动的齿圈线速度与太阳轮机械输入的线速度完全抵消时，实现无摩擦的行星架零点锁定。</p>
<div class="data-label" style="font-size:11px;">核心矛盾破除：无需离合器即可频繁跨越零点，消除磨损与高发热。</div>
</div>
<!-- 右上：遥测数据 -->
<div class="hud-panel top-right">
<div class="title">实时系统状态</div>
<div class="data-row">
<span class="data-label">输入轴转速 (太阳轮):</span>
<span class="data-value val-mech" id="val-sun">1500 RPM</span>
</div>
<div class="data-row">
<span class="data-label">液压马达转速 (齿圈):</span>
<span class="data-value val-hydro" id="val-ring">0 RPM</span>
</div>
<div class="data-row" style="margin-top:8px; border-top:1px dashed var(--panel-border); padding-top:8px;">
<span class="data-label">最终输出转速 (行星架):</span>
<span class="data-value val-out" id="val-carrier">500 RPM</span>
</div>
<div style="text-align: right;">
<span class="tag-ifr" id="tag-ifr-lock">★ IFR: 零点极速锁定达成</span>
</div>
</div>
<!-- 左下：控制端 -->
<div class="hud-panel bottom-left">
<div class="title">液压变量泵控制</div>
<div class="data-row">
<span class="data-label">斜盘倾角:</span>
<span class="data-value val-hydro" id="val-swash">0%</span>
</div>
<div class="slider-container">
<label class="auto-toggle">
<input type="checkbox" id="auto-mode" checked>
<span class="data-label">自动演示模式</span>
</label>
<input type="range" id="swash-slider" min="-100" max="100" value="0" disabled>
</div>
</div>
<!-- 右下：图例 -->
<div class="hud-panel bottom-right">
<div class="title">图例</div>
<div class="data-row"><span style="color:var(--mech-color)">■</span> <span class="data-label">恒定机械动力路径 (输入)</span></div>
<div class="data-row"><span style="color:var(--hydro-color)">■</span> <span class="data-label">无级液压动力路径 (控制端)</span></div>
<div class="data-row"><span style="color:var(--out-active)">■</span> <span class="data-label">差动矢量叠加输出 (行星架)</span></div>
</div>
</div>
<script>
/**
* HMT 行星齿轮运动学模拟
* 威利斯方程: n_sun + α * n_ring = (1 + α) * n_carrier
* 设定: α (齿圈/太阳轮齿数比) = 2 (为了视觉直观)
* 即: n_sun + 2 * n_ring = 3 * n_carrier
*/
// 状态变量
let time = 0;
let isAutoMode = true;
let targetSwashPct = 0; // -1.0 到 1.0
let currentSwashPct = 0;
// 角度累加器
let angleSun = 0;
let angleRing = 0;
let angleCarrier = 0;
// 液流位移
let flowOffsetTop = 0;
let flowOffsetBot = 0;
// 常量设定
const BASE_SUN_SPEED = 1.5; // 每帧基础旋转角度(代表 1500 RPM)
const ALPHA = 2; // 齿圈与太阳轮齿数比
// DOM 元素引用
const elSunGear = document.getElementById('sun-gear');
const elRingGear = document.getElementById('ring-gear');
const elCarrier = document.getElementById('carrier-group');
const elPlanets = document.querySelectorAll('.planet');
const elSwashplate = document.getElementById('swashplate-pivot');
const elFlowTop = document.getElementById('flow-top');
const elFlowBot = document.getElementById('flow-bot');
const elPipeTop = document.getElementById('pipe-top');
const elPipeBot = document.getElementById('pipe-bot');
const elOutShaft = document.getElementById('output-shaft');
const elOutArrow = document.getElementById('output-arrow');
const elZeroLock = document.getElementById('zero-lock-ring');
const elTagLock = document.getElementById('tag-ifr-lock');
const txtSun = document.getElementById('val-sun');
const txtRing = document.getElementById('val-ring');
const txtCarrier = document.getElementById('val-carrier');
const txtSwash = document.getElementById('val-swash');
// 交互绑定
const uiAutoToggle = document.getElementById('auto-mode');
const uiSlider = document.getElementById('swash-slider');
uiAutoToggle.addEventListener('change', (e) => {
isAutoMode = e.target.checked;
uiSlider.disabled = isAutoMode;
if(isAutoMode) {
// 同步当前时间以平滑接管
time = Math.asin(currentSwashPct);
}
});
uiSlider.addEventListener('input', (e) => {
if(!isAutoMode) {
targetSwashPct = parseInt(e.target.value) / 100;
}
});
// 动画主循环
function animate() {
if (isAutoMode) {
time += 0.006;
// 自动模式下，斜盘进行正弦扫描，特意在 0 点和极值点附近平滑
targetSwashPct = Math.sin(time);
uiSlider.value = targetSwashPct * 100;
}
// 平滑过渡当前斜盘角度 (惯性阻尼效果)
currentSwashPct += (targetSwashPct - currentSwashPct) * 0.1;
// 计算各轴速度 (度/帧)
const n_sun = BASE_SUN_SPEED;
// 使得斜盘 -50% 时，恰好抵消输入速度
// 当 n_ring = -0.5 * n_sun 时，n_carrier = (n_sun - 1.0 * n_sun)/3 = 0
// 将 currentSwashPct (-1 to 1) 映射到 n_ring (-1.0 * n_sun to +1.0 * n_sun)
const n_ring = currentSwashPct * n_sun;
// 威利斯方程求行星架速度
const n_carrier = (n_sun + ALPHA * n_ring) / (1 + ALPHA);
// 计算行星轮自身的相对自转速度 (用于精确啮合视觉效果)
// 相对行星架，太阳轮转速为 n_sun - n_carrier
// 行星轮与太阳轮传动比假设为 1:1 (齿数比决定，为简化视觉这里计算相对转角)
const n_planet_local = -(n_sun - n_carrier);
// 累加角度
angleSun += n_sun;
angleRing += n_ring;
angleCarrier += n_carrier;
// 应用 Transform 旋转
elSunGear.setAttribute('transform', `rotate(${angleSun})`);
elRingGear.setAttribute('transform', `rotate(${angleRing})`);
elCarrier.setAttribute('transform', `rotate(${angleCarrier})`);
// 行星轮分别自转
elPlanets.forEach(p => {
p.querySelector('circle.gear-teeth').setAttribute('transform', `rotate(${angleCarrier * -1 + angleSun * 1.5})`);
// 视觉调优：让行星齿牙滚动看起来啮合，使用一个伪相对旋转
});
// 液压管路流体动画
// 流量与斜盘百分比成正比
const flowSpeed = currentSwashPct * 5;
flowOffsetTop -= flowSpeed;
flowOffsetBot += flowSpeed; // 闭环回路，流向相反
elFlowTop.setAttribute('stroke-dashoffset', flowOffsetTop);
elFlowBot.setAttribute('stroke-dashoffset', flowOffsetBot);
// 高低压颜色状态切换
if (currentSwashPct > 0.05) {
elPipeTop.setAttribute('stroke', '#0ea5e9'); // Top high pressure
elPipeTop.setAttribute('opacity', '0.8');
elPipeBot.setAttribute('stroke', '#0284c7'); // Bot low pressure
elPipeBot.setAttribute('opacity', '0.4');
} else if (currentSwashPct < -0.05) {
elPipeTop.setAttribute('stroke', '#0284c7');
elPipeTop.setAttribute('opacity', '0.4');
elPipeBot.setAttribute('stroke', '#0ea5e9');
elPipeBot.setAttribute('opacity', '0.8');
} else {
elPipeTop.setAttribute('stroke', '#0284c7');
elPipeTop.setAttribute('opacity', '0.4');
elPipeBot.setAttribute('stroke', '#0284c7');
elPipeBot.setAttribute('opacity', '0.4');
}
// 斜盘视觉倾斜 (最大30度)
elSwashplate.setAttribute('transform', `rotate(${currentSwashPct * -30})`);
// 更新 UI 数据显示 (映射到工程 RPM)
const displaySunRPM = 1500;
const displayRingRPM = currentSwashPct * 1500;
const displayCarrierRPM = (displaySunRPM + ALPHA * displayRingRPM) / 3;
txtSun.textContent = displaySunRPM.toFixed(0) + ' RPM';
txtRing.textContent = displayRingRPM.toFixed(0) + ' RPM';
txtCarrier.textContent = displayCarrierRPM.toFixed(0) + ' RPM';
txtSwash.textContent = (currentSwashPct * 100).toFixed(1) + '%';
// ================= IFR 零点锁定状态检测与视觉强化 =================
const isLocked = Math.abs(displayCarrierRPM) < 20; // 接近 0 认为锁定
if (isLocked) {
elOutShaft.setAttribute('stroke', '#ef4444');
elOutArrow.setAttribute('stroke', '#ef4444');
elZeroLock.setAttribute('opacity', '1');
txtCarrier.classList.add('locked');
txtCarrier.textContent = '0 RPM (锁定)';
elTagLock.classList.add('active');
// 行星架底盘变红
elCarrier.querySelector('path').setAttribute('stroke', '#ef4444');
elCarrier.querySelector('path').setAttribute('fill', 'rgba(239, 68, 68, 0.1)');
} else {
elOutShaft.setAttribute('stroke', '#34d399');
elOutArrow.setAttribute('stroke', '#34d399');
elZeroLock.setAttribute('opacity', '0');
txtCarrier.classList.remove('locked');
elTagLock.classList.remove('active');
// 恢复行星架默认绿
elCarrier.querySelector('path').setAttribute('stroke', '#34d399');
elCarrier.querySelector('path').setAttribute('fill', 'rgba(52, 211, 153, 0.1)');
}
// 继续下一帧，实现重开即播、自动连续播放
requestAnimationFrame(animate);
}
// 页面加载完毕后自动启动动画
window.addEventListener('DOMContentLoaded', () => {
requestAnimationFrame(animate);
});
</script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...