安培力的方向和大小互动课件

这个程序要实现的是人教版第一章 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 的基础，代码的其他部分也是比较简单的。……

完整代码

发布时间：2026/8/30 21:44:04  阅读次数：56