@gcode-viewer/core

WebGL 3D print preview engine built on Three.js. Preview slicer GCode toolpaths in the browser (GCodeViewer), plus a CAD / mesh viewer (Viewer3d) for common print-industry formats such as STL, OBJ, and glTF — no server required for local files.

Reference app: https://gcode.thingraph.site/ (Vue app in gcode-viewer-web, built on this package plus @gcode-viewer/plugins and @gcode-viewer/ui).

Built with @gcode-viewer/core

| Application | Description | |---|---| | gcode.thingraph.site | Thingraph GCode Viewer — GCode preview and CAD Viewer pages |

Supported formats

GCodeViewer — gcode, gco, nc

Viewer3d — gltf, glb, obj, fbx, stl, ply, dae, 3dm, stp/step, igs/iges (STEP / IGES via @gcode-viewer/plugins loaders)

Features

• GCode preview — client-side parse/render of slicer toolpaths; layer / step scrubbing, legend, and text panel via plugins
• CAD / 3D — orbit, load common mesh formats; measure, section, screenshot, tree view, settings via plugins
• Local-first — files stay in the browser for viewing (optional URL load needs CORS)
• Modular — engine in core; chrome and loaders in plugins / ui
• TypeScript — full type definitions

Installation

pnpm add @gcode-viewer/core @gcode-viewer/plugins
# or
npm install @gcode-viewer/core @gcode-viewer/plugins

Quick Start

GCodeViewer

import { GCodeViewer } from "@gcode-viewer/core";
import { GCodeLegendPlugin, GCodeLayerBarPlugin } from "@gcode-viewer/plugins";

const viewer = new GCodeViewer({ containerId: "myCanvas" });
new GCodeLayerBarPlugin(viewer);
new GCodeLegendPlugin(viewer);
await viewer.loadModel({ modelId: "print", src: "path/to/model.gcode" });

Viewer3d

import { Viewer3d } from "@gcode-viewer/core";

const viewer = new Viewer3d({ containerId: "myCanvas" });
await viewer.loadModel({ modelId: "model", src: "path/to/model.stl" });

API Examples

Loading with Progress

await viewer.loadModel(
    { modelId: "m1", src: "./models/part.gcode" },
    (event) => {
        const pct = (event.loaded / event.total) * 100;
        console.log(`${pct.toFixed(0)}%`);
    }
);

Camera Control

import { CameraProjection, THREE } from "@gcode-viewer/core";

viewer.cameraManager.setProjection(CameraProjection.Perspective);
viewer.cameraManager.flyToViewpoint({
    eye: new THREE.Vector3(100, 50, 100),
    look: new THREE.Vector3(0, 0, 0),
});
viewer.zoomToBBox(new THREE.Box3(min, max));

Using Three.js

Import Three.js from this package to avoid version conflicts:

import { THREE, THREEAddons } from "@gcode-viewer/core";

const vector = new THREE.Vector3(0, 0, 0);
viewer.zoomToBBox(new THREE.Box3(min, max));

Coordinate System & Units

• Coordinate system: Right-handed, Z-up (slicer / CAD; Three.js default is Y-up)
  • +X: right | -X: left
  • +Y: back (into the screen) | -Y: front
  • +Z: up | -Z: down
  • GCode, STL, and OBJ are imported as-is. glTF / FBX / DAE / PLY (Y-up) are rotated +90° around X on import.
• Length: Millimeter | Area: mm² | Angle: Degrees, CCW | Time: Milliseconds

Related Packages

| Package | Description | |---------|-------------| | @gcode-viewer/plugins | Layer / steps bars, legend, text panel, toolbar, measure, screenshot, … | | @gcode-viewer/ui | Shared panels and widgets |

Links

• Live app
• Privacy Policy
• Contact: [email protected]

License

UNLICENSED — contact [email protected] for licensing inquiries.