GLB Inspector & Viewer

A modern, professional web application for inspecting and viewing GLB (glTF 2.0 binary) 3D models. Built with Next.js, React Three Fiber, and Tailwind CSS.

Motivation

I created this tool to assist with the development of my other project, 3D-Dojo. It serves as a dedicated utility to inspect, validate, and debug GLB models before integrating them into the main 3D environment.

Features

• 📦 3D Model Upload: Drag & drop or file selection support for .glb files.
• 👁️ Interactive Viewer:
  • Orbit controls (rotate, zoom, pan).
  • Studio-quality lighting environment.
  • Auto-centering and scaling of models.
• 🔍 Inspector Panel:
  • Detailed statistics: Vertices, Triangles, Meshes, Materials, Textures.
  • Animation Viewer: List of animation clips with duration and track counts.
  • Scene Hierarchy: Tree view of the model's structure.
  • Validation: Warnings for common issues (e.g., missing textures, high poly counts).
• 🖱️ Hover Inspection: Toggleable mode to inspect individual mesh names by hovering over them in the 3D scene.
• 🎨 Professional UI: Clean, dark-themed interface inspired by industry-standard 3D tools.

Tech Stack

• Framework: Next.js 14 (App Router)
• 3D Engine: Three.js & React Three Fiber
• Utilities: @react-three/drei (OrbitControls, Environment, etc.)
• Styling: Tailwind CSS
• Icons: Lucide React

Getting Started

First, install the dependencies:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the application.

Usage

1. Upload: Drag a .glb file onto the drop zone or click the blue button to select one from your computer.
2. Inspect: Use the right-hand panel to view model statistics and hierarchy. Toggle the panel visibility with the icon in the header.
3. Hover Mode: Click the "Hover Inspect" button in the header to enable tooltip inspection of individual parts of the model.
4. Navigate:
   • Left Click + Drag: Rotate
   • Right Click + Drag: Pan
   • Scroll: Zoom

Test Model

If you want to quickly test the viewer, there is an example model included in the project:

• Location: public/models/bamboo.glb

You can use this file to verify the upload and inspection features.

License

This project is open source and available under the MIT License.