# 做了个 Step 3D图纸可视化的视频，效果一般，主要是我手里有真实的图纸，但是限于保密原则不能随便拿来玩，就从网上随便下了点S

作者：百里牛

发布时间：2026-11-04T05:53:19.000Z
更新时间：2026-11-04T06:48:12.992Z
原文：https://pkq.xyz/notes/step-3d-visualization
标签：3D资产、CadQuery、Grok、three.js

---

做了个 Step 3D图纸可视化的视频，效果一般，主要是我手里有真实的图纸，但是限于保密原则不能随便拿来玩，就从网上随便下了点Step 文件，所以显得不那么高端

模型转换用 Python，靠 CadQuery 2.8（底层是 OpenCascade 几何内核）读 STEP 文件，把实体切成三角网格，同时保留原来的面、棱边和孔的信息，再用 trimesh 导出成 GLB 格式。PDF 图纸用 PyMuPDF 转成图片，顺便读出标题栏里的料号和材料。

前端用 three.js 加 Vite 搭的。版画效果是自己写的 GLSL 着色器，按光照明暗画交叉排线和点描，再加一层描轮廓线和棱线的后处理，背景是纸色，地面画排线阴影。引线、字母标注和说明卡用普通的 HTML 和 CSS 叠在画面上，跟着 3D 坐标一起动。

写实金属那个模式用的是 three.js 自带的 PBR 材质。截图和转台视频是用无头 Chromium 软件渲染出来的，再用 ffmpeg 合成视频。

然后让 Grok Bot 接入我的 11labs API加配乐和音效，剪辑出成品

![视频预览](https://pkq.xyz/media/330ececa-feb7-4d49-8611-2153e966d158.webp)

[在 X 查看视频](https://x.com/i/status/2117857703624397028)

[查看 X 原文](https://x.com/i/status/2117857703624397028)