Zeichnen

2D Basisformen

const {line, arc, circle, ellipse, rectangle} = jscad.primitives;

2D-Formen (2D primitives) sind ein guter Startpunkt. Man kann später Extrusion- oder ExpansionFunktionen nutzen, um aus den 2D-Formen 3D-Körper zu generieren (siehe 3D / Extrusion).

Die Dokumentation aller 2D Primitives findet sich hier.

Linie

Der line-Befehl benötigt ein Array mit x/y-Koordinaten:

const shape = line([
  [x1, y1],
  [x2, y2]
]);

Man kann auch mehr Punkte übergeben, um einen Pfad zu generieren.

Kreisbogen

Der arc-Befehl generiert ebenfalls eine Linie und funktioniert ähnliche wie der arc-Befehl bei p5js:

const shape = arc({
  center: [0, 0],
  radius: 1,
  startAngle: 0,
  endAngle: Math.PI * 2, //full arc
  segments: 32 // level of detail
});

Fast alle Attribute der Parameter-Objekte sind optional, jede Funktion hat immer Standardwerte die bei fehlenden Attributen eingesetzt werden.

Kreis

const shape = circle({
  center: [0, 0],
  radius: 1,
  startAngle: 0,
  endAngle: Math.PI * 2, //full arc
  segments: 32 // level of detail
});

Das circle-Kommando sieht genauso aus, wie das arc-Kommando, der Unterschied ist, dass arc einen Pfad zurückgibt und circle ein Polygon.

Ellipse

Der circle-Befehl und der ellipse-Befehl akzeptieren ähnliche Parameter, im Gegensatz zum Kreis, kann man bei der Ellipse den Radius als Array angeben, um unterschiedliche Breiten- und Höhenangaben zu machen:

const shape = ellipse({
  center: [0, 0],
  radius: [1,1],
  startAngle: 0,
  endAngle: Math.PI * 2, //full arc
  segments: 32 // level of detail
});

Alle Formen oder Körper die Rundungen aufweisen, haben ein segments-Attribut. Hierüber können wir den Detailgrad / Rundung der Kurven definieren. Mehr Segmente generieren rundere Kurven, gleichzeitig führen mehr Segmente auch zu mehr Vertices (größere Dateien, längere Renderingzeiten, etc.).

Rechteck

const shape = rectangle({
  size: [2, 2],
  center: [0, 0, 0]
});

3D-Körper (primitives)

const {cube, sphere, cylinder} = jscad.primitives;

Die Dokumentation aller Primitives gibt es hier.

Würfel

const shape = cube({
  size: 1,
  center: [0, 0, 0]
});

Kugel

const shape = sphere({
  radius: 1,
  center: [0, 0, 0]
});

Zylinder

const shape = cylinder({
  center: [0, 0, 0],
  height: 2,
  radius: 1,
  segments: 32
});

Hier sind ein paar weitere 3D primitives, Beispiele dafür wie man diese Konstruiert sind in der Boilerplate enthalten:

Aufgabe: JSCAD kennenlernen

Erkunde die verschiedenen 2D und 3D primitives. Experimenteire mit den veschiedenen Properties und wie diese den output verändern.

Zurück zum Anfang