安培力的方向和大小互动课件
这个程序要实现的是人教版第一章 1 磁场对通电导线的作用力中的图 1.1–2 和图 1.1–5，如下图所示。
做出的成品如下所示：
核心代码解读
用原生 WebGL 代码写起来太繁琐，所以使用了 Three.js 库，这个库将 WebGL 底层代码进行了封装，使用起来简单地多。Three.js 使用的基本教程可参见本网站网页编程的对应栏目。
要构建一个 Three.js 框架，必须先拥有三样东西：
- 渲染器（renderer）对象：负责创建 WebGL 上下文，绘制场景。
- 场景（scene）对象：场景是最上级的对象，用于容纳所有的其他图形对象（网格、相机等）。
- 相机（camera）对象：定义我们在渲染好的 scene 中能够看到些什么。
观察上面的图像，发现场景是由下面几个基本几何体构成的：蓝色和黄色参考平面对应的是平面，导线对应的是圆柱体，为了展示导线中流动的电流，用一组圆环，最后 B、F 的矢量箭头是圆柱体和圆锥体的组合。代码如下：
let scene, camera, renderer; // 场景、相机、渲染器
let wireCylinder, wireArrow; // 导线圆柱体、电流箭头
let yellowPlane, bluePlane; // 参考平面
let vectorB, vectorF; // 磁场向量B、安培力向量F
let currentRings = []; // 电流流动动画环
在 Three.js 中上述几何体分别对应：PlaneGeometry、CylinderGeometry 和 ConeGeometry。注意，圆环实际上也是圆柱体，但在构造函数时需要将参数 openEnded 设置为 true，表示不绘制圆柱的向下两个面。代码如下：
const ringGeometry = new THREE.CylinderGeometry(0.14, 0.14, 0.20, 16, 1, true);
若你有 Three.js 的基础，代码的其他部分也是比较简单的。场景中添加一个环境光 ambientLight、一个平行光 directionalLight，除两个参考平面外，导线、向量箭头等都使用了 MeshLambertMaterial 材质实现了最简单的 Lambert 光照处理，突出这些模型的立体感。
物理计算非常简单：F = BILsinθ，对应的代码在 updateForce 方法中：
const actualForce = bMagnitude * iMagnitude * lMagnitude * sinTheta;
完整代码
注意：下面的代码中引入 Three.js 库的方法是使用 CDN，即直接在 HTML 文件中用 <script> 标签加载，此时的文件大小只有 43 K。但这种做法会导致离线不可用，因为它需要联网去下载 Three.js 库。所以在物理课件栏目中提供的是离线版，直接把 Three.min.js 代码直接复制到 <script> 中，这样做会使课件大小膨胀到 696 K，但为了满足离线单文件可用，是必须付出的代价。优化办法是用构建工具去除未用到的功能，即 Tree Shaking。用 Vite 试了一下，本来以为这个课件只用到了 Three.js 最基本的几个功能，文件大小会大幅减少，但最终才优化到了 464 K，比我想象中的要大，就不折腾了，保留了 696 K 的版本，多了几百 K 对现代的网络来说算不了什么。
发布时间：2026/8/30 21:44:04 阅读次数：259