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

hi, 大家好, 我是徐小夕. 之前一直在社区分享零代码 &低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

H5-Dooring（页面可视化搭建平台）
V6.Dooring（可视化大屏搭建平台）
Flowmix/Docx 多模态文档编辑器: 让文档不止于文档

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

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

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

github地址：github.com/jscad/OpenJ...

代码案例

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

js 复制代码

// 创建3D基础形状
const jscad = require('@jscad/modeling')
const { cube, cuboid, cylinder, cylinderElliptic, ellipsoid, geodesicSphere, roundedCuboid, roundedCylinder, sphere, torus } = jscad.primitives
const { 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感兴趣，欢迎留言区反馈，记得点赞收藏+关注哦～