Custom Plugin

Build your own devtools panel to extend 3Lens with custom functionality.

Custom Plugin Demoadvanced

Loading example...

This example shows a custom statistics panel integrated into 3Lens. Explore how to create your own panels with custom UI and functionality.

Features Demonstrated

• Plugin Architecture: Creating plugins that integrate with 3Lens
• Custom Panels: Building UI panels for the devtools overlay
• Message Passing: Communication between plugin and main application
• Settings Integration: Adding configurable options to your plugin
• Event Subscriptions: Reacting to scene and performance events

Plugin Structure

A 3Lens plugin consists of:

import { createPlugin } from '@3lens/core';

export const myPlugin = createPlugin({
  name: 'my-plugin',
  version: '1.0.0',
  
  // Called when plugin is loaded
  setup(api) {
    // Register panels, commands, settings
    api.registerPanel({
      id: 'my-panel',
      title: 'My Panel',
      icon: '📊',
      render: () => createPanelUI()
    });
  },
  
  // Called when plugin is unloaded
  teardown() {
    // Cleanup resources
  }
});

Related Examples

• Transform Gizmo - Interactive object manipulation
• WebGPU Features - WebGPU-specific capabilities
• Configuration Rules - Performance budgets and rules