1.0.1 • Published 2 years ago
ddbcn-viewer v1.0.1
ddybcn-viewer
React component for visualizing STLs using Three.js.
Install
npm install --save ddybcn-viewer
or
yarn add ddybcn-viewer
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import {StlViewer} from "ddybcn-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'));
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 |