Examples

Learn 3Lens through practical examples. Each example includes complete source code, setup instructions, and a detailed walkthrough.

Framework Integration

Get started with 3Lens in your preferred framework:

Example	Description	Difficulty
Vanilla Three.js	Basic setup without any framework	⭐ Beginner
React Three Fiber	Integration with R3F and hooks	⭐ Beginner
Vue + TresJS	Using composables with TresJS	⭐ Beginner
Next.js SSR	Server-side rendering considerations	⭐⭐ Intermediate
Angular	Service injection and RxJS	⭐⭐ Intermediate
Svelte + Threlte	Component-based 3D with Svelte	⭐⭐ Intermediate
Electron Desktop	Desktop app integration	⭐⭐ Intermediate

Debugging & Profiling

Learn to diagnose and fix common issues:

Example	Description	Difficulty
Performance Debugging	Finding and fixing bottlenecks	⭐⭐ Intermediate
Memory Leak Detection	Tracking down resource leaks	⭐⭐ Intermediate
Shader Debugging	Inspecting GLSL/WGSL shaders	⭐⭐⭐ Advanced
Large Scene Optimization	Scaling techniques for complex scenes	⭐⭐ Intermediate

Feature Showcase

Explore 3Lens capabilities:

Example	Description	Difficulty
Transform Gizmo	Interactive object manipulation	⭐ Beginner
Custom Plugin	Building your own devtools panel	⭐⭐⭐ Advanced
WebGPU Features	WebGPU-specific capabilities	⭐⭐⭐ Advanced
Configuration Rules	Defining performance budgets	⭐⭐ Intermediate

Game Development

Build games with 3Lens debugging:

Example	Description	Difficulty
First-Person Shooter	FPS game debugging setup	⭐⭐ Intermediate
Top-Down RPG	RPG game inspection	⭐⭐ Intermediate
Racing Game	Vehicle physics debugging	⭐⭐⭐ Advanced
Platformer Physics	Platform game mechanics	⭐⭐ Intermediate

Real-World Scenarios

Production-ready patterns:

Example	Description	Difficulty
3D Model Viewer	Model loading and inspection	⭐ Beginner
Particle System	Particle effects debugging	⭐⭐ Intermediate
Physics Inspector	Physics engine integration	⭐⭐⭐ Advanced
VR/XR Debugging	WebXR development tools	⭐⭐⭐ Advanced

Code Snippets

Ready-to-use code patterns:

Example	Description	Difficulty
Basic Setup	Simplest 3Lens integration	⭐ Beginner
Development-Only Setup	Conditional loading for production	⭐ Beginner
Monitoring Frame Stats	Real-time performance metrics	⭐⭐ Intermediate
Object Selection Handling	Responding to user selections	⭐⭐ Intermediate
Custom Performance Rules	Setting performance budgets	⭐⭐ Intermediate
Transform Gizmo Setup	Interactive object controls	⭐⭐ Intermediate
Camera Controls	Viewport navigation	⭐⭐ Intermediate
Logical Entities	Grouping related objects	⭐⭐ Intermediate
Resource Tracking	Memory leak detection	⭐⭐⭐ Advanced
Plugin Development	Extending 3Lens	⭐⭐⭐ Advanced
WebGPU Support	WebGPU renderer integration	⭐⭐⭐ Advanced

Running Examples Locally

All examples are available in the repository under /examples:

# Clone the repository
git clone https://github.com/adriandarian/3Lens.git
cd 3Lens

# Install dependencies
pnpm install

# Run a specific example
cd examples/framework-integration/react-three-fiber
pnpm dev

Live Demos

Try 3Lens directly in your browser with our interactive examples:

🎮 Interactive Examples Available!

We now have live, interactive examples you can run directly in your browser. No setup required!

→ Browse Live Examples

Quick Links

• Vanilla Three.js - Basic setup without any framework
• React Three Fiber - R3F integration with hooks
• Vue + TresJS - Vue composables with TresJS
• Transform Gizmo - Interactive object manipulation
• Performance Debugging - Finding bottlenecks

Contributing Examples

Have an interesting use case? We welcome example contributions!

1. Create a new directory in /examples
2. Include a README with setup instructions
3. Add clear comments explaining key concepts
4. Submit a pull request

See Contributing for guidelines.