Skip to content

React component for visualizing GCodes in the browser using three.js

Notifications You must be signed in to change notification settings

gabotechs/react-gcode-viewer

Repository files navigation

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