Model Viewer

A simple, clean 3D model viewer built with React and Three.js for displaying GLTF models.

Features

• Load and display GLTF/GLB models
• Orbit controls (rotate, zoom, pan)
• Auto-scaling and centering of models
• Professional lighting setup
• Responsive design
• Loading states and error handling

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

model-viewer/
├── public/
│   └── models/              # Put your GLTF files here
│       ├── your-model.gltf
│       ├── textures/
│       └── *.bin
├── src/
│   ├── components/
│   │   ├── ModelViewer.jsx  # Main 3D canvas component
│   │   └── Model.jsx        # GLTF loader component
│   ├── App.jsx              # Main app
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── package.json
└── vite.config.js

How to Use

1. Add Your 3D Models

Create a public/models/ folder and place your GLTF files there:

public/
└── models/
    ├── robot.gltf
    ├── robot.bin
    └── textures/
        └── robot_texture.png

2. Update the Model Path

In src/App.jsx, change the model path:

const modelPath = '/models/robot.gltf'

3. Run the App

npm run dev

Your browser will open at http://localhost:3000

Controls

• Left Click + Drag: Rotate the model
• Right Click + Drag: Pan the camera
• Scroll Wheel: Zoom in/out

Customization

Change Camera Position

In ModelViewer.jsx:

<PerspectiveCamera makeDefault position={[0, 0, 5]} fov={50} />

Adjust Lighting

In ModelViewer.jsx:

<ambientLight intensity={0.5} />
<directionalLight position={[10, 10, 5]} intensity={1} />

Enable Auto-Rotation

Use the Auto Rotate toggle button in the UI header.

Change Background

In ModelViewer.jsx, modify the Environment preset:

<Environment preset="sunset" /> // Options: sunset, dawn, night, warehouse, forest, apartment, studio, city, park, lobby

Tech Stack

• React 18 - UI framework
• Three.js - 3D rendering engine
• @react-three/fiber - React renderer for Three.js
• @react-three/drei - Useful helpers for React Three Fiber
• Vite - Fast build tool and dev server

Troubleshooting

Model appears too small/large

The auto-scaling should handle this, but you can manually adjust in Model.jsx:

const scale = 2 / maxDim // Change the 2 to make bigger/smaller

Performance issues

1. Reduce model complexity
2. Optimize textures (use smaller sizes)
3. Use GLB format instead of GLTF (single file, faster to load)

Next Steps (Beyond MVP)

• Multiple model selection
• File upload functionality
• Screenshot/export features
• Annotation tools
• Material/texture editing
• Animation playback
• VR support