threepipe/website/package/plugin-tweakpane-editor.md

---

prev:

text: '@threepipe/plugin-blueprintjs'
link: './plugin-blueprintjs'

next:

text: '@threepipe/plugin-configurator'
link: './plugin-configurator'

---

@threepipe/plugin-tweakpane-editor

Tweakpane Editor Plugin for ThreePipe

Example — Source Code — API Reference

npm install @threepipe/plugin-tweakpane-editor

TweakpaneEditorPlugin uses TweakpaneUiPlugin and other custom ui to create an editor for editing viewer, plugins, model and material configurations in the browser.

import {IObject3D, ThreeViewer, TonemapPlugin} from 'threepipe'
import {TweakpaneEditorPlugin} from '@threepipe/plugin-tweakpane-editor'

const viewer = new ThreeViewer({...})

viewer.addPluginSync(new TweakpaneUiPlugin(true))
const editor = viewer.addPluginSync(new TweakpaneEditorPlugin())

// Add some plugins to the viewer
await viewer.addPlugins([
    new ViewerUiConfigPlugin(),
    // new SceneUiConfigPlugin(), // this is already in ViewerUiPlugin
    new DepthBufferPlugin(HalfFloatType, true, true),
    new NormalBufferPlugin(HalfFloatType, false),
    new RenderTargetPreviewPlugin(false),
])

// Load the plugin UI in the editor and tweakpane ui with categories.
editor.loadPlugins({
    ['Viewer']: [ViewerUiConfigPlugin, SceneUiConfigPlugin, DropzonePlugin, FullScreenPlugin],
    ['GBuffer']: [DepthBufferPlugin, NormalBufferPlugin],
    ['Post-processing']: [TonemapPlugin],
    ['Debug']: [RenderTargetPreviewPlugin],
})