2025 年 3 月 24 日发布了名为Skapa的迷你应用,用于生成宜家 Skadis 挂板的 3D 打印模型,此篇文章介绍了 UI 和 UX 决策,以及模型生成和渲染技术(使用 Three.js)。
- UI/UX 考虑:设计像宜家手册,采用黑白配色、大字体和黑色轮廓,与实际手册有字体、视角等差异,界面力求极简,不断优化,如实现了简单的垂直旋转控制,在移动端解决了捕获事件导致页面滚动问题。
- 技术细节:模型生成用manifold库(C++编译为 Wasm 可在浏览器使用且发布在
npm
),部分用 Three.js 渲染,其原生“outline material”不能满足需求,通过 Two.js 的EffectComposer
和两个 WebGL 着色器实现边缘检测来添加轮廓,第一个 pass 实现边缘检测算法,第二个 pass 加厚轮廓。 - 后续计划:会继续完善,比如添加更多模型(不限于宜家)、增加调整底部和壁厚度的控制、改进 3D 打印相关细节(如解决 clips 下需要支撑的问题),代码在GitHub,打印说明在Printables,欢迎反馈和报告问题,还推荐了关于 JavaScript 和 WebGL 的相关文章。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。