JSCAD：一款JavaScript驱动的开源3D设计神器

hi, 大家好, 我是徐小夕. 

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

• H5-Dooring（页面可视化搭建平台）

• V6.Dooring（可视化大屏搭建平台）

• Flowmix/Docx 多模态文档编辑器: 让文档不止于文档
  

上篇文章和大家分享了我们做的Dooring AI能力，通过对话就能生成一个可二次编辑页面：

最近在技术社区发现一款非常有意思的通过js实现的CAD 3D设计渲染工具——JSCAD。

借助 JSCAD，我们可以编写简洁的 JavaScript 代码来生成精确的 3D 模型，这些模型可以根据需要轻松调整参数，以满足不同的设计需求。这种参数化设计的方式使得模型的修改和定制变得轻而易举，大大提高了设计效率。

github地址：https://github.com/jscad/OpenJSCAD.org

代码案例

下面是一个简单的 JSCAD 代码案例，用于创建上面演示的几个立方体：

// 创建3D基础形状
const jscad = require('@jscad/modeling')const { cube, cuboid, cylinder, cylinderElliptic, ellipsoid, geodesicSphere, roundedCuboid, roundedCylinder, sphere, torus } = jscad.primitivesconst { translate } = jscad.transforms
const main = () => {  const allPrimitives = [    cube(),    cuboid({ size: [1, 2, 3] }),    roundedCuboid({ size: [2, 3, 2], roundRadius: 0.4, segments: 32 }),    roundedCuboid({ size: [1, 2, 3], roundRadius: 0.4, segments: 16 }),    sphere({ radius: 2, segments: 16 }),    geodesicSphere({ radius: 1.5, segments: 16 }),    ellipsoid({ radius: [2, 1, 1.5], segments: 64, axes: [[1, 1, 0], [0, -1, 1], [-1, 0, 1]] }),    cylinder({ radius: 1, height: 5 }),    roundedCylinder({ radius: 1, height: 8, roundRadius: 0.8 }),    cylinderElliptic({ height: 8, startRadius: [1, 2], startAngle: 0, endRadius: [1, 2], endAngle: (Math.PI / 8), segments: 32 }),    cylinder({ start: [0, 0, 0], end: [3, 3, 10], radius: 1 }),    torus({ innerRadius: 1, outerRadius: 1.2 }),    torus({ innerRadius: 1, outerRadius: 1.5, innerSegments: 4, outerSegments: 6, innerRotation: 0 })  ]
  return allPrimitives.map((primitive, index) => translate([(index % 4 - 2) * 6, Math.floor(index / 4 - 2) * 6, 0], primitive))}
module.exports = { main }

当然我们还能创建很多有意思的3D个2D图案，并且都是通过javascript哦～

下面是我创建的几个图形的案例，大家可以参考一下：

下面是一个3D螺母的案例，像极了我大学用的CAD软件！

为了让大家更近一步了解这个项目，接下来我和大家分享一下它的功能亮点和应用场景。

功能亮点

1. 参数化设计

JSCAD 的核心优势之一就是参数化设计。通过在代码中定义参数，我们可以轻松地调整模型的尺寸、形状和其他属性。

2. 跨平台支持

JSCAD 具有出色的跨平台支持能力。我们可以在浏览器中直接使用它，无需安装任何额外的软件，只需打开网页即可开始设计。同时，它也支持作为命令行工具在服务器端使用 Node.js 进行计算，适用于自动化生产流程。此外，还有实验性的桌面应用版本，方便我们在本地进行测试。

3. 多种输出格式

JSCAD 支持多种输出格式，如 STL、AMF、DXF、JSON 和 X3D 等。这意味着可以将设计好的模型导出为不同的文件格式，以满足不同的应用需求。例如，STL 格式常用于 3D 打印，而 DXF 格式则适用于 CAD 软件进行进一步的编辑。

4. 模块化架构设计

JSCAD 采用模块化架构，这使得它易于扩展和定制。我们可以根据自己的需求选择使用不同的模块，或者开发自己的模块来实现特定的功能。这种模块化的设计方式提高了代码的可维护性和复用性，让我们可以更加高效地进行开发。

应用场景

接下来根据我自己对JSCAD能力的了解，和大家分享几个潜在的应用场景。

1. 3D 打印

由于 JSCAD 支持生成 STL 等 3D 打印常用的文件格式，它成为了 3D 打印领域的理想工具。我们可以使用 JSCAD 设计各种个性化的 3D 打印模型，如玩具、装饰品、机械零件等。

2. 工业设计

在工业设计中，参数化设计是非常重要的。JSCAD 的参数化特性使得设计师可以快速创建和修改产品模型，进行各种设计方案的验证和优化。

3. 教育领域

JSCAD 以 JavaScript 为基础，对于学习编程和 3D 设计的学生来说是一个很好的工具。通过使用 JSCAD，学生可以在学习编程的同时，直观地看到代码生成的 3D 模型，提高学习的兴趣和效果。

4. 数据可视化

JSCAD 不仅可以用于创建实体模型，还可以用于数据可视化。你可以将数据转换为 3D 模型，通过不同的颜色、形状和大小来表示数据的不同特征，从而更直观地展示数据。

后面我打算花时间做一个简单版本的3D设计器，方便大家可以线上通过拖拽式的搭建3D设计模型，JSCAD完全有这个潜力胜任，如果你也对可视化零代码 + AI感兴趣，欢迎进群学习交流：

如果大家觉得今天的分享有收获，记得点赞收藏+关注哦～

最后

每个月我们都会根据用户的反馈和迭代计划持续迭代可视化零代码和多模态文档, 大家可以关注flowmix视界公众号获取最新更新的信息.

往期更新:

我们把Dooring零代码接入了AI，一句命令，自动生成页面

flowmix/docx, 支持超大PDF/Docx文件解析的多模态文档编辑器

市面上大多数文档编辑器的【划线评论】功能，是如何实现的？

多模态文档+思维导图：引领内容创作新潮流