gcode-viewer

on npmjs.com

This is a basic GCode viewer lib for js / ts.
It is specifically built for GoSlice but may also work with GCode from other slicers.
In contrast to other GCode viewers this one renders the lines using a mesh instead of lines. This is done because
several browser-OS combination do not support line thickness rendering other than '1'.

!gcode-viewer

Features

- slicing the viewed lines either by layer or line by line
- line thickness based on the extrusion amount
- colorize the lines based on line-metadata such as temperature, speed or gcode line
- changeable amount of radial segments per line - less (e.g. 3) is faster and needs less RAM, more (e.g. 8 -> the default) may look better.
- uses orbit controls from three js
- relative movement for xyz and extrusion

Contribution

You are welcome to help.
Just look for open issues and pick one, create new issues or create new pull requests.

Usage

$3

Take a look at this example.
Or the extended example with some controls
Also take a look here.

$3

3D Printer callibration tool using the gcode-viewer

$3

``js
import { GCodeRenderer, Color, SpeedColorizer } from "gcode-viewer";

const renderer = new GCodeRenderer(gcodeString, 800, 600, new Color(0x808080));

// This is an example using the Speed colorizer.
// Other options are:
// * SimpleColorizer (default) - sets all lines to the same color
// * SpeedColorizer - colorizes based on the speed / feed rate
// * TempColorizer - colorizes based on the temperature
// * LineColorizer - colorizes based on the gcodeLine
renderer.colorizer = new SpeedColorizer(
this.renderer.getMinMaxValues().minSpeed || 0,
this.renderer.getMinMaxValues().maxSpeed,
);

document.getElementById("gcode-viewer").append(renderer.element());

renderer.render().then(() => console.log("rendering finished"));
`

$3

Just call renderer.resize(width, height) whenever the size changes.

$3

To only show specific parts of the model you can use this:

- renderer.sliceLayer(minLayer, maxLayer) to slice based on the layer
- renderer.slice(minPointNr, maxPointNr) to slice based on the amount of points

For both see the documentation in the code/comments.

To get information about the start and end of specific layers, you can use:
renderer.getLayerDefinition(layerIndex)

Or to get all layer definitions at once:
renderer.getLayerDefinitions()
renderer.getLayerDefinitionsNoCopy() (use only if you know what you are doing)

Note: The layer definitions are only available after the first render.

$3

To save some Memory and speedup the rendering a bit, you can reduce
the amount of planes per segment used:

`js
renderer.radialSegments = 3;
`

The default is 8.

$3

You can change the line width of travel lines:

`js
renderer.travelWidth = 0.1;
`

The default is 0.01. 0 is also possible to completely hide them.

$3

The default for sectioning the layers is determining the layers based on changing z-values on the gcode.
However, If the user wants layers to be taken from the comments of the Gcode such as ;LAYER:1. they can specify the lineType as:

`js
renderer.layerType = LayerType.LAYER_COMMENTS;
`

$3

If you have a dual extruder printer the gcode paths for the second extruder may be offset. To correctly render the paths you can set the nozzle offsets:

`js
renderer.nozzleOffsets = [
new gcodeViewer.Vector2(0, 0),
new gcodeViewer.Vector2(10, 10),
]
`

$3

Both, the scene and the whole three.js is exported, so you can use it.
For example you can customize the scene setup:

`js
renderer.setupScene = () => {
// Set up some lights. (use different lights in this example)
const ambientLight = new gcodeViewer.THREE.AmbientLight(0xff0000, 0.5);
renderer.scene.add(ambientLight);

const spotLight = new gcodeViewer.THREE.SpotLight(0x00ff00, 0.9);
spotLight.position.set(200, 400, 300);
spotLight.lookAt(new gcodeViewer.THREE.Vector3(0, 0, 0));

const spotLight2 = new gcodeViewer.THREE.SpotLight(0x0000ff, 0.9);
spotLight2.position.set(-200, -400, -300);
spotLight2.lookAt(new gcodeViewer.THREE.Vector3(0, 0, 0));
renderer.scene.add(spotLight);
renderer.scene.add(spotLight2);

renderer.fitCamera();
};
renderer.render().then(() => console.log("rendering finished"));
``