React-stl-viewer-improved NPM

react-stl-viewer

React component for visualizing STLs using Three.js.

Install

npm install --save react-stl-viewer

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

stl 3d three threejs react obj model 3dmodel render renderer viewer

@react-three/fiber three-stdlib

@everything-registry/sub-chunk-2615

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago