react-stl-explorer

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.