Vanilla Three.js

The simplest way to integrate 3Lens with a standard Three.js application.

Vanilla Three.js Demobeginner

Loading example...

A basic Three.js scene with 3Lens integration. Click on objects to inspect them, use the overlay to explore scene hierarchy and monitor performance.

Features Demonstrated

• Basic Setup: Minimal code to get 3Lens running
• Scene Inspection: Browse the scene graph hierarchy
• Object Selection: Click to select and inspect objects
• Performance Monitoring: Real-time FPS and memory stats
• Material Editing: Live material property changes

Quick Start

import * as THREE from 'three';
import { createProbe } from '@3lens/core';
import { bootstrapOverlay } from '@3lens/overlay';

// Create your Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// Initialize 3Lens
const probe = createProbe({
  enabled: process.env.NODE_ENV !== 'production'
});

// Connect to your scene and renderer
probe.observeRenderer(renderer);
probe.observeScene(scene);

// Mount the overlay UI
bootstrapOverlay(probe);

// Your render loop
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

Development-Only Setup

For production builds, conditionally load 3Lens:

if (process.env.NODE_ENV !== 'production') {
  const { createProbe } = await import('@3lens/core');
  const { bootstrapOverlay } = await import('@3lens/overlay');
  
  const probe = createProbe();
  probe.observeRenderer(renderer);
  probe.observeScene(scene);
  bootstrapOverlay(probe);
}

Related Examples

• React Three Fiber - React integration with R3F
• Vue + TresJS - Vue.js integration
• Performance Debugging - Finding bottlenecks