3D Model Viewer

A minimal, robust in-browser 3D viewer powered by Babylon.js and TypeScript.

Features

• Drag-and-drop 3D model loading (glTF/GLB, OBJ)
• PBR rendering with texture support
• Interactive camera controls (orbit, zoom, pan)
• Environment lighting adjustment
• Keyboard shortcuts (R: reset camera, H: toggle UI, F: frame model)
• Touch support for mobile devices

Quick Start

1. Install dependencies:

npm install

2. Start development server:

npm run dev

3. Open http://localhost:5173 in your browser

4. Drag and drop a 3D model file (.glb, .gltf, or .obj) onto the canvas

Build

npm run build

Supported Formats

• glTF/GLB: Full PBR material support with embedded or external textures
• OBJ: Basic geometry support with optional MTL materials
• FBX: Full support with textures

Controls

• Mouse: Left-click drag to rotate, right-click drag to pan, scroll to zoom
• Touch: One finger to rotate, two fingers to zoom/pan
• Keyboard:
  • W/A/S/D or Arrow Keys - Pan camera
  • +/- - Zoom in/out
  • R or F - Reset camera / Frame model
  • H - Toggle UI visibility

Tech Stack

• TypeScript
• Vite
• Babylon.js 7.x
• Plain HTML/CSS

License

MIT