独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>智能柔性自适应变弯度桨叶与主动涡流中和 - 原理可视化</title>
<style>
:root {
--bg-space: #050811;
--bg-panel: rgba(10, 17, 34, 0.72);
--border-line: rgba(56, 189, 248, 0.22);
--cyan-neon: #00f0ff;
--emerald-glow: #10b981;
--amber-accent: #f59e0b;
--purple-vortex: #a855f7;
--text-main: #e2e8f0;
--text-dim: #64748b;
--mono-font: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body {
background: radial-gradient(circle at 50% 40%, #0d1933 0%, var(--bg-space) 85%);
color: var(--text-main);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
/* 科技背景网格 */
.grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
z-index: 0;
}
/* 顶部精简微标头 - 严格限制面积与字号 */
header {
position: absolute;
top: 14px;
left: 18px;
z-index: 10;
display: flex;
align-items: center;
gap: 12px;
pointer-events: none;
}
.badge {
font-family: var(--mono-font);
font-size: 11px;
background: rgba(0, 240, 255, 0.12);
border: 1px solid rgba(0, 240, 255, 0.35);
color: var(--cyan-neon);
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.title-group h1 {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.8px;
color: #f8fafc;
display: flex;
align-items: center;
gap: 8px;
}
.title-group p {
font-size: 11px;
color: var(--text-dim);
font-family: var(--mono-font);
}
/* 右上角遥测微型数据卡片 */
.telemetry-card {
position: absolute;
top: 14px;
right: 18px;
z-index: 10;
background: var(--bg-panel);
border: 1px solid var(--border-line);
backdrop-filter: blur(8px);
border-radius: 6px;
padding: 8px 14px;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 16px;
font-family: var(--mono-font);
}
.metric-item {
display: flex;
flex-direction: column;
}
.metric-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
}
.metric-value {
font-size: 13px;
font-weight: 700;
color: var(--cyan-neon);
}
/* 中央核心无遮挡大舞台 */
main {
flex: 1;
width: 100vw;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
svg#stage {
width: 100%;
height: 100%;
max-width: 1380px;
max-height: 860px;
filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.6));
}
/* 底部悬浮控制台 - 极简边缘化条 */
.control-deck {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
background: var(--bg-panel);
border: 1px solid var(--border-line);
backdrop-filter: blur(10px);
padding: 6px 14px;
border-radius: 30px;
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
}
.btn-mode {
background: transparent;
border: 1px solid transparent;
color: var(--text-dim);
font-size: 11px;
font-family: var(--mono-font);
padding: 4px 10px;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-mode:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.2);
}
.btn-mode.active {
color: var(--cyan-neon);
background: rgba(0, 240, 255, 0.12);
border-color: rgba(0, 240, 255, 0.4);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}
.divider {
width: 1px;
height: 14px;
background: var(--border-line);
}
.slider-wrap {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--text-dim);
font-family: var(--mono-font);
}
input[type="range"] {
-webkit-appearance: none;
background: #1e293b;
height: 4px;
border-radius: 2px;
outline: none;
width: 90px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--cyan-neon);
cursor: pointer;
box-shadow: 0 0 6px var(--cyan-neon);
}
/* 左下角图例微标签 */
.legend-box {
position: absolute;
bottom: 16px;
left: 18px;
z-index: 10;
pointer-events: none;
font-size: 11px;
font-family: var(--mono-font);
color: var(--text-dim);
display: flex;
flex-direction: column;
gap: 4px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.legend-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}
/* 动效与微调 */
.pulse-ring {
animation: pulse 2s infinite ease-out;
transform-origin: center;
}
@keyframes pulse {
0% { r: 6; opacity: 1; stroke-width: 1.5; }
100% { r: 24; opacity: 0; stroke-width: 0.5; }
}
</style>
</head>
<body>
<div class="grid-overlay"></div>
<!-- 顶部轻量标题 (极小字号、边缘贴附,绝不遮挡主体) -->
<header>
<span class="badge">TRIZ · IFR 理想解</span>
<div class="title-group">
<h1>自适应柔性翼型与微型对冲涡消减系统</h1>
<p>Continuous Camber Reconfiguration & Counter-Vortex System</p>
</div>
</header>
<!-- 右上角性能遥测面板 -->
<div class="telemetry-card">
<div class="metric-item">
<span class="metric-label">后缘偏角 δ</span>
<span class="metric-value" id="valDeflect">+8.0°</span>
</div>
<div class="metric-item">
<span class="metric-label">巡航净升阻比</span>
<span class="metric-value" style="color:var(--emerald-glow)" id="valClCd">+11.4%</span>
</div>
<div class="metric-item">
<span class="metric-label">诱导功率损失</span>
<span class="metric-value" style="color:var(--cyan-neon)" id="valPower">-9.8%</span>
</div>
</div>
<!-- 核心主舞台 (完全居中自适应的大幅动态 SVG) -->
<main>
<svg id="stage" viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 线性与径向渐变 -->
<linearGradient id="bladeGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1e293b" stop-opacity="0.9" />
<stop offset="35%" stop-color="#334155" stop-opacity="0.95" />
<stop offset="85%" stop-color="#0f172a" stop-opacity="0.95" />
<stop offset="100%" stop-color="#00f0ff" stop-opacity="0.3" />
</linearGradient>
<linearGradient id="streamGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#00f0ff" stop-opacity="0.05" />
<stop offset="40%" stop-color="#00f0ff" stop-opacity="0.6" />
<stop offset="100%" stop-color="#10b981" stop-opacity="0.1" />
</linearGradient>
<linearGradient id="vortexNeutralGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#00f0ff" stop-opacity="0.8" />
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.1" />
</linearGradient>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glowStrong" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="7" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- 动效流线粒子模板 -->
<circle id="particle" r="2.2" fill="#00f0ff" filter="url(#glow)" />
</defs>
<!-- 坐标标尺与参考基线 (工程设计图风格) -->
<g stroke="#1e293b" stroke-width="0.8" stroke-dasharray="3,6">
<line x1="120" y1="230" x2="1080" y2="230" />
<line x1="120" y1="480" x2="1080" y2="480" />
<line x1="300" y1="80" x2="300" y2="620" />
<line x1="720" y1="80" x2="720" y2="620" />
</g>
<!-- ==================== 区域 1:宏观展向全桨叶透视 (TOP VIEW) ==================== -->
<g id="fullBladeGroup" transform="translate(140, 90)">
<!-- 标题标注 (极轻量) -->
<text x="0" y="22" fill="#94a3b8" font-size="11" font-family="var(--mono-font)" letter-spacing="1">
AREA A: 展向 3 段式微电机驱动柔性变形与反旋桨尖
</text>
<!-- 桨根旋转轮毂与滑环 -->
<g id="bladeRoot" transform="translate(40, 100)">
<rect x="-35" y="-30" width="35" height="60" rx="4" fill="#1e293b" stroke="#475569" stroke-width="1.2" />
<circle cx="-15" cy="0" r="14" fill="#0f172a" stroke="#00f0ff" stroke-width="1.2" stroke-dasharray="2,2" />
<!-- 旋转指示动效 -->
<circle cx="-15" cy="0" r="8" fill="none" stroke="#00f0ff" stroke-width="1.5">
<animateTransform attributeName="transform" type="rotate" from="0 -15 0" to="360 -15 0" dur="2s" repeatCount="indefinite" />
</circle>
<text x="-48" y="48" fill="#64748b" font-size="10" font-family="var(--mono-font)">空心滑环/根部</text>
</g>
<!-- 桨叶主体外形 (采用动态路径绑定) -->
<path id="bladeMainBody" d="M 40,85 C 220,70 600,68 760,78 L 760,122 C 600,132 220,130 40,115 Z"
fill="url(#bladeGrad)" stroke="#38bdf8" stroke-width="1.2" />
<!-- 柔性后缘 3 段可变形活动翼面 (展向分段) -->
<g id="flapsGroup">
<!-- 根段后缘段 (Stage 1) -->
<path id="flapSeg1" d="M 160,126 L 340,128 L 340,144 L 160,140 Z" fill="#00f0ff" fill-opacity="0.15" stroke="#00f0ff" stroke-width="1" />
<!-- 中段后缘段 (Stage 2) -->
<path id="flapSeg2" d="M 350,128 L 540,129 L 540,148 L 350,145 Z" fill="#00f0ff" fill-opacity="0.18" stroke="#00f0ff" stroke-width="1" />
<!-- 梢段后缘段 (Stage 3) -->
<path id="flapSeg3" d="M 550,129 L 750,124 L 750,146 L 550,148 Z" fill="#00f0ff" fill-opacity="0.22" stroke="#00f0ff" stroke-width="1" />
</g>
<!-- 内部微型无刷电机与微伺服连杆 (Ø12mm 超轻构型) -->
<g id="actuators">
<!-- Actuator 1 -->
<g transform="translate(250, 110)">
<rect x="-14" y="-8" width="28" height="16" rx="3" fill="#0f172a" stroke="#f59e0b" stroke-width="1.2" />
<circle cx="0" cy="0" r="3" fill="#f59e0b" filter="url(#glow)" />
<line id="link1" x1="0" y1="0" x2="0" y2="24" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
<text x="-24" y="-12" fill="#f59e0b" font-size="9" font-family="var(--mono-font)">M1 8g/12mm</text>
</g>
<!-- Actuator 2 -->
<g transform="translate(450, 110)">
<rect x="-14" y="-8" width="28" height="16" rx="3" fill="#0f172a" stroke="#f59e0b" stroke-width="1.2" />
<circle cx="0" cy="0" r="3" fill="#f59e0b" filter="url(#glow)" />
<line id="link2" x1="0" y1="0" x2="0" y2="26" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
<text x="-24" y="-12" fill="#f59e0b" font-size="9" font-family="var(--mono-font)">M2 扭转伺服</text>
</g>
<!-- Actuator 3 -->
<g transform="translate(650, 110)">
<rect x="-14" y="-8" width="28" height="16" rx="3" fill="#0f172a" stroke="#f59e0b" stroke-width="1.2" />
<circle cx="0" cy="0" r="3" fill="#f59e0b" filter="url(#glow)" />
<line id="link3" x1="0" y1="0" x2="0" y2="26" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
<text x="-24" y="-12" fill="#f59e0b" font-size="9" font-family="var(--mono-font)">M3 快速响应</text>
</g>
</g>
<!-- 桨尖 4 寸微型主动涡流中和推进器 -->
<g id="tipThruster" transform="translate(765, 96)">
<!-- 推进器短舱底座 -->
<rect x="0" y="-12" width="24" height="24" rx="4" fill="#0284c7" stroke="#38bdf8" stroke-width="1.2" />
<path d="M 24,-16 L 36,-10 L 36,10 L 24,16 Z" fill="rgba(56, 189, 248, 0.25)" stroke="#38bdf8" stroke-width="1" />
<!-- 微型叶轮高速旋转 -->
<line x1="30" y1="-14" x2="30" y2="14" stroke="#00f0ff" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" from="0 30 0" to="360 30 0" dur="0.25s" repeatCount="indefinite" />
</line>
<!-- 反向旋流射流 (Counter-Swirl Jet) 喷射动画 -->
<path d="M 38,0 Q 60,-18 90,-8 T 140,-15" fill="none" stroke="#00f0ff" stroke-width="2" stroke-dasharray="4,3" opacity="0.8">
<animate attributeName="stroke-dashoffset" from="30" to="0" dur="0.8s" repeatCount="indefinite" />
</path>
<path d="M 38,0 Q 60,18 90,8 T 140,15" fill="none" stroke="#00f0ff" stroke-width="2" stroke-dasharray="4,3" opacity="0.8">
<animate attributeName="stroke-dashoffset" from="30" to="0" dur="0.8s" repeatCount="indefinite" />
</path>
<!-- 桨尖涡消减中和扩散云 (消除传统大能耗诱导涡) -->
<g transform="translate(130, 0)">
<ellipse cx="0" cy="0" rx="35" ry="26" fill="url(#vortexNeutralGrad)" opacity="0.35" />
<circle cx="0" cy="0" r="16" fill="none" stroke="#a855f7" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.8">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1.2s" repeatCount="indefinite" />
</circle>
<circle cx="0" cy="0" r="28" fill="none" stroke="#00f0ff" stroke-width="1.2" stroke-dasharray="4,4" opacity="0.6">
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="0.9s" repeatCount="indefinite" />
</circle>
<text x="-40" y="44" fill="#a855f7" font-size="9" font-family="var(--mono-font)">反向旋流主动中和桨尖涡</text>
<text x="-40" y="56" fill="#10b981" font-size="9" font-family="var(--mono-font)">诱导下洗阻力大幅衰减</text>
</g>
</g>
</g>
<!-- ==================== 区域 2:柔性翼型剖面弯度变形与流场测试 (SECTION VIEW) ==================== -->
<g id="airfoilSectionGroup" transform="translate(140, 360)">
<text x="0" y="0" fill="#94a3b8" font-size="11" font-family="var(--mono-font)" letter-spacing="1">
AREA B: 弦向剖面连续无缝变弯度(Camber-Morphing)与附面层流线
</text>
<!-- 背景角度量角器弧线 -->
<g transform="translate(480, 110)" stroke="#1e293b" stroke-width="1">
<path d="M 80,-40 A 100 100 0 0 1 80,70" fill="none" stroke-dasharray="2,3" />
<line x1="0" y1="0" x2="90" y2="-20" stroke="#334155" stroke-dasharray="2,2" />
<line x1="0" y1="0" x2="90" y2="45" stroke="#334155" stroke-dasharray="2,2" />
<text x="96" y="-22" fill="#64748b" font-size="9" font-family="var(--mono-font)">-4° 巡航低阻</text>
<text x="96" y="52" fill="#00f0ff" font-size="9" font-family="var(--mono-font)">+14° 悬停大升力</text>
</g>
<!-- 连续气流流线 (通过 JS 驱动流线粒子点位) -->
<g id="streamlines" opacity="0.85">
<!-- 上翼面流线 -->
<path id="streamTop1" d="M -40,40 C 120,-30 350,-25 680,120" fill="none" stroke="url(#streamGrad)" stroke-width="1.4" />
<path id="streamTop2" d="M -40,15 C 130,-55 350,-45 680,95" fill="none" stroke="url(#streamGrad)" stroke-width="1.2" />
<path id="streamTop3" d="M -40,-10 C 140,-80 360,-65 680,75" fill="none" stroke="url(#streamGrad)" stroke-width="0.9" />
<!-- 下翼面流线 -->
<path id="streamBot1" d="M -40,85 C 130,135 340,140 680,180" fill="none" stroke="url(#streamGrad)" stroke-width="1.4" />
<path id="streamBot2" d="M -40,110 C 130,165 350,165 680,205" fill="none" stroke="url(#streamGrad)" stroke-width="1.2" />
</g>
<!-- 柔性翼型本体 (前缘刚性 + 中后缘弹性平滑蒙皮) -->
<!-- 翼型基准位置:前缘 (80, 90),旋转柔性关节 (320, 90),后缘 (540, 110) -->
<path id="airfoilPath" d="M 80,90 C 80,35 220,40 340,58 C 430,70 510,95 550,125 C 490,125 410,115 320,115 C 190,115 80,110 80,90 Z"
fill="rgba(15, 23, 42, 0.95)" stroke="#00f0ff" stroke-width="2" filter="url(#glow)" />
<!-- 翼型内部微型骨架与联动推杆 -->
<g id="internalMechanics">
<!-- 前缘主受力碳纤维梁 -->
<polygon points="120,70 200,66 195,112 120,105" fill="#1e293b" stroke="#475569" stroke-width="1" />
<circle cx="150" cy="88" r="9" fill="#0b1329" stroke="#38bdf8" stroke-width="1.2" />
<text x="135" y="128" fill="#64748b" font-size="9" font-family="var(--mono-font)">主承载翼梁</text>
<!-- 内部嵌入驱动电机与偏心推杆机构 -->
<g transform="translate(300, 85)">
<rect x="-16" y="-12" width="32" height="24" rx="4" fill="#0f172a" stroke="#f59e0b" stroke-width="1.5" />
<circle cx="0" cy="0" r="5" fill="#f59e0b" />
<!-- 推拉连杆 -->
<line id="pushRod" x1="0" y1="0" x2="110" y2="25" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" />
<circle id="hingeJoint" cx="110" cy="25" r="4" fill="#00f0ff" stroke="#fff" stroke-width="1" />
</g>
<!-- 柔性无铰缝弹性后缘蒙皮骨架 -->
<path id="flexibleRib" d="M 330,85 Q 420,95 540,122" fill="none" stroke="#38bdf8" stroke-width="1.5" stroke-dasharray="4,2" />
</g>
<!-- 翼型攻角及弯度实时量化引线 -->
<g id="angleDimension" transform="translate(565, 125)">
<line x1="0" y1="0" x2="35" y2="0" stroke="#00f0ff" stroke-width="1" stroke-dasharray="2,2" />
<path id="arcDeflect" d="M 28,-14 A 30 30 0 0 1 28,14" fill="none" stroke="#00f0ff" stroke-width="1.2" />
<text id="txtDeflect" x="42" y="4" fill="#00f0ff" font-size="11" font-family="var(--mono-font)">δ = +8.0°</text>
</g>
</g>
<!-- 动态游动流线粒子容器 -->
<g id="particlesContainer"></g>
<!-- 视觉引导光标与状态指示 -->
<g transform="translate(940, 520)" filter="url(#glow)">
<rect x="0" y="0" width="190" height="96" rx="6" fill="rgba(10, 17, 34, 0.85)" stroke="var(--border-line)" stroke-width="1" />
<circle cx="20" cy="24" r="5" fill="#10b981" />
<circle class="pulse-ring" cx="20" cy="24" r="5" fill="none" stroke="#10b981" />
<text x="34" y="28" fill="#f8fafc" font-size="11" font-weight="600">自适应闭环驱动中</text>
<text x="18" y="52" fill="#94a3b8" font-size="10" font-family="var(--mono-font)">响应时间: ≤120 ms</text>
<text x="18" y="70" fill="#94a3b8" font-size="10" font-family="var(--mono-font)">弯度范围: -4° ~ +14°</text>
<text x="18" y="86" fill="#00f0ff" font-size="10" font-family="var(--mono-font)">涡损降低: ≈10% (主动消除)</text>
</g>
</svg>
</main>
<!-- 左下角微型图例说明 (不占主要视线) -->
<div class="legend-box">
<div class="legend-item">
<span class="legend-dot" style="background:#00f0ff"></span>
<span>柔性自适应后缘 (变弯度/变扭转)</span>
</div>
<div class="legend-item">
<span class="legend-dot" style="background:#f59e0b"></span>
<span>微型无刷电机与连杆伺服 (内嵌式)</span>
</div>
<div class="legend-item">
<span class="legend-dot" style="background:#a855f7"></span>
<span>桨尖主动反转涡中和喷流</span>
</div>
</div>
<!-- 底部微交互控制栏 -->
<div class="control-deck">
<button class="btn-mode active" id="btnAuto">自动循迹演变</button>
<button class="btn-mode" id="btnHover">悬停大弯度 (+14°)</button>
<button class="btn-mode" id="btnCruise">巡航最优 (+4°)</button>
<button class="btn-mode" id="btnHighSpeed">高速冲刺 (-2°)</button>
<div class="divider"></div>
<div class="slider-wrap">
<span>微调 δ:</span>
<input type="range" id="angleSlider" min="-4" max="14" step="0.5" value="8" />
</div>
</div>
<script>
/**
* 智能柔性自适应桨叶与反向涡流中和 - 原理与流体力学高保真动效驱动
*/
document.addEventListener("DOMContentLoaded", () => {
// DOM 元素引用
const airfoilPath = document.getElementById("airfoilPath");
const pushRod = document.getElementById("pushRod");
const hingeJoint = document.getElementById("hingeJoint");
const flapSeg1 = document.getElementById("flapSeg1");
const flapSeg2 = document.getElementById("flapSeg2");
const flapSeg3 = document.getElementById("flapSeg3");
const link1 = document.getElementById("link1");
const link2 = document.getElementById("link2");
const link3 = document.getElementById("link3");
const txtDeflect = document.getElementById("txtDeflect");
const valDeflect = document.getElementById("valDeflect");
const valClCd = document.getElementById("valClCd");
const valPower = document.getElementById("valPower");
const angleSlider = document.getElementById("angleSlider");
const particlesContainer = document.getElementById("particlesContainer");
const btnAuto = document.getElementById("btnAuto");
const btnHover = document.getElementById("btnHover");
const btnCruise = document.getElementById("btnCruise");
const btnHighSpeed = document.getElementById("btnHighSpeed");
const modeButtons = [btnAuto, btnHover, btnCruise, btnHighSpeed];
// 状态变量
let isAuto = true;
let currentAngle = 8.0; // 襟翼偏角 (-4° 到 +14°)
let targetAngle = 8.0;
let autoTime = 0;
// 粒子流动系统 (模拟附面层风洞无粘层流与微流线)
const particles = [];
const particleCount = 28;
// 创建沿翼型流动的发光微粒子
for (let i = 0; i < particleCount; i++) {
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("r", (Math.random() * 1.5 + 1.2).toFixed(1));
circle.setAttribute("fill", i % 3 === 0 ? "#10b981" : "#00f0ff");
circle.setAttribute("opacity", (Math.random() * 0.6 + 0.3).toFixed(2));
particlesContainer.appendChild(circle);
particles.push({
el: circle,
lane: i % 4, // 0: 上翼面内侧, 1: 上翼面外侧, 2: 下翼面, 3: 桨尖中和区
progress: Math.random(),
speed: 0.0035 + Math.random() * 0.0045,
offsetY: (Math.random() - 0.5) * 8
});
}
/**
* 核心数学几何更新函数:根据偏角重新计算柔性翼型贝塞尔曲线与展向连杆位移
* @param {number} angle - 襟翼偏角 (-4° 到 +14°)
*/
function updateAeroGeometry(angle) {
// 偏角映射计算后缘点坐标位移
// 旋转铰接基准点: (340, 85),弦长延伸至约 550
const rad = (angle * Math.PI) / 180;
const teX = 340 + 205 * Math.cos(rad * 0.85);
const teY = 85 + 205 * Math.sin(rad * 0.85);
// 柔性上表面切向控制点计算 (保证曲率 C1 连续无缝隙破损)
const topCtrlX1 = 220;
const topCtrlY1 = 38 - angle * 0.4;
const topCtrlX2 = 340 + 90 * Math.cos(rad * 0.5);
const topCtrlY2 = 55 + 90 * Math.sin(rad * 0.5);
// 下表面控制点
const botCtrlX1 = 340 + 80 * Math.cos(rad * 0.7);
const botCtrlY1 = 115 + 80 * Math.sin(rad * 0.7);
// 拼接全新柔顺变形翼型 Path
const pathData = `M 80,90
C 80,32 ${topCtrlX1},${topCtrlY1} 340,${56 + angle * 0.6}
C ${topCtrlX2},${topCtrlY2} ${teX - 35},${teY - 12} ${teX},${teY}
C ${teX - 25},${teY + 6} ${botCtrlX1},${botCtrlY1} 320,${114 + angle * 0.3}
C 190,116 80,112 80,90 Z`;
airfoilPath.setAttribute("d", pathData);
// 内部机械连杆伺服位移
const jointX = 300 + 105 * Math.cos(rad * 0.8);
const jointY = 85 + 105 * Math.sin(rad * 0.8);
pushRod.setAttribute("x2", jointX - 300);
pushRod.setAttribute("y2", jointY - 85);
hingeJoint.setAttribute("cx", jointX - 300);
hingeJoint.setAttribute("cy", jointY - 85);
// 宏观展向全桨叶视图的后缘偏转联动 (带展向扭转渐变分布)
const tipDeflectPx = angle * 2.2;
// 分段 1 (根段:变形较小)
const d1 = `M 160,126 L 340,128 L 340,${144 + tipDeflectPx * 0.4} L 160,${140 + tipDeflectPx * 0.25} Z`;
flapSeg1.setAttribute("d", d1);
link1.setAttribute("y2", 24 + tipDeflectPx * 0.3);
// 分段 2 (中段)
const d2 = `M 350,128 L 540,129 L 540,${148 + tipDeflectPx * 0.7} L 350,${145 + tipDeflectPx * 0.45} Z`;
flapSeg2.setAttribute("d", d2);
link2.setAttribute("y2", 26 + tipDeflectPx * 0.55);
// 分段 3 (梢段:变形最大,配合主动涡中和)
const d3 = `M 550,129 L 750,124 L 750,${146 + tipDeflectPx} L 550,${148 + tipDeflectPx * 0.75} Z`;
flapSeg3.setAttribute("d", d3);
link3.setAttribute("y2", 26 + tipDeflectPx * 0.85);
// 数据文本刷新
const signStr = angle >= 0 ? "+" : "";
const formattedAngle = `${signStr}${angle.toFixed(1)}°`;
txtDeflect.textContent = `δ = ${formattedAngle}`;
valDeflect.textContent = formattedAngle;
// 动力学理论预估数值更新 (基于翼型变弯度升阻比模型)
// 巡航效率在偏角 +3°~+6° 达到峰值;大偏角时升力极大,适用于爬升/悬停
let clGain, inducedSaving;
if (angle >= 0) {
clGain = (8.5 + (angle > 5 ? 5 - (angle - 5) * 0.5 : angle * 0.8)).toFixed(1);
inducedSaving = (7.5 + (angle * 0.35)).toFixed(1);
} else {
clGain = (6.0 + angle * 0.8).toFixed(1);
inducedSaving = (5.0 + angle * 0.5).toFixed(1);
}
valClCd.textContent = `+${clGain}%`;
valPower.textContent = `-${inducedSaving}%`;
}
/**
* 粒子流动轨迹计算:沿上翼面、下翼面及桨尖喷流流线实时步进
*/
function animateParticles() {
const rad = (currentAngle * Math.PI) / 180;
const teYOffset = currentAngle * 2.2;
particles.forEach((p) => {
p.progress += p.speed;
if (p.progress > 1) p.progress = 0;
let px = 0;
let py = 0;
const u = p.progress;
if (p.lane === 0) {
// 上翼面层流 (紧贴壁面)
px = 100 + u * 600;
// 贝塞尔近似高度
const curve = Math.sin(u * Math.PI);
py = 445 - curve * 52 + u * (teYOffset * 0.9) + p.offsetY;
} else if (p.lane === 1) {
// 上翼面外侧流动
px = 100 + u * 610;
const curve = Math.sin(u * Math.PI * 0.9);
py = 415 - curve * 70 + u * (teYOffset * 0.6) + p.offsetY;
} else if (p.lane === 2) {
// 下翼面平缓压力面
px = 100 + u * 590;
py = 475 + Math.sin(u * Math.PI) * 18 + u * (teYOffset * 1.1) + p.offsetY;
} else {
// 桨尖微型推进器主动中和反向涡流粒子
px = 905 + u * 150;
// 螺旋旋流发散轨迹
const spiral = Math.sin(u * 18) * (14 + u * 16);
py = 186 + spiral + (Math.cos(u * 18) * 8);
}
p.el.setAttribute("cx", px.toFixed(1));
p.el.setAttribute("cy", py.toFixed(1));
});
}
/**
* 主渲染循环 (平滑过渡与自动巡航演变)
*/
function mainLoop(timestamp) {
if (isAuto) {
autoTime += 0.016;
// 正弦波动模拟自适应随飞行状态实时无级微调 (-2° ~ +13°)
targetAngle = 5.5 + Math.sin(autoTime * 0.9) * 7.5;
angleSlider.value = targetAngle;
}
// 平滑阻尼跟踪目标角 (模拟实际微电机 ≤120ms 高动态响应特性)
currentAngle += (targetAngle - currentAngle) * 0.12;
updateAeroGeometry(currentAngle);
animateParticles();
requestAnimationFrame(mainLoop);
}
// 启动自动播放
requestAnimationFrame(mainLoop);
// ==================== 交互事件绑定 ====================
function setActiveBtn(activeBtn) {
modeButtons.forEach((b) => b.classList.remove("active"));
if (activeBtn) activeBtn.classList.add("active");
}
btnAuto.addEventListener("click", () => {
isAuto = true;
setActiveBtn(btnAuto);
});
btnHover.addEventListener("click", () => {
isAuto = false;
targetAngle = 14.0;
angleSlider.value = 14;
setActiveBtn(btnHover);
});
btnCruise.addEventListener("click", () => {
isAuto = false;
targetAngle = 4.0;
angleSlider.value = 4;
setActiveBtn(btnCruise);
});
btnHighSpeed.addEventListener("click", () => {
isAuto = false;
targetAngle = -2.0;
angleSlider.value = -2;
setActiveBtn(btnHighSpeed);
});
angleSlider.addEventListener("input", (e) => {
isAuto = false;
targetAngle = parseFloat(e.target.value);
setActiveBtn(null);
});
});
</script>
</body>
</html>
积分规则:每轮对话扣10分
等待动画代码生成...
