EASEL.js

misc

exporter / gcode

What this shows

Place a cube, cylinder, cone, sphere, or torus on a Z-up build plate and slice the selected mesh into G-code text.

Side by side with the three.js r186 original: misc_exporter_gcode.html

Differences from three.js

  • EASEL slices with its built-in GCodeExporter, which writes perimeter paths only; three.js loads the external Polyslice library from a CDN, which also applies the printer, filament, and infill settings.
  • The Printer, Filament, Infill Density, and Infill Pattern controls have no EASEL equivalent and change nothing on the EASEL side; only Layer Height reaches GCodeExporter.
  • The lil-gui buttons become two select controls: Geometry picks the mesh, and switching Export to Export G-code runs the slicer once.
  • The export is not downloaded as a .gcode file; both sides log the G-code text length with console.info instead, because the example contract gives the module only a canvas and no place for a status element.
  • The three.js side still loads Polyslice from cdn.jsdelivr.net, but only when an export is requested, and reports failures with console.error instead of alert().
  • EASEL bakes Lambert lighting per vertex (Gouraud), so curved shapes show interpolated shading instead of per-pixel lighting.
EASEL (Canvas2D)
This example needs a canvas-capable browser.

Loading scene…

three.js r186 (WebGL)
This example needs a canvas-capable browser.

Loading scene…

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


EASEL.DEFAULT_UP.set(0, 0, 1);
camera.up.set(0, 0, 1);

const mesh = new EASEL.Mesh(
  new EASEL.BoxGeometry(10, 10, 10),
  new EASEL.LambertMaterial({ color: 0x00cc00 }),
);
mesh.updateMatrixWorld(false, true, true);
const box = new EASEL.Box3().setFromObject(mesh);
mesh.position.z -= box.min.z;

const gcode = new EASEL.GCodeExporter().parse(mesh, { layerHeight: 0.2 });
console.info(`cube-geometry.gcode: ${gcode.length} characters`);