react-stl-viewer

React component for visualizing STLs using Three.js.

Install

npm install --save react-stl-viewer

or

yarn add react-stl-viewer

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {StlViewer} from "react-stl-viewer";

const url = "https://storage.googleapis.com/ucloud-v3/ccab50f18fb14c91ccca300a.stl"

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

function App() {
    return (
        <StlViewer
            style={style}
            orbitControls
            shadows
            url={url}
        />
    );
}

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

Demo

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

Props

| Prop | Type | Required | Notes | | ---------------------- | :------------------------: | :----------: | :----------------------------------------------------------: | | url | string | true | url of the Stl file | | modelProps | ModelProps | false | 3d model properties, see below | | floorProps | FloorProps | false | floor properties, see below | | shadows | boolean | false | render shadows projected by the model on the ground | | showAxes | boolean | false | show x y z axis | | orbitControls | boolean | false | enable camera orbit controls| | extraHeaders | Record<string, string> | false | custom headers for making the http query | | onFinishLoading | (ev: ModelDimensions) => any| false | callback triggered when Stl is fully loaded | | onError | (err: Error) => any | false | callback triggered when an error occurred while loading Stl| | canvasId | string | false | id of the canvas element used for rendering the model | The component also accepts <div/> props

Interfaces

ModelProps

| Prop | Type | Required | Notes | | ---------------------- | :------------------------: | :----------: | :----------------------------------------------------------: | | ref | {current: ModelRef} | false | reference of the 3d model for accessing it's properties | | scale | number | false | scale of the 3d model, defaults to 1 | | positionX | number | false | x coordinate in the world of the 3d model | | positionY | number | false | y coordinate in the world of the 3d model | | rotationX | number | false | rotation in x axis of the model | | rotationY | number | false | rotation in y axis of the model | | rotationY | number | false | rotation in z axis of the model | | color | CSSProperties['color'] | false | color of the 3d model, defaults to "grey" |

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 |

ModelDimensions

| Prop | Type | Notes | | ---------------------- | :------------------------: | :----------------------------------------------------------: | | boundingRadius | number | the radius of the bounding sphere of the 3d model before scaling | | width | number | width of the 3d object | | height | number | height of the 3d object | | length | number | length of the 3d object |