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