🎨 GLB Model Viewer

A web-based 3D model viewer built with Three.js for visualizing GLB/GLTF files exported from Blender.

✨ Features

• 📦 GLB/GLTF Support - Load and visualize 3D models exported from Blender
• 🎮 Interactive Controls - Rotate, pan, and zoom with mouse controls
• ✨ Realistic Lighting - Multiple directional lights with ambient lighting
• 🎬 Animation Support - Automatically plays model animations if present
• 📐 Auto-scaling - Models are automatically centered and scaled to fit the viewport
• 🎯 Debug Mode - Built-in debugging with console logs and visual helpers
• ⚡ Fast Development - Hot module replacement with Vite

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• A GLB/GLTF file exported from Blender

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd my-glb-viewer

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   • Navigate to http://localhost:5173 (or the URL shown in terminal)
   • Click "Choose File" and select your GLB model
   • Interact with your 3D model!

📁 Project Structure

my-glb-viewer/
├── public/
│   └── models/          # Place your GLB files here (optional)
│       └── ground.glb
├── src/
│   ├── main.js          # Main Three.js application logic
│   └── style.css        # Styling for the UI
├── index.html           # Entry HTML file
├── package.json         # Project dependencies and scripts
├── vite.config.js       # Vite configuration
└── README.md           # Project documentation

🎮 Controls

Action	Control
Rotate	Left Mouse Button + Drag
Pan	Right Mouse Button + Drag
Zoom	Mouse Wheel Scroll
Reset View	Reload the page or re-upload model

🛠️ Built With

• Three.js - 3D graphics library
• Vite - Next-generation frontend tooling
• OrbitControls - Camera controls
• GLTFLoader - GLTF/GLB file loader

📦 Exporting from Blender

For best results, export your models from Blender with these settings:

1. File → Export → glTF 2.0 (.glb/.gltf)
2. Format: glTF Binary (.glb)
3. Include:
   • ✅ Selected Objects (or entire scene)
   • ✅ Apply Modifiers
   • ✅ UVs
   • ✅ Normals
   • ✅ Materials
   • ✅ Vertex Colors (if used)
4. Transform:
   • ✅ +Y Up
5. Geometry:
   • ✅ Apply Modifiers
   • ✅ Tangents (if using normal maps)
6. Animation:
   • ✅ Animation (if your model has animations)

🔧 Configuration

Lighting

Modify lighting in src/main.js:

// Adjust ambient light intensity
const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);

// Adjust directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
directionalLight.position.set(10, 10, 5);

Camera

Adjust camera settings:

// Field of view, aspect ratio, near, far
camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);

// Initial position
camera.position.set(10, 10, 10);

Background Color

Change scene background:

scene.background = new THREE.Color(0x1a1a2e); // Dark blue
// Or try: 0x000000 (black), 0xffffff (white), 0x87CEEB (sky blue)

📜 Available Scripts

Command	Description
npm run dev	Start development server with hot reload
npm run build	Build for production (outputs to dist/)
npm run preview	Preview production build locally

🐛 Troubleshooting

Model Not Visible

1. Check console (F12) for error messages
2. Try zooming out with mouse wheel
3. Verify GLB file is properly exported from Blender
4. Check model scale in console logs - might be too small/large

Performance Issues

• Reduce polygon count in Blender before exporting
• Optimize textures - use compressed formats and lower resolutions
• Disable shadows if not needed:

  renderer.shadowMap.enabled = false;

CORS Errors (localhost)

These are normal for local development and won't affect functionality. The viewer will work correctly despite these warnings.

🎯 Features Roadmap

• Add multiple model loading (scene comparison)
• Implement material editor
• Add screenshot/export functionality
• Environment map/HDRI lighting
• Wireframe toggle
• Model info panel (vertices, faces, materials)
• Animation timeline controls
• Measurement tools

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Three.js Documentation
• Vite Documentation
• Blender
• OrbitControls Example

Made with ❤️ using Three.js and Vite