react-stl-explorer

An embeddable STL viewer for React applications.

Installation

Install the library via npm:

npm install react-stl-explorer

Usage

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 storybook

Open 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.