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感兴趣,欢迎留言区反馈,记得点赞收藏+关注哦~

相关推荐
大龄大专大前端1 小时前
JavaScript闭包的认识/应用/原理
前端·javascript·ecmascript 6
字节源流1 小时前
【SpringMVC】常用注解:@SessionAttributes
java·服务器·前端
肥肠可耐的西西公主1 小时前
前端(vue)学习笔记(CLASS 4):组件组成部分与通信
前端·vue.js·学习
Mountain and sea1 小时前
于 Hexo + GitHub Pages 的搭建个人博客网站的详细教程
github
烛阴1 小时前
JavaScript 函数绑定:从入门到精通,解锁你的代码超能力!
前端·javascript
花椒和蕊1 小时前
【vue+excel】导出excel(目前是可以导出两个sheet)
javascript·vue.js·excel
泫凝2 小时前
使用 WebP 优化 GPU 纹理占用
前端·javascript
magic 2452 小时前
CSS块元素、行内元素、行内块元素详解
前端·css
returnShitBoy2 小时前
前端面试:React hooks 调用是可以写在 if 语句里面吗?
前端·javascript·react.js
love黄甜心2 小时前
Sass:深度解析与实战应用
前端·css·sass