react-gcode-viewer

React component for visualizing GCodes using Three.js.

Install

npm install --save react-gcode-viewer

or

yarn add react-gcode-viewer

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {GCodeViewer} from "react-gcode-viewer";

const url = "https://storage.googleapis.com/ucloud-v3/6127a7f9aa32f718b8c1ab4f.gcode"

const style = {
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
}

function App() {
    return (
        <GCodeViewer
            orbitControls
            showAxes
            style={style}
            url={url}
        />
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

Demos

You can see working the examples from .storybook/stories here

Props

Prop	Type	Required	Notes
url	string	true	url of the GCode file
quality	number	false	(default 1) number between 0 and 1 specifying the render quality, for larger models it's recommended to lower this number, as it consumes a lot of resources
visible	number	false	(default 1) number between 0 and 1 specifying the percentage of visible layers
layerColor	string	false	(default "grey") layer color
topLayerColor	string	false	(default "hotpink") top layer color
showAxes	boolean	false	show x y z axis
orbitControls	boolean	false	enable camera orbit controls
cameraInitialPosition	CameraInitialPosition	false	set the initial position of the camera in geographic coordinates. The coordinates origin is the object itself
floorProps	FloorProps	false	floor properties, see below
reqOptions	RequestInit	false	fetch options for customizing the http query made for retrieving the GCode file, only valid if "url" is specified
onProgress	(p: GCodeParseProgress) => any	false	callback triggered on parsing progress
onFinishLoading	(p: GCodeParseProgress) => any	false	callback triggered when GCode is fully loaded
onError	(err: Error) => any	false	callback triggered when an error occurred while loading GCode
canvasId	string	false	id of the canvas element used for rendering the model

The component also accepts <div/> props

Interfaces

FloorProps

Prop	Type	Required	Notes
gridWidth	number	false	if specified, a grid will be drawn in the floor with this width
gridLength	number	false	if specified, a grid will be drawn in the floor with this length

GCodeParseProgress

Prop	Type	Notes
read	number	number of bytes read from the url
baseCenter	{x: number, y: number}	x, y center of the rendered gcode model
max	{x: number, y: number, z: number}	maximum coordinates of the gcode model
min	{x: number, y: number, z: number}	minimum coordinates of the gcode model
filamentLength	number	length of the filament used in mm

CameraInitialPosition

Prop	Type	Required	Notes
latitude	number	true	camera's position latitude, it should be a number between - Math.PI / 2 and Math.PI / 2, if the number exceeds the limits it will be clamped
longitude	number	true	camera's position longitude, it should be a number between - Math.PI and Math.PI, if the number exceeds the limits it will be clamped
distance	number	true	the distance between the object and the camera