threejs-3d-viewer

3D Model Viewer

A React component for displaying 3D models (GLTF/GLB) using Three.js.

Installation

Install the package using npm or yarn:

npm install threejs-3d-viewer
# or
yarn add threejs-3d-viewer

Usage

Import the ModelPreview component and use it in your React application:

import React from 'react';
import { ModelPreview } from 'threejs-3d-viewer';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ModelPreview modelUrl="path/to/your/model.glb" />
    </div>
  );
}

export default App;

Props

The ModelPreview component accepts the following props:

Prop	Type	Default	Description
modelUrl	string	Required	URL or path to the 3D model file (GLTF/GLB).
backgroundColor	string	'#e0e0e0'	Background color of the canvas.
environmentMap	string	studio_small_08_4k.exr (internal)	Optional URL or path to a custom HDRI environment map.

Example with Custom Environment and Background

import React from 'react';
import { ModelPreview } from 'threejs-3d-viewer';
import myCustomHdri from './assets/my_custom_environment.exr?url'; // Ensure your bundler handles .exr?url imports

function App() {
  return (
    <div style={{ width: '800px', height: '600px' }}>
      <ModelPreview
        modelUrl="path/to/your/model.glb"
        backgroundColor="#333333"
        environmentMap={myCustomHdri}
      />
    </div>
  );
}

export default App;

Development

To build the package locally:

npm run build

License

MIT