跳轉到內容

OpenJSCAD 快速參考

來自華夏公益教科書,開放世界的開放書籍

這是一個 V1 過時的文件,已棄用,請參見 https://github.com/jscad/OpenJSCAD.org/issues/783.

該頁面提供了 OpenJSCAD 和 CSG 庫函式的快速參考。

OpenJSCAD 使用者指南

CSG 和 CAG 使用者指南

注意: **預設值** 和 **說明** 以 **粗體字** 突出顯示。

一般用法

[編輯 | 編輯原始碼]
OpenJSCAD 函式 JavaScript 語句
function main(parameters) { ...; return var; } /* 必須的 */ var name = my_box( {attribute: 1, ...} ); /* 呼叫函式 */
function getParameterDefinitions() {return [ definition... ]; } /* 可選的 */ function my_box( param ) { ...; return shape; } /* 建立函式 */
OpenJsCad.log("message"); /* 顯示訊息和時間戳 */ console.log("message"); /* 顯示訊息 */
include... for (index = 0; index < array.length; index--;) { ... };

注意: 訊息顯示在瀏覽器中的 Javascript 控制檯中。

注意: 如果未提供,則建立圓角形狀時使用預設解析度。

 * CSG.defaultResolution2D: 32
 * CSG.defaultResolution3D: 12

基本形狀

[編輯 | 編輯原始碼]
2D 基本形狀 3D 基本形狀
var rectangle = CAG.rectangle(); /* 中心: [0,0], 半徑: [1,1] */ var cube = CSG.cube(); /* 中心: [0,0,0], 半徑: [1,1,1] */
var rectangle = CAG.rectangle({center: [1,2], radius: [1, 2]}); var cube = CSG.cube({center: [1, 2, 3], radius: [1, 2, 3]});
var rectangle = CAG.roundedRectangle(); /* 中心: [0,0], 半徑: [1,1], 圓角半徑: 0.2, 解析度: 32 */ var cube = CSG.roundedCube(); /* 中心: [0,0,0], 半徑: [1,1,1] 圓角半徑: 0.2, 解析度: 12 */
var rectangle = CAG.roundedRectangle({center: [1,2], radius: [1, 2], roundradius: 1, resolution:32}); var cube = CSG.roundedCube({center: [0, 0, 0], radius: [3,3,3], roundradius: 0.5, resolution: 32});
var circle = CAG.circle(); /* 中心: [0,0], 半徑: [1,1], 解析度: 32 */ var sphere = CSG.sphere(); /* 中心: [0,0,0], 半徑: 1, 解析度: 12 */
var circle = CAG.circle({center: [1,2], radius: 3, resolution: 72}); var sphere = CSG.sphere({center: [1, 2, 3], radius: 4, resolution: 36});
var cylinder = CSG.cylinder(); /* 起始: [0, -1, 0], 結束: [0, 1, 0], 半徑: 1, 解析度: 32 */
var cylinder = CSG.cylinder({start: [1, 2, 3], end: [4, 5, 6], radiusStart: 7, radiusEnd: 8, resolution: 72});
var cylinder = CSG.roundedCylinder(); /* 起始: [0,-1,0], 結束: [0,1,0], 半徑: 1, 解析度: 12 */
var cylinder = CSG.roundedCylinder({start: [10,11,12], end: [13,14,15], radius: 16, resolution: 6});
var ellipse = CAG.ellipse({center: [5,5], radius: [10,20],resolution: 72}); var cylinder = CSG.cylinderElliptic({start: [0,-10,0],end: [0,10,0],radiusStart: [10,5],radiusEnd: [5,2.5],resolution: 16});
var cag = CAG.fromPoints([ [0,0],[5,0],[3,5],[0,5] ]); /* 多邊形,至少 3 個點 */ var csg = CSG.fromPolygons([polygon, ...]);
var cag = CAG.fromSides([side,...]); /* 多邊形,至少 1 個邊 */

形狀變換

[編輯 | 編輯原始碼]

形狀變換始終返回一個新形狀,而不會更改原始形狀。可以透過重新分配原始形狀來更改原始形狀,例如這樣。

var a = cube();
a = a.rotateX(45);
2D 變換 3D 變換
2Dshape = 2Dshape.translate([-2, -2]); 3Dshape = 3Dshape.translate([1,2,3]);
2Dshape = 2Dshape.rotateZ(20); 3Dshape = 3Dshape.rotateX(90);
3Dshape = 3Dshape.rotateY(-180);
3Dshape = 3Dshape.rotateZ(45);
2Dshape = 2Dshape.rotate(center, axis, degrees); 2Dshape = 2Dshape.rotate(center, axis, degrees);
2Dshape = 2Dshape.rotateEulerAngles(alpha, beta, gamma, position); 2Dshape = 2Dshape.rotateEulerAngles(alpha, beta, gamma, position);
2Dshape = 2Dshape.scale([0.7, 0.9]); 3Dshape = 3Dshape.scale([1,2,3]);
2Dshape = 2Dshape.center(); /* 居中 X & Y 軸 */ 3Dshape = 3Dshape.center(); /* 居中 X & Y & Z 軸 */
2Dshape = 2Dshape.center('x'); 3Dshape = 3Dshape.center('x','z');
2Dshape = 2Dshape.mirroredX(); 3Dshape = 3Dshape.mirroredX();
2Dshape = 2Dshape.mirroredY(); 3Dshape = 3Dshape.mirroredY();
::: 3Dshape = 3Dshape.mirroredZ();
2Dshape = 2Dshape.mirrored(plane); 3Dshape = 3Dshape.mirrored(plane);
2Dshape = 2Dshape.transform(matrix); 3Dshape = 3Dshape.transform(matrix);
/* 尚未支援 */ 3Dshape = 3Dshape.setColor(r,g,b); /* a = 1.0 */
::: 3Dshape = 3Dshape.setColor(r,g,b,a);
::: 3Dshape = 3Dshape.setColor([r,g,b]); /* a = 1.0 */
::: 3Dshape = 3Dshape.setColor([r,g,b,a]);
2Dshape = 2Dshape.expand(0.2, 8); /* 半徑, 解析度 */ 3Dshape = 3Dshape.expand(0.2, 8); /* 半徑, 解析度 */
2Dshape = 2Dshape.contract(0.2, 8); /* 半徑, 解析度 */ 3Dshape = 3Dshape.contract(0.2, 8); /* 半徑, 解析度 */

形狀變換可以串聯在一起。例如:

var 3Dshape = CSG.cube().rotate(45).translate([20,0,10]).setColor(1,0.5,0.3);

形狀操作

[編輯 | 編輯原始碼]

形狀操作始終返回一個新形狀,而不會更改原始形狀。可以透過重新分配原始形狀來更改原始形狀,例如這樣。

var a = cube();
a = a.intersect(sphere());
2D 操作 3D 操作
2Dshape = 2DshapeA.union(2DshapeB); 3Dshape = 3DshapeA.union(3DshapeB);
2Dshape = 2DshapeA.subtract(2DshapeB) 3Dshape = 3DshapeA.subtract(3DshapeB);
2Dshape = 2DshapeA.intersect(2DshapeB); 3Dshape = 3DshapeA.intersect(3DshapeB);
3Dshape = 3DshapeA.inverse(3DshapeB); /* 反轉實體和空的空間 */

尺寸轉換

[編輯 | 編輯原始碼]
2D 到路徑轉換
var Path2DArray = 2Dshape.getOutlinePaths();
2D 到 3D 轉換
3DShape = 2Dshape.extrude(); /* 偏移: [0,0,1], 扭曲角: 0, 扭曲步數: 12 */
3DShape = 2Dshape.extrude({offset: [0,0,50], twistangle: 360, twiststeps: 100});
3DShape = 2Dshape.rotateExtrude({offset: [0,0,50], twistangle: 360, twiststeps: 100}); /* 角: 360, 解析度: 12 */
3Dshape = 2Dpath.rectangularExtrude(3, 4, 16, true); /* w, h, 解析度, 圓角端點 */
3D 到 2D 轉換
待定

類似 OpenSCAD 的函式

[編輯 | 編輯原始碼]

這些函式簡化了從 OpenSCAD(類似 Lisp)到 **OpenJSCAD**(JavaScript 和物件)的設計轉換。

2D 基本形狀 3D 基本形狀
var shape = circle(); /* r: 1, 中心: false, fn: 32 */ var shape = sphere(radius);
var shape = circle({r: 2,center: false, fn: 16}); var shape = sphere(d); /* 直徑 */
var shape = square(); /* [1,1], 中心: false */ var shape = cube(size,center);
var shape = square(5); /* 等效於 square([5,5]) */ var shape = cube(size,center);
var shape = square( [4,5],{center: true} ); var shape = cube([width,height],center);
var shape = cylinder(h,r,center);
var shape = cylinder(h,r1,r2,center);
var shape = polygon( [[0,3],[3,3],[3,0]] ); polyhedron(points,triangles,convexity)
var shape = polygon([points],[paths]); polyhedron(points,triangles,convexity)
2D 形狀
var path = vector_char(10,-10, 'A'); /* X 軸, Y 軸, 字元 */
var array_of_paths = vector_text(10,-10, 'Letters'); /* X 軸, Y 軸, 字串 */

注意: OpenSCAD 中的 text() 函式不受支援。

互動式引數

[編輯 | 編輯原始碼]

透過宣告一個特殊的函式 getParameterDefinitions(),設計可以具有互動式引數。

此函式必須返回一個引數定義陣列,如下所示。

function getParameterDefinitions() {
    return [
        { name: 'length', type: 'int', initial: 150, caption: 'Length?' }, 
        { name: 'width', type: 'int', initial: 100, caption: 'Width?' },
    ];
}

引數被評估,值被傳遞到 main 函式。請確保正確宣告 main 函式。

function main(params) {
  var l = params.length;
  var w = params.width;
...

引數型別

[編輯 | 編輯原始碼]

引數被定義為單個 HTML5 表單上的輸入欄位,即引數列表。有關 HTML5 輸入欄位的更多資訊,請參見 W3 Schools 中的一些示例。

注意: 瀏覽器並不相同,會將不支援的引數型別視為 TEXT。

型別 示例 返回值
checkbox {name: 'bigorsmall', type: 'checkbox', checked: true, caption: 'Big?'} 如果選中,則為 true,否則為 false
checkbox {name: 'bigorsmall', type: 'checkbox', checked: true, initial: 20, caption: 'Big?'} 如果選中,則為 20,否則為 false
color { name: 'color', type: 'color', initial: '#FFB431', caption: 'Color?' } "#rrggbb",使用 html2rgb() 轉換
date {name: 'birthday', type: 'date', caption: 'Birthday?'} "YYYY-MM-DD"
email {name: 'address', type: 'email', caption: 'Email Address?'} 字串值
float {name: 'angle', type: 'number', initial: 2.5, step: 0.5, caption: '角度?'} 浮點數
整數 {name: 'age', type: 'int', initial: 20, caption: '年齡?'} 整數值
數字 {name: 'angle', type: 'number', initial: 2.5, step: 0.5, caption: '角度?'} 浮點數
密碼 {name: 'password', type: 'password', caption: '密碼?'} 字串值
滑塊 {name: 'count', type: 'slider', min: 2, max: 10, caption: '多少個?'} 浮點數
文字 {name: 'name', type: 'text', caption: '姓名?'} 字串值
網址 {name: 'webpage', type: 'url', caption: '網頁地址?'} 字串值
分組 { name: 'balloon', type: 'group', caption: '氣球' } 無,僅顯示

注意:引數可以接受額外的限制和輔助。這些包括“initial”,“max”,“maxLength”,“min”,“pattern”,“placeholder”,“size”和“step”。

華夏公益教科書