Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gabotechs/react-stl-viewer
React component for visualizing 3d STL models in the browser using three.js
https://github.com/gabotechs/react-stl-viewer
3d 3dmodel component model obj react render renderer stl three threejs viewer
Last synced: about 9 hours ago
JSON representation
React component for visualizing 3d STL models in the browser using three.js
- Host: GitHub
- URL: https://github.com/gabotechs/react-stl-viewer
- Owner: gabotechs
- License: mit
- Created: 2021-09-24T18:59:44.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-14T17:51:28.000Z (about 1 year ago)
- Last Synced: 2025-01-29T10:05:27.648Z (9 days ago)
- Topics: 3d, 3dmodel, component, model, obj, react, render, renderer, stl, three, threejs, viewer
- Language: TypeScript
- Homepage:
- Size: 176 MB
- Stars: 91
- Watchers: 2
- Forks: 16
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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 (
);
}
ReactDOM.render(, document.getElementById('root'));
```
## Demo
You can see working the examples from `.storybook/stories` [here](https://gabotechs.github.io/react-stl-viewer)
## Props
| Prop | Type | Required | Notes |
|-------------------|:------------------------------:|:--------:|:-----------------------------------------------------------:|
| `url` | `string` | `true` | url of the Stl file |
| `cameraProps` | `CameraProps` | `false` | camera properties, see below |
| `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 ```
``` props
## Interfaces
### CameraProps
| Prop | Type | Required | Notes |
|-------------------|:----------------------:|:--------:|:--------------------------------------------------------------------------------------------------------:|
| `ref` | `{current: CameraRef}` | `false` | reference of the camera for accessing it's properties |
| `initialPosition` | `CameraPosition` | `false` | set the position of the camera in geographic coordinates. The origin of coordinates is the object itself |
### CameraRef
| Prop | Type | Required | Notes |
|---------------------|:-----------------------------------:|:--------:|:----------------------------------------------------------------------------------:|
| `setCameraPosition` | `(position: CameraPosition) => any` | `true` | imperatively sets the camera position based on the provided geographic coordinates |
setCameraPosition:
### 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" |
| `geometryProps` | `(geometry: BufferGeometry) => BufferGeometry` | `false` | Perform some processing to the models geometry |
### 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 |
### CameraPosition
| Prop | Type | Required | Notes |
|-------------|:--------:|:--------:|:------------------------------------------------------------------------------------------------------------------------------------------------:|
| `latitude` | `number` | `false` | 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` | `false` | 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` | `false` | the distance factor between the object and the camera. This is a factor relative to the object size or the grid size if it's specified |