react-stl-viewer

React component for visualizing STLs using Three.js.

Install

``shell
npm install --save react-stl-viewer
`
or
`shell
yarn add react-stl-viewer
`

Usage

`js
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 (
style={style}
orbitControls
shadows
url={url}
/>
);
}

ReactDOM.render(, 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 | 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 `