canvas

loader / gcode

What this shows

Parse 3D-printer G-code with GCodeLoader and draw extrusion and travel moves as colored line segments.

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

Differences from three.js

  • The default asset is test_m82 and the asset selector offers only test_m82 and test_m83; benchy.gcode (3DBenchy) is omitted because its license is unclear.
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";


const loader = new EASEL.GCodeLoader();
const model = loader.parse(gcodeText);
model.position.set(0, 0, 0);

scene.add(model);

const orbit = new EASEL.OrbitControls(camera, canvas);
orbit.minDistance = 10;
orbit.maxDistance = 100;
orbit.reset();