@threepipe/plugin-tweakpane-editor
Tweakpane Editor Plugin for ThreePipe
Example — Source Code — API Reference
bash
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.
typescript
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],
})