独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多旋翼气动声学与结构隔振 IFR 原理可视化</title>
<style>
:root {
--bg-space: #07090e;
--panel-bg: rgba(13, 18, 28, 0.72);
--panel-border: rgba(56, 189, 248, 0.18);
--cyan-glow: #38bdf8;
--teal-core: #2dd4bf;
--amber-energy: #f59e0b;
--violet-phase: #a855f7;
--text-dim: #94a3b8;
--text-bright: #f1f5f9;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body {
background-color: var(--bg-space);
color: var(--text-bright);
font-family: var(--font-sans);
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
/* 背景工程网格与极标氛围 */
.telemetry-grid {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 68%),
linear-gradient(rgba(56, 189, 248, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px);
background-size: 100% 100%, 48px 48px, 48px 48px;
pointer-events: none;
z-index: 1;
}
/* 主视觉容器:占据主导地位,确保无遮挡中心体验 */
.viewport-canvas {
position: relative;
width: 100vw;
height: 100vh;
max-width: 1440px;
max-height: 900px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
svg#stage {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 45px rgba(14, 165, 233, 0.08));
}
/* 紧凑角落悬浮遥测面板 - 保持小尺寸与边缘贴合,绝不阻挡中心动画 */
.hud-chip {
position: absolute;
background: var(--panel-bg);
border: 1px solid var(--panel-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 8px;
padding: 10px 14px;
font-size: 11px;
line-height: 1.4;
pointer-events: auto;
z-index: 10;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.top-left {
top: 20px;
left: 24px;
display: flex;
flex-direction: column;
gap: 3px;
}
.top-right {
top: 20px;
right: 24px;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 210px;
}
.bottom-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 18px;
padding: 8px 18px;
background: rgba(10, 15, 26, 0.85);
border: 1px solid rgba(56, 189, 248, 0.22);
border-radius: 30px;
z-index: 10;
}
.title-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--cyan-glow);
display: flex;
align-items: center;
gap: 6px;
}
.title-tag::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal-core);
box-shadow: 0 0 8px var(--teal-core);
animation: pulse-dot 2s infinite ease-in-out;
}
.system-title {
font-size: 13px;
font-weight: 600;
color: #fff;
letter-spacing: 0.02em;
}
.param-row {
display: flex;
justify-content: space-between;
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 10.5px;
}
.param-row span.val {
color: var(--teal-core);
font-weight: 500;
}
/* 控制滑块 */
.ctrl-group {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-dim);
}
input[type=range] {
-webkit-appearance: none;
width: 110px;
height: 4px;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--cyan-glow);
cursor: pointer;
box-shadow: 0 0 10px var(--cyan-glow);
transition: transform 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.25);
}
.badge-ifr {
font-size: 9.5px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(45, 212, 191, 0.12);
color: var(--teal-core);
border: 1px solid rgba(45, 212, 191, 0.3);
letter-spacing: 0.05em;
}
/* 实时模态示波迷你图 */
.scope-canvas {
width: 100%;
height: 38px;
background: rgba(0, 0, 0, 0.35);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
@keyframes pulse-dot {
0%, 100% { opacity: 0.4; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.2); }
}
/* SVG 内嵌微动态样式 */
.vortex-dot {
transform-origin: center;
animation: vortex-spin 1.4s linear infinite;
}
@keyframes vortex-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- 背景流场网格 -->
<div class="telemetry-grid"></div>
<!-- 左上角极简状态标签(字号小、贴边、零遮挡) -->
<div class="hud-chip top-left">
<div class="title-tag">AERO-IFR // 气动与结构解耦系统</div>
<div class="system-title">源端消音 · 阻抗失配自消除模态</div>
<div style="font-size: 10.5px; color: var(--text-dim); margin-top: 2px;">
零包覆吸声体 · 结构增重 <span style="color: var(--teal-core); font-weight:600;">-31.5%</span> (26g超轻单叶)
</div>
</div>
<!-- 右上角声振衰减遥测波形卡 -->
<div class="hud-chip top-right">
<div class="param-row">
<span>振动隔离率 (180Hz)</span>
<span class="val" id="isoEfficiency">98.4%</span>
</div>
<canvas id="miniScope" class="scope-canvas" width="210" height="38"></canvas>
<div class="param-row" style="margin-top: 2px;">
<span>尾缘宽频涡噪声峰值</span>
<span class="val" style="color:#38bdf8;">-11.8 dB</span>
</div>
<div class="param-row">
<span>桨尖涡脱落强度</span>
<span class="val" style="color:#a855f7;">-8.4 dB</span>
</div>
</div>
<!-- 中央主舞台:SVG 矢量工程原理透视图 -->
<div class="viewport-canvas">
<svg id="stage" viewBox="0 0 1200 760" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 碳纤维纹理底质 -->
<pattern id="carbonWeave" width="6" height="6" patternUnits="userSpaceOnUse">
<rect width="6" height="6" fill="#141923" />
<path d="M0 3L3 0L6 3L3 6Z" fill="#1b2331" opacity="0.6"/>
<path d="M3 0L6 3L3 6L0 3Z" stroke="rgba(255,255,255,0.04)" stroke-width="0.5" fill="none"/>
</pattern>
<!-- 阻尼橡胶微观渐变 -->
<linearGradient id="rubberGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1e293b" />
<stop offset="25%" stop-color="#334155" />
<stop offset="50%" stop-color="#0f172a" />
<stop offset="75%" stop-color="#334155" />
<stop offset="100%" stop-color="#1e293b" />
</linearGradient>
<!-- 能量耗散粒子光晕滤镜 -->
<filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3.5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="highGlow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="6" result="blur2" />
<feMerge>
<feMergeNode in="blur2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- 声能与气流渐变 -->
<linearGradient id="airFlowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#38bdf8" stop-opacity="0.0" />
<stop offset="40%" stop-color="#38bdf8" stop-opacity="0.8" />
<stop offset="100%" stop-color="#2dd4bf" stop-opacity="0.1" />
</linearGradient>
<linearGradient id="tipVortexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.9" />
<stop offset="100%" stop-color="#38bdf8" stop-opacity="0.0" />
</linearGradient>
<!-- 锯齿微涡流模板 -->
<g id="microVortex">
<circle cx="0" cy="0" r="4.5" fill="none" stroke="#2dd4bf" stroke-width="1.2" stroke-dasharray="7 3" opacity="0.85" />
<circle cx="0" cy="0" r="1.5" fill="#38bdf8" />
</g>
</defs>
<!-- 坐标刻度同心圆雷达辅助线(低透明度) -->
<g opacity="0.22">
<circle cx="600" cy="400" r="320" fill="none" stroke="#38bdf8" stroke-width="1" stroke-dasharray="4 8"/>
<circle cx="600" cy="400" r="230" fill="none" stroke="#38bdf8" stroke-width="0.8" stroke-dasharray="2 6"/>
<circle cx="600" cy="400" r="130" fill="none" stroke="#38bdf8" stroke-width="0.6"/>
<line x1="260" y1="400" x2="940" y2="400" stroke="#38bdf8" stroke-width="0.5" stroke-dasharray="3 7"/>
<line x1="600" y1="70" x2="600" y2="730" stroke="#38bdf8" stroke-width="0.5" stroke-dasharray="3 7"/>
</g>
<!-- ==================== 区域 1:机械臂与隔离层三明治解剖结构(左下方视角) ==================== -->
<g id="isolatorSubsystem" transform="translate(140, 430)">
<!-- 底衬阴影 -->
<ellipse cx="140" cy="200" rx="130" ry="32" fill="#000" opacity="0.6" filter="blur(10px)"/>
<!-- 碳纤维机臂管身 -->
<path d="M-40,195 L280,195 L270,225 L-50,225 Z" fill="url(#carbonWeave)" stroke="#334155" stroke-width="1.5"/>
<text x="-35" y="214" fill="#64748b" font-family="var(--font-mono)" font-size="10.5">碳纤维机臂 (模态解耦端 · 振动衰减区)</text>
<!-- 机臂上传递的微弱剩余波(几乎为平静直线) -->
<path id="armDampedWave" d="M-40,210 Q40,210 100,210 T240,210" fill="none" stroke="#2dd4bf" stroke-width="2" opacity="0.65"/>
<!-- 下薄钢限位垫片 (Steel Shim 下) -->
<rect x="50" y="180" width="180" height="6" rx="2" fill="#94a3b8" stroke="#cbd5e1" stroke-width="0.8"/>
<!-- 环形橡胶隔振垫 (45 Shore A) -->
<g id="rubberMountGroup">
<rect id="rubberCore" x="60" y="148" width="160" height="32" rx="4" fill="url(#rubberGrad)" stroke="#475569" stroke-width="1.5"/>
<!-- 橡胶内部剪切弹性阻尼波纹示意 -->
<path id="shearWaves" d="M75,164 Q100,154 125,164 T175,164 T205,164" fill="none" stroke="#f59e0b" stroke-width="1.8" stroke-dasharray="3 2" opacity="0.85"/>
<!-- 阻尼耗散微光发热/解耦指示 -->
<circle cx="140" cy="164" r="18" fill="none" stroke="rgba(245, 158, 11, 0.4)" stroke-width="3" filter="url(#softGlow)"/>
</g>
<!-- 上薄钢限位垫片 (Steel Shim 上) -->
<rect x="50" y="142" width="180" height="6" rx="2" fill="#94a3b8" stroke="#cbd5e1" stroke-width="0.8"/>
<!-- 电机金属安装基座 (高频振动源端 180Hz) -->
<path d="M70,80 L210,80 L225,142 L55,142 Z" fill="#1e293b" stroke="#0ea5e9" stroke-width="1.2"/>
<!-- 电机转子外壳示意 -->
<rect x="95" y="24" width="90" height="56" rx="3" fill="#0f172a" stroke="#38bdf8" stroke-width="1.5"/>
<line x1="140" y1="10" x2="140" y2="24" stroke="#cbd5e1" stroke-width="5" stroke-linecap="round"/>
<!-- 电机座上强烈的 180Hz 高频激振波示意(抖动波形) -->
<path id="motorVibWave" d="M72,112 Q90,98 105,112 T140,112 T175,112 T208,112" fill="none" stroke="#f59e0b" stroke-width="2.5" filter="url(#softGlow)"/>
<!-- 隔振器技术指示引线 (紧凑排布) -->
<g opacity="0.9">
<!-- 激振源标注 -->
<line x1="220" y1="105" x2="265" y2="105" stroke="#f59e0b" stroke-width="1" stroke-dasharray="2 2"/>
<circle cx="220" cy="105" r="2" fill="#f59e0b"/>
<text x="272" y="109" fill="#f59e0b" font-family="var(--font-mono)" font-size="10">180Hz 电机旋转激励</text>
<!-- 隔振垫参数标注 -->
<line x1="225" y1="164" x2="270" y2="164" stroke="#38bdf8" stroke-width="1"/>
<circle cx="225" cy="164" r="2.5" fill="#38bdf8"/>
<text x="278" y="161" fill="#f1f5f9" font-family="var(--font-mono)" font-size="10.5" font-weight="600">45 Shore A 橡胶隔振环</text>
<text x="278" y="174" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">静刚度 18N/mm · 固有频率 22Hz (深衰减区)</text>
<!-- 限位钢垫标注 -->
<line x1="50" y1="145" x2="15" y2="145" stroke="#64748b" stroke-width="1"/>
<text x="10" y="142" text-anchor="end" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">上下薄钢限位片 (刚度约束)</text>
</g>
</g>
<!-- ==================== 区域 2:核心旋转流场与 18°后掠+尾缘锯齿旋翼系统 (中心主区) ==================== -->
<!-- 动态旋转基座(带平滑转速) -->
<g id="propellerSystem" transform="translate(640, 360)">
<!-- 气动背景:气流汇聚平滑流线 -->
<g id="incomingAirstreams" opacity="0.45">
<path d="M-360,-260 C-200,-240 -100,-180 0,-120" stroke="url(#airFlowGrad)" stroke-width="1.8" fill="none" stroke-dasharray="140 30"/>
<path d="M-380,-140 C-220,-120 -80,-80 0,-30" stroke="url(#airFlowGrad)" stroke-width="2.2" fill="none" stroke-dasharray="160 20"/>
<path d="M-340,30 C-200,30 -60,0 20,-10" stroke="url(#airFlowGrad)" stroke-width="1.6" fill="none" stroke-dasharray="120 40"/>
</g>
<!-- 桨毂中心转轴 -->
<circle cx="0" cy="0" r="32" fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
<circle cx="0" cy="0" r="16" fill="#1e293b" stroke="#64748b" stroke-width="1.5"/>
<circle cx="0" cy="0" r="5" fill="#38bdf8"/>
<!-- 旋翼叶片 1 (主放大剖析叶片,水平向右延展,全长展现锯齿与后掠几何) -->
<g id="bladeMain" transform="rotate(0)">
<!-- 碳纤维薄壁叶片主壳体 (PMI发泡芯夹层超轻 26g 结构) -->
<!-- 形状:根部渐扩 -> 尾缘锯齿段 -> 展向延伸 -> 18° 后掠尖端 -->
<path id="bladeBody" d="
M 28,-14
C 90,-22 180,-28 290,-26
C 340,-25 390,-20 420,-12
C 445,-5 462,8 468,26
C 458,38 435,42 400,38
L 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28
C 100,28 60,18 28,14
Z"
fill="url(#carbonWeave)"
stroke="#38bdf8"
stroke-width="1.5"
/>
<!-- 内部 PMI 超轻发泡芯微结构轮廓线 (虚线示意) -->
<path d="M50,-10 C150,-16 280,-16 380,-6 C415,2 430,16 432,24 C410,30 380,22 360,22 L150,20 C100,20 70,10 50,-10 Z"
fill="none" stroke="rgba(56, 189, 248, 0.25)" stroke-width="1" stroke-dasharray="3 3"/>
<!-- 尾缘锯齿特征强化高亮描边 (4mm齿高,8mm齿距) -->
<path d="M 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28"
fill="none" stroke="#2dd4bf" stroke-width="2.2" filter="url(#softGlow)"/>
<!-- 18° 后掠角辅助切线与角度弧标 -->
<g opacity="0.85">
<!-- 传统直轴线基准 -->
<line x1="390" y1="-22" x2="480" y2="-22" stroke="#64748b" stroke-width="1" stroke-dasharray="3 3"/>
<!-- 18° 实际后掠前缘切线 -->
<line x1="390" y1="-22" x2="472" y2="28" stroke="#a855f7" stroke-width="1.8"/>
<!-- 角度弧 -->
<path d="M 445,-22 A 55 55 0 0 1 454,4" fill="none" stroke="#a855f7" stroke-width="1.5"/>
<text x="462" y="-5" fill="#c084fc" font-family="var(--font-mono)" font-size="10.5" font-weight="600">18° 后掠角</text>
</g>
<!-- 锯齿碎涡流场物理动态:小尺度涡链群 (Micro-vortex Cascade) -->
<g id="microVortexStream" transform="translate(0, 10)">
<!-- 粒子由 JS 定时更新位置与扩散状态 -->
</g>
<!-- 桨尖涡相干错开与流场滑移带 (Suppressed Tip Vortex) -->
<g id="tipVortexArea" transform="translate(440, 20)">
<ellipse cx="25" cy="5" rx="35" ry="12" fill="none" stroke="url(#tipVortexGrad)" stroke-width="2.2" stroke-dasharray="10 5" filter="url(#softGlow)">
<animateTransform attributeName="transform" type="rotate" from="0 25 5" to="360 25 5" dur="1.8s" repeatCount="indefinite"/>
</ellipse>
<ellipse cx="40" cy="12" rx="20" ry="7" fill="none" stroke="#a855f7" stroke-width="1" opacity="0.6"/>
</g>
<!-- 结构工程引线标签 (紧凑、精确) -->
<g transform="translate(260, 48)">
<line x1="0" y1="0" x2="20" y2="35" stroke="#2dd4bf" stroke-width="1"/>
<line x1="20" y1="35" x2="140" y2="35" stroke="#2dd4bf" stroke-width="1"/>
<circle cx="0" cy="0" r="2.5" fill="#2dd4bf"/>
<text x="25" y="30" fill="#2dd4bf" font-family="var(--font-mono)" font-size="11" font-weight="600">尾缘仿生锯齿 (4×8mm)</text>
<text x="25" y="44" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">强迫大尺度附面层涡碎裂为微涡耗散 · 压低宽频噪声</text>
</g>
<g transform="translate(420, -22)">
<line x1="0" y1="0" x2="-25" y2="-45" stroke="#38bdf8" stroke-width="1"/>
<line x1="-25" y1="-45" x2="-140" y2="-45" stroke="#38bdf8" stroke-width="1"/>
<circle cx="0" cy="0" r="2.5" fill="#38bdf8"/>
<text x="-135" y="-50" fill="#38bdf8" font-family="var(--font-mono)" font-size="11" font-weight="600">展向涡相干去相关</text>
<text x="-135" y="-36" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">削减桨尖脱落压力峰值</text>
</g>
</g>
<!-- 对称旋转叶片 2 (对向平衡叶片,半透视简化,呈现真实双叶平衡动力) -->
<g id="bladeOpposite" transform="rotate(180)">
<path d="
M 28,-14
C 90,-22 180,-28 290,-26
C 340,-25 390,-20 420,-12
C 445,-5 462,8 468,26
C 458,38 435,42 400,38
L 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28
C 100,28 60,18 28,14 Z"
fill="url(#carbonWeave)" stroke="#38bdf8" stroke-width="1.2" opacity="0.85"
/>
<path d="M 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28"
fill="none" stroke="#2dd4bf" stroke-width="1.8" opacity="0.9"/>
</g>
</g>
<!-- 动态声压辐射外圈场(展示低辐射、弱相干的微弱声场边界) -->
<g id="soundRadiationField" transform="translate(640, 360)" opacity="0.35" pointer-events="none">
<circle id="acousticWave1" cx="0" cy="0" r="180" fill="none" stroke="#38bdf8" stroke-width="1" stroke-dasharray="8 12"/>
<circle id="acousticWave2" cx="0" cy="0" r="260" fill="none" stroke="#2dd4bf" stroke-width="0.8" stroke-dasharray="6 14"/>
<circle id="acousticWave3" cx="0" cy="0" r="340" fill="none" stroke="#a855f7" stroke-width="0.6" stroke-dasharray="4 16"/>
</g>
</svg>
</div>
<!-- 底部精炼参数调节栏 (紧凑药丸胶囊设计,不侵占主画面) -->
<div class="bottom-bar">
<div class="ctrl-group">
<span>转速 (RPM)</span>
<input type="range" id="rpmSlider" min="4500" max="6200" step="50" value="5400">
<span id="rpmValue" style="color:#fff; font-weight:600; width:52px;">5400</span>
</div>
<div style="height: 16px; width: 1px; background: rgba(255,255,255,0.2);"></div>
<div class="badge-ifr">IFR 理想解:在源头瓦解噪声 · 零吸声棉增重</div>
</div>
<script>
// 确保在 DOM 加载完成后即刻自动播放,并支持 iframe 刷新自启
document.addEventListener('DOMContentLoaded', () => {
initSimulation();
});
function initSimulation() {
const propellerSystem = document.getElementById('propellerSystem');
const microVortexStream = document.getElementById('microVortexStream');
const motorVibWave = document.getElementById('motorVibWave');
const armDampedWave = document.getElementById('armDampedWave');
const shearWaves = document.getElementById('shearWaves');
const rubberCore = document.getElementById('rubberCore');
const rpmSlider = document.getElementById('rpmSlider');
const rpmValue = document.getElementById('rpmValue');
const miniScope = document.getElementById('miniScope');
const scopeCtx = miniScope.getContext('2d');
const isoEfficiency = document.getElementById('isoEfficiency');
const acousticWave1 = document.getElementById('acousticWave1');
const acousticWave2 = document.getElementById('acousticWave2');
const acousticWave3 = document.getElementById('acousticWave3');
let currentRpm = 5400;
let angle = 0;
let simTime = 0;
// 创建尾缘碎裂微涡粒子池 (Micro-Vortex Pool)
const VORTEX_COUNT = 18;
const vortices = [];
const serrationStartX = 140;
const serrationEndX = 370;
for (let i = 0; i < VORTEX_COUNT; i++) {
const elem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
elem.innerHTML = `
<circle cx="0" cy="0" r="3.2" fill="none" stroke="#2dd4bf" stroke-width="1.2" stroke-dasharray="4 2"/>
<circle cx="0" cy="0" r="1.2" fill="#38bdf8"/>
`;
microVortexStream.appendChild(elem);
vortices.push({
elem: elem,
x: serrationStartX + Math.random() * (serrationEndX - serrationStartX),
y: 28,
scale: 0.3 + Math.random() * 0.7,
progress: Math.random(), // 0 到 1 的生命周期
speed: 0.012 + Math.random() * 0.015,
driftAngle: 0.2 + (Math.random() - 0.5) * 0.2
});
}
// 转速滑块交互联动
rpmSlider.addEventListener('input', (e) => {
currentRpm = parseInt(e.target.value, 10);
rpmValue.textContent = currentRpm;
// 动态计算隔振率变化 (180Hz 远大于 22Hz 固有频率,阻抗失配极高)
const excitationFreq = (currentRpm / 60) * 2; // 双叶通过频率
const fn = 22; // 隔振垫固有频率
const freqRatio = excitationFreq / fn;
const transmissibility = 1 / Math.abs(Math.pow(freqRatio, 2) - 1);
const eff = Math.min(99.4, Math.max(94.0, (1 - transmissibility) * 100)).toFixed(1);
isoEfficiency.textContent = eff + '%';
});
// 实时绘制示波器波形(输入高频振动 vs 隔振垫输出平滑波)
let scopeOffset = 0;
function renderScope() {
const w = miniScope.width;
const h = miniScope.height;
scopeCtx.clearRect(0, 0, w, h);
scopeOffset += 0.12;
// 绘制电机侧激励波 (黄色高频小波,180Hz 模态)
scopeCtx.beginPath();
scopeCtx.strokeStyle = 'rgba(245, 158, 11, 0.75)';
scopeCtx.lineWidth = 1.2;
for (let x = 0; x < w; x++) {
const y = h * 0.32 + Math.sin(x * 0.35 + scopeOffset * 3) * 6 * (currentRpm / 5400);
if (x === 0) scopeCtx.moveTo(x, y);
else scopeCtx.lineTo(x, y);
}
scopeCtx.stroke();
// 绘制机身结构侧传递波 (青色平滑微波,衰减率 > 98%)
scopeCtx.beginPath();
scopeCtx.strokeStyle = 'rgba(45, 212, 191, 0.9)';
scopeCtx.lineWidth = 1.5;
for (let x = 0; x < w; x++) {
const y = h * 0.75 + Math.sin(x * 0.08 + scopeOffset * 0.5) * 1.5;
if (x === 0) scopeCtx.moveTo(x, y);
else scopeCtx.lineTo(x, y);
}
scopeCtx.stroke();
}
// 主自动刷新动画循环
function animate() {
simTime += 0.016;
// 1. 旋翼本体根据 RPM 连续自转
// 视觉上平滑表达旋转(同时保留叶片主视角的流体动力特征微摆动)
const rotSpeed = (currentRpm / 60) * 360 * 0.0022;
angle = (angle + rotSpeed) % 360;
propellerSystem.setAttribute('transform', `translate(640, 360) rotate(${angle})`);
// 2. 尾缘锯齿处的破碎小涡链运动与粘性消散 (Micro-vortices dissipation)
vortices.forEach(v => {
v.progress += v.speed * (currentRpm / 5400);
if (v.progress > 1) {
v.progress = 0;
v.x = serrationStartX + Math.random() * (serrationEndX - serrationStartX);
v.y = 28 + (Math.random() * 4);
}
// 向后脱落、展向微偏并逐渐扩散淡出
const curX = v.x + v.progress * 48;
const curY = v.y + v.progress * 38;
const scale = 0.5 + v.progress * 1.4;
const opacity = Math.sin(v.progress * Math.PI) * 0.9;
v.elem.setAttribute('transform', `translate(${curX}, ${curY}) scale(${scale})`);
v.elem.setAttribute('opacity', opacity);
});
// 3. 电机座高频激振动效 (180Hz 振幅模拟)
const vibAmp = Math.sin(simTime * 45) * 1.6 * (currentRpm / 5400);
motorVibWave.setAttribute('transform', `translate(0, ${vibAmp})`);
// 橡胶隔振层微剪切弹性形变与阻尼内耗
const rubberShear = Math.sin(simTime * 28) * 1.2;
shearWaves.setAttribute('transform', `translate(${rubberShear}, 0)`);
rubberCore.setAttribute('transform', `scale(1, ${1 + vibAmp * 0.03})`);
// 机身侧衰减后的极微小响应
const armAmp = Math.sin(simTime * 6) * 0.25;
armDampedWave.setAttribute('transform', `translate(0, ${armAmp})`);
// 4. 声辐射外圈柔和扩散
const waveScale1 = 1 + (simTime * 0.4) % 0.8;
const waveScale2 = 1 + ((simTime + 0.3) * 0.4) % 0.8;
const waveScale3 = 1 + ((simTime + 0.6) * 0.4) % 0.8;
acousticWave1.setAttribute('r', 120 + waveScale1 * 130);
acousticWave2.setAttribute('r', 160 + waveScale2 * 140);
acousticWave3.setAttribute('r', 200 + waveScale3 * 150);
// 5. 示波器渲染
renderScope();
requestAnimationFrame(animate);
}
// 启动自动播放
requestAnimationFrame(animate);
}
</script>
</body>
</html>
积分规则:每轮对话扣10分
等待动画代码生成...
