Three.js 航空发动机教材：爆炸拆解与相机动画

教材航空发动机三维可交互项目，用 Three.js 加载 glTF 模型，支持旋转缩放、爆炸拆解与知识点联动。目标不是炫技，而是让学生建立「风扇—压气机—燃烧室—涡轮—尾喷管」的空间结构，期末能指着零件说出名字与作用。我们与航空院校教师一起定交互清单：哪些部件必点、爆炸顺序是否对应教材章节、移动端是否必须可用。

模型管线

建模在 Blender 完成，按部件拆分对象并统一命名，导出 glTF/GLB 后经 Draco 压缩，单文件控制在 15MB 以内。大模型按部件拆节点，如 fan、compressor_stage_1、turbine_disk，前端才能按 ID 拾取与拆解。贴图用 KTX2/Basis 压缩，移动端 4G 下加载从 8 秒降到 3 秒。加载过程用进度条与低模占位，避免白屏；失败时给出「网络不佳，请刷新」而非 WebGL 黑屏。

材质区分金属、陶瓷涂层与透明整流罩，PBR 参数不宜过重，教室投影环境下仍要辨认层次。动画剪辑若有转子转动，单独轨道，与爆炸动画互斥播放，防止学生晕眩。

爆炸视图

为每个部件配置「装配位」与「爆炸位」坐标，用 GSAP 插值过渡，时长 0.8–1.2 秒，缓动用 power2.inOut。爆炸不是乱飞，而是沿结构逻辑拉开层次：风扇前推、压气机轴向拉开、涡轮后拉、管路侧向展开。学生可拖拽滑块控制爆炸程度 0–100%，便于对照教材插图。点击章节「燃烧室」时，自动爆炸到该子树并聚焦相机。

相机

预设观察机位（总体 / 压气机 / 涡轮 / 尾喷管），切换时用 tween 平滑 position 与 lookAt，禁止瞬移。移动端双指缩放、单指旋转与桌面 OrbitControls 统一阻尼。低端机自动降阴影、关 SSAO，保 30fps；帧率连续低于 24 时提示「已切换简化显示」。三维教材成功的标志：测验里根据截图指认部件并简述功能——这比帧率数字更有说服力。

与教材内容联动

知识点文案存在 CMS，按 partId 关联，改文案不必重新导出模型。章节导航与 3D 状态双向绑定：学完一节自动解锁下一节爆炸权限，防止一上来全拆完失去递进感。支持教师模式：一键重置视角、关闭学生误触的爆炸滑块。录屏演示时开「自动巡游」脚本，相机按脚本轨道飞行，用于慕课片头。

交付与兼容

目标浏览器 Chrome 90+、Safari 15+；不支持 WebGL2 时展示静态剖面图与文字 fallback，而不是硬报错。打包用 Vite，Three 走 tree-shaking，首屏 JS 控制在 300KB gzip 内。LMS 通过 iframe 嵌入时，postMessage 同步完成进度，方便成绩册对接。

性能预算与验收

教室 PC 集显目标 1080p 三十帧，手机竖屏目标 720p 二十四帧。Performance panel 记录 draw call 与纹理内存，超标则减 LOD 级数。验收时教师试玩三十分钟：是否晕、是否找得到按钮、爆炸逻辑是否与讲义一致。三维课件的 KPI 不是截图多炫，而是课后问卷「结构是否更清晰」平均分是否上升。

WebGL 上下文丢失（移动端切后台）要监听 restore 并重载纹理，否则白模吓人。版本更新时保留上一版 glTF CDN 地址一周，防止教材链接批量失效。导出前在 glTF Validator 过一遍，法线、骨骼权重错误会在教室投影下放大。学生端禁用开发者工具无关，但要防误触右键菜单；全屏按钮与重置视角放在拇指可达区。这些细节决定课件是「演示能看」还是「学期能教」。

小结

三维教材要服务空间理解：模型命名、爆炸路径、预设机位与知识点绑定比花哨光影更重要。移动端帧率与加载体积必须纳入验收。课堂现场网络不稳时，本地缓存模型包能避免「打不开课」。

实践中把上述清单变成可勾选的发布门禁，比事后补救更省时间。