
![8646d37b-71ee-4975-a848-df52d46d4a84.png](https://developer.qcloudimg.com/http-save/yehe-12776607/5b49e68275add7d64863e56f8d0b9736.png)
一个美术/航模老师的前端自白：没有服务器、没有稳定网络，只有一群想弄明白"飞机为什么能拐弯"的孩子，和一份"让他们自己上手"的执念。

我是乡镇小学的一名老师，带着孩子们上航模校本课。
有一回讲"方向舵让飞机右转"，我在黑板上画了半天，底下一片安静。课后一个男孩追出来问："老师，舵不是在后头吗，它怎么让前面拐弯的？"——那一刻我意识到，光靠嘴和粉笔，孩子是"听"懂的，不是"看"懂的。
我想让他们看见。更想让他们上手去扳。
于是我（和我身边的 AI 搭档小满）一起，用前端给这堂课做了个 3D 互动教具。今天把它拆开讲讲——怎么从一间没网、没服务器的教室出发，最后变成孩子们抢着跑上讲台去扳舵面的样子。

![7248cd6de5cd5a027068de3ed444d94f.jpg](https://developer.qcloudimg.com/http-save/yehe-12776607/609d1d7adc6182a0aef27200ae993217.jpg)
一、先说约束：乡镇教室不是实验室

技术选型是被现实逼出来的，不是炫技：
 教室的一体机**经常连不上网**，或者网速让你怀疑人生；

同事们不会配 Node、不会起服务，我也不能每次上课都当运维；

 教具得能被随便拷走、随便改——它是给老师用的，不是给我一个人看的。

所以只有一条路：**一个 `.html` 文件，把 Three.js 和全部逻辑都内联进去，双击就能开。** 不用联网、不用装环境、不用起服务。
构建方式很简单，一个 `build.py` 把 `three.min.js` 和源码拼成离线单文件：


一个小坑：在 Windows 上 `build.py` 里调用 `find` 会调到系统自带的那个而非 GNU find，构建会静默失败。稳妥做法是把 `three.min.js` 路径显式作为参数喂进去；产物自带 `node --check` 语法自检，省得第二天上课发现打不开。


二、核心：把"舵面原理"变成孩子能扳的控件
![d66125bf20f8cc9cd97c376c697414ed.jpg](https://developer.qcloudimg.com/http-save/yehe-12776607/a7d477c5892125760884c3b06c508bde.jpg)
屏幕中央是一架飞机。底下四个滑杆，对应真实舵面：

| | | |
|:-:|:-:|:-:|
|控件|物理含义|判定逻辑|
|方向舵 rud|机尾左右偏转|`rud > 0` → 机头右转|
|升降舵 ele|机尾上下偏转|`ele > 0` → 机头爬升|
|左副翼 ailL|左翼后缘偏转|正值 = 上偏|
|右副翼 ailR|右翼后缘偏转|正值 = 上偏；滚转 =（右−左）差动|
副翼我最开始只给了一个滑块，后来拆成**左、右两个独立滑块**，滚转走差动逻辑 `(ailR − ailL) > 0 → 右滚`——这正是一架真飞机副翼的工作方式。孩子拖一拖就会发现："哦，两个翼不能一起动，得一边上一边下。"
 让"做对了"交给系统当场说

乡镇课堂最缺的不是内容，是**即时反馈**。我在课堂引导里塞进一个"✍️ 练一练"闭环：

孩子不是"听老师讲对不对"，是"系统当场告诉他哪里想反了"。那个课后追出来问问题的男孩，后来在屏幕上把副翼拖对的那一下，自己喊出了声。
![c5aea747d547d06c3fd02027f151583a.jpg](https://developer.qcloudimg.com/http-save/yehe-12776607/a03fd9ec26f313d15f995aa287d606ae.jpg)

三、把伯努利"画"出来

为了让"为什么能飞、为什么能拐弯"看得见，我加了一层风洞式气流：
均匀来流流过机体；

过翼时上下绕翼，**上翼面加速**（伯努利，孩子第一次"看见"升力从哪来）；

桨后滑流加速；

 尾舵处气流随舵面偏转——流动光点按局部速度推进。

一个差点翻车的语义坑

最初尾部那支红箭头，我让它指"机尾被推的方向"。结果孩子们一看全反了——因为转弯方向恰恰相反。有个小姑娘很认真地跟我说："老师，它推左边，可飞机往右拐，它说谎。"
这句话点醒了我。我把箭头改成指示"**舵面偏转方向**"：方向舵 rud>0 → 水平指右，升降舵 ele>0 → 竖直向上，图例加注"机尾箭头＝舵面偏转方向"。误读率一下就下去了。**教具不是把知识搬上屏幕就行，它自己也在"教"，所以每个细节都得替孩子想到。**


 四、落地那天

螺旋桨原本是 0.02 的薄片，侧视根本看不见。改成静止 45° 加宽加厚后，孩子终于"看见"了螺旋桨。
2026 年 9 月 30 日，这版教具第一次进真实课堂。上午，孩子们**轮流跑上讲台**，亲手去扳方向舵、升降舵、左右副翼；下午，操场成了更大的课堂，纸飞机一架架飞出去——闭着眼校准的、扎马步投掷的、举着飞机侧身蓄力的。
不是我演示，是他们自己上手。从"屏幕看懂原理"到"手上试出感觉"，这条闭环，跑通了。


五、给想做同类教具的老师/开发者的几点真心话

1. 交付物优先单文件：别给老师一个要 `npm install` 的项目，给一个能拷走、能双击的文件。

1. 判定逻辑写进代码，别藏在老师嘴里**：即时反馈是互动教具的灵魂。

1. 物理用观感级近似：乡镇课堂要的是"方向对、能解释"，不是 CFD 精度。

1. 把教学法的名字焊进 UI：比如那行"三问三学"进度条，让教具本身就是教案的一部分。

1. 每个视觉细节都替孩子想一遍：你以为清楚的东西，他们可能正好看反——就像那支箭头。

项目结构（开源友好）

火种很小，但能点亮一屋子的孩子。如果你也在做乡镇或中小学的互动教具，欢迎交流——我们一起，让更多孩子亲手扳动那只舵。🌾

一个美术/航模老师的前端自白：没有服务器、没有稳定网络，只有一群想弄明白"飞机为什么能拐弯"的孩子，和一份"让他们自己上手"的执念。

我给乡镇小学的航模课，写了个会飞的 3D 舵面教具

前端

编程语言

没有服务器、没有稳定网络，一位乡镇航模老师用前端打造3D互动教具，让孩子亲手扳动舵面理解飞行原理。离线单文件HTML，即时反馈系统，风洞气流可视化，从课堂到操场，让每个孩子都能“看见”并“上手”科学。开源友好，为中小学互动教具提供可复制方案。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我给乡镇小学的航模课，写了个会飞的 3D 舵面教具-腾讯云开发者社区-腾讯云

我给乡镇小学的航模课，写了个会飞的 3D 舵面教具

我给乡镇小学的航模课，写了个会飞的 3D 舵面教具

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐