Live Examples

Explore 3Lens through interactive examples running directly in your browser. Click on any example to try it out, view the source code, and learn how it works.

Build Examples First

To run live examples locally, build them first:

pnpm build:examples

Categories

🔌 Framework Integration

Get started with 3Lens in your preferred framework.

Example	Description	Difficulty
Vanilla Three.js	Basic setup, no framework	⭐ Beginner
React Three Fiber	React hooks integration	⭐ Beginner
Vue + TresJS	Vue composables	⭐ Beginner
Angular	Service injection	⭐⭐ Intermediate
Svelte + Threlte	Svelte stores	⭐⭐ Intermediate
Next.js SSR	SSR handling	⭐⭐ Intermediate
Electron Desktop	Desktop apps	⭐⭐ Intermediate

---

✨ Feature Showcase

Explore 3Lens features and capabilities.

Example	Description	Difficulty
Transform Gizmo	Object manipulation	⭐ Beginner
Camera Controls	Camera debugging	⭐ Beginner
Visual Overlays	Debug visualizations	⭐ Beginner
Configuration Rules	Performance budgets	⭐⭐ Intermediate
Cost Analysis	Rendering costs	⭐⭐ Intermediate
Timeline Recording	Scene recording	⭐⭐ Intermediate
Custom Plugin	Build your own panels	⭐⭐⭐ Advanced
WebGPU Features	WebGPU debugging	⭐⭐⭐ Advanced

---

🔍 Debugging & Profiling

Debug and profile Three.js applications.

Example	Description	Difficulty
Performance Debugging	Find bottlenecks	⭐⭐ Intermediate
Memory Leak Detection	Track resource leaks	⭐⭐ Intermediate
Draw Call Batching	Optimize draw calls	⭐⭐ Intermediate
Large Scene Optimization	Handle complex scenes	⭐⭐ Intermediate
Animation Profiling	Animation performance	⭐⭐ Intermediate
Texture Optimization	Texture memory	⭐⭐ Intermediate
Raycasting Debugger	Picking/intersection	⭐⭐ Intermediate
Shader Debugging	GLSL/WGSL inspection	⭐⭐⭐ Advanced

---

🚀 Advanced Techniques

Advanced debugging for complex scenarios.

Example	Description	Difficulty
Environment Mapping	HDR and cubemaps	⭐⭐ Intermediate
Morph Target Analyzer	Blend shapes	⭐⭐ Intermediate
Shadow Comparison	Shadow techniques	⭐⭐ Intermediate
Skinned Mesh Inspector	Skeletal animation	⭐⭐ Intermediate
Compute Shaders	WebGPU compute	⭐⭐⭐ Advanced
Custom Render Pipeline	Multi-pass rendering	⭐⭐⭐ Advanced

---

📊 Data Visualization

Debug data-driven 3D visualizations.

Example	Description	Difficulty
3D Charts	Charts and graphs	⭐⭐ Intermediate
Geographic Data	GIS and maps	⭐⭐ Intermediate
Scientific Viz	Volume rendering	⭐⭐⭐ Advanced
Realtime Streaming	Live data feeds	⭐⭐⭐ Advanced

---

🎮 Game Development

Debug Three.js games.

Example	Description	Difficulty
First-Person Shooter	FPS mechanics	⭐⭐ Intermediate
Platformer Physics	Jump and collision	⭐⭐ Intermediate
Top-Down RPG	Isometric games	⭐⭐ Intermediate
Racing Game	Vehicle physics	⭐⭐⭐ Advanced

---

🌍 Real-World Scenarios

Production-ready patterns.

Example	Description	Difficulty
3D Model Viewer	Model loading	⭐ Beginner
Particle System	Particle effects	⭐⭐ Intermediate
Post Processing	Effect debugging	⭐⭐ Intermediate
Audio Visualization	Audio-reactive	⭐⭐ Intermediate
Multi-Scene Management	Scene switching	⭐⭐ Intermediate
Procedural Generation	Generated content	⭐⭐ Intermediate
Physics Inspector	Physics debugging	⭐⭐⭐ Advanced
VR/XR Debugging	WebXR apps	⭐⭐⭐ Advanced

---

Running Examples Locally

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

# Install dependencies
pnpm install

# Build examples for docs
pnpm build:examples

# Run docs locally
pnpm docs:dev

# Or run a specific example in dev mode
pnpm example feature-showcase/transform-gizmo

Example Stats

• Total Examples: 45
• Categories: 7
• Beginner: 6
• Intermediate: 30
• Advanced: 9