react-stl-explorer v0.2.0
react-stl-explorer
An embeddable STL viewer for React applications.
Installation
Install the library via npm:
npm install react-stl-explorerUsage
Import the StlExplorer component and start using it in your React application:
import React from 'react';
import StlExplorer from 'react-stl-explorer';
const MyComponent = () => {
return (
<div>
<h1>My 3D Model Viewer</h1>
<StlExplorer />
</div>
);
};
export default MyComponent;StlExplorer props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| source | string \| File | Specifies the source of the STL model to display in the viewer. | |
| showViewCube | boolean | true | Controls the visibility of the ViewCube, an interactive 3D navigation tool. |
| allowFullscreen | boolean | true | Determines whether the viewer supports entering fullscreen mode. |
| enableInteraction | boolean | true | Controls user interactions with the viewer, such as rotation and zooming. |
| enableDragAndDrop | boolean | true | Allows users to drag and drop their own STL files into the viewer for loading. |
Development
This library uses the Storybook environment for development. To start working on react-stl-explorer, follow these steps:
- Clone this Git repository:
git clone https://github.com/JMax45/react-stl-explorer
cd react-stl-explorer- Install the dependencies:
npm install- Start the Storybook development server:
npm run storybookOpen your browser and navigate to http://localhost:6006 to view the Storybook interface, where you can interact with the components.
Future Customizability
Currently, react-stl-explorer acts as a simple STL viewer, allowing users to drag and drop their own STL files for visualization. In the future, you can expect additional options to tailor the behavior to suit your specific use cases.
Contributing
Contributions are welcome! If you find any issues or want to enhance the library, please open a pull request.
License
This project is licensed under the MIT License.