把 3D 搬进博客:用 Three.js 做了个旋转磁场演示

折腾记录  ·  2026-09-13

前几篇不是讲电机就是讲波形,今天换个玩法:把 3D 搬进博客。

做的时候定了三条线:

  1. 不依赖外部 CDN。国内访问国外 CDN 时好时坏,干脆把 Three.js 拷到站内自托管,整个演示离线也能跑。
  2. 手机能用。拖动旋转、双指缩放都做了,不是只能看的图。
  3. 零模型文件。几何体全是用代码拼的——线圈是圆环、磁钢是方块、机壳是圆环体,没有下载任何 .glb,所以加载特别轻。

目前放了两个场景:

  • 旋转磁场:三组线圈按 120° 摆开,三相电流各自的瞬时值用箭头长度表示,金色的合成磁场矢量匀速旋转——这就是 FOC 里那个 "电角度" 的几何来源。
  • BLDC 电机剖视:12 个定子齿 + 6 个绕组线圈,转子 4 块磁钢 N/S 交替,点「爆炸视图」可以把转子抬出来看结构。

想玩的话这里进 → 3D 实验室

代码是一个单文件 HTML,挂在 /games/3d-lab.html,想改配色或加减零件都在里面。

评论已关闭
suibian. All Rights Reserved. Jasmine
本站总访问  ·  访客