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 |