最近在技術(shù)社區(qū)發(fā)現(xiàn)一款非常有意思的通過(guò)js實(shí)現(xiàn)的CAD 3D設(shè)計(jì)渲染工具——JSCAD。

圖片

借助 JSCAD，我們可以編寫簡(jiǎn)潔的 JavaScript 代碼來(lái)生成精確的 3D 模型，這些模型可以根據(jù)需要輕松調(diào)整參數(shù)，以滿足不同的設(shè)計(jì)需求。這種參數(shù)化設(shè)計(jì)的方式使得模型的修改和定制變得輕而易舉，大大提高了設(shè)計(jì)效率。

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

代碼案例

下面是一個(gè)簡(jiǎn)單的 JSCAD 代碼案例，用于創(chuàng)建上面演示的幾個(gè)立方體：

// 創(chuàng)建3D基礎(chǔ)形狀


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 }

當(dāng)然我們還能創(chuàng)建很多有意思的3D個(gè)2D圖案，并且都是通過(guò)javascript哦～

下面是我創(chuàng)建的幾個(gè)圖形的案例，大家可以參考一下：

圖片

圖片

下面是一個(gè)3D螺母的案例，像極了我大學(xué)用的CAD軟件！

圖片

為了讓大家更近一步了解這個(gè)項(xiàng)目，接下來(lái)我和大家分享一下它的功能亮點(diǎn)和應(yīng)用場(chǎng)景。

功能亮點(diǎn)

1. 參數(shù)化設(shè)計(jì)

JSCAD 的核心優(yōu)勢(shì)之一就是參數(shù)化設(shè)計(jì)。通過(guò)在代碼中定義參數(shù)，我們可以輕松地調(diào)整模型的尺寸、形狀和其他屬性。

2. 跨平臺(tái)支持

JSCAD 具有出色的跨平臺(tái)支持能力。我們可以在瀏覽器中直接使用它，無(wú)需安裝任何額外的軟件，只需打開(kāi)網(wǎng)頁(yè)即可開(kāi)始設(shè)計(jì)。同時(shí)，它也支持作為命令行工具在服務(wù)器端使用 Node.js 進(jìn)行計(jì)算，適用于自動(dòng)化生產(chǎn)流程。此外，還有實(shí)驗(yàn)性的桌面應(yīng)用版本，方便我們?cè)诒镜剡M(jìn)行測(cè)試。

3. 多種輸出格式

JSCAD 支持多種輸出格式，如 STL、AMF、DXF、JSON 和 X3D 等。這意味著可以將設(shè)計(jì)好的模型導(dǎo)出為不同的文件格式，以滿足不同的應(yīng)用需求。例如，STL 格式常用于 3D 打印，而 DXF 格式則適用于 CAD 軟件進(jìn)行進(jìn)一步的編輯。

4. 模塊化架構(gòu)設(shè)計(jì)

JSCAD 采用模塊化架構(gòu)，這使得它易于擴(kuò)展和定制。我們可以根據(jù)自己的需求選擇使用不同的模塊，或者開(kāi)發(fā)自己的模塊來(lái)實(shí)現(xiàn)特定的功能。這種模塊化的設(shè)計(jì)方式提高了代碼的可維護(hù)性和復(fù)用性，讓我們可以更加高效地進(jìn)行開(kāi)發(fā)。

應(yīng)用場(chǎng)景

圖片

接下來(lái)根據(jù)我自己對(duì)JSCAD能力的了解，和大家分享幾個(gè)潛在的應(yīng)用場(chǎng)景。

1. 3D 打印

由于 JSCAD 支持生成 STL 等 3D 打印常用的文件格式，它成為了 3D 打印領(lǐng)域的理想工具。我們可以使用 JSCAD 設(shè)計(jì)各種個(gè)性化的 3D 打印模型，如玩具、裝飾品、機(jī)械零件等。

2. 工業(yè)設(shè)計(jì)

圖片

在工業(yè)設(shè)計(jì)中，參數(shù)化設(shè)計(jì)是非常重要的。JSCAD 的參數(shù)化特性使得設(shè)計(jì)師可以快速創(chuàng)建和修改產(chǎn)品模型，進(jìn)行各種設(shè)計(jì)方案的驗(yàn)證和優(yōu)化。

3. 教育領(lǐng)域

JSCAD 以 JavaScript 為基礎(chǔ)，對(duì)于學(xué)習(xí)編程和 3D 設(shè)計(jì)的學(xué)生來(lái)說(shuō)是一個(gè)很好的工具。通過(guò)使用 JSCAD，學(xué)生可以在學(xué)習(xí)編程的同時(shí)，直觀地看到代碼生成的 3D 模型，提高學(xué)習(xí)的興趣和效果。

4. 數(shù)據(jù)可視化

圖片

JSCAD 不僅可以用于創(chuàng)建實(shí)體模型，還可以用于數(shù)據(jù)可視化。你可以將數(shù)據(jù)轉(zhuǎn)換為 3D 模型，通過(guò)不同的顏色、形狀和大小來(lái)表示數(shù)據(jù)的不同特征，從而更直觀地展示數(shù)據(jù)。