TE Web Model Viewer

A high-quality 3D model viewer for GLB/GLTF files built with React Three Fiber, featuring cinematic lighting, advanced post-processing effects, and professional rendering capabilities.

Features

• GLB/GLTF Model Support: Load and view 3D models in GLB and GLTF formats
• Cinematic Three-Point Lighting: Professional key, fill, and rim light setup for optimal model presentation
• N8 Ambient Occlusion: High-quality screen-space ambient occlusion for enhanced depth perception
• ACES Filmic Tone Mapping: Industry-standard tone mapping for realistic color and exposure
• HDR Environment Lighting: Image-based lighting with adjustable intensity controls
• Maya-Style Focus View: Press F to automatically frame the model in view
• Real-time Material Controls:
  • Roughness adjustment
  • Metalness adjustment
  • Material color picker
  • Normal map intensity control
• Advanced Shadow Controls:
  • Adjustable shadow intensity
  • Shadow bias control for precision
  • High-quality PCF soft shadows
• Interactive Camera: Orbit controls for intuitive 3D navigation
• Grid Helper: Toggle-able reference grid for scale and orientation

Installation

npm install

Usage

Development

npm run dev

Build

npm build

Preview Build

npm run preview

Controls

Keyboard Shortcuts

• F: Focus view - automatically frames the model to fill the screen while maintaining the current viewing angle

Mouse Controls

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

UI Controls

Material Properties

• Roughness: Controls surface roughness (0 = smooth/reflective, 1 = rough/matte)
• Metalness: Controls metallic appearance (0 = dielectric, 1 = metal)
• Color: Base material color picker
• Normal: Normal map intensity for surface detail

Lighting & Environment

• Exposure: Overall scene brightness/exposure level
• Env IBL: HDR environment intensity for reflections and ambient lighting
• Shadow: Shadow darkness/intensity
• Shadow Bias: Fine-tune shadow precision to reduce artifacts

Visual Effects

• AO: Enable/disable ambient occlusion effect
• Grid: Toggle reference grid visibility

Technical Stack

• React 19: UI framework
• Three.js 0.182: 3D rendering engine
• React Three Fiber: React renderer for Three.js
• React Three Drei: Useful helpers and abstractions
• React Three Postprocessing: Post-processing effects pipeline
• Vite: Build tool and development server

Project Structure

te_GTLF_Loader/
├── src/
│   ├── App.jsx           # Main application component
│   ├── main.jsx          # Application entry point
│   └── index.css         # Global styles
├── models/               # 3D model files
├── public/              # Static assets
├── index.html           # HTML template
└── package.json         # Project configuration

Rendering Features

• PBR Materials: Physically-based rendering with MeshStandardMaterial
• Post-Processing Pipeline: EffectComposer with N8AO and tone mapping
• Shadow Mapping: High-quality shadows with 2048x2048 resolution
• Environment Mapping: Procedural room environment for realistic reflections
• Gradient Background: Subtle gradient backdrop for professional presentation

Browser Compatibility

Requires a modern browser with WebGL 2.0 support:

• Chrome 56+
• Firefox 51+
• Safari 15+
• Edge 79+

License

Private project.

Version

0.0.0