JSCAD 不仅可以用于创建实体模型,还可以用于数据可视化。你可以将数据转换为 3D 模型,通过不同的颜色、形状和大小来表示数据的不同特征,从而更直观地展示数据。
最近在技术社区发现一款非常有意思的通过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.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 }
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
当然我们还能创建很多有意思的3D个2D图案,并且都是通过javascript哦~
下面是我创建的几个图形的案例,大家可以参考一下:
图片
图片
下面是一个3D螺母的案例,像极了我大学用的CAD软件!
图片
为了让大家更近一步了解这个项目,接下来我和大家分享一下它的功能亮点和应用场景。
功能亮点
- 参数化设计
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 模型,通过不同的颜色、形状和大小来表示数据的不同特征,从而更直观地展示数据。