Skip to content

Core Plugins

ThreePipe has a simple plugin system that allows you to easily add new features to the viewer. Plugins can be added to the viewer using the addPlugin and addPluginSync methods.

Plugins can be added to the viewer at any time and can be removed using the removePlugin and removePluginSync methods.

There are built-in plugins provided in the core of threepipe, that can be directly added to the viewer to add new features. These plugins are designed to be modular and can be used independently or in combination with other plugins. They also serve as good examples and starting points for creating custom plugins.

All of the plugins are configurable, serializable and expose a UI to control their properties.

Checkout the model-viewer or tweakpane-editor examples which use most of these plugins.

More plugins are available as separate packages, check the @threepipe Packages page for more details.

Rendering Pipeline

Plugins configuring the rendering pipeline and providing resources for other plugins, effects.

  • ProgressivePlugin - Post-render pass to blend the last frame with the current frame. Used for progressive rendering. It's a dependency for several other plugins.
  • SSAAPlugin - Add Super Sample Anti-Aliasing across frames by applying jitter to the camera.
  • DepthBufferPlugin - Pre-rendering of depth buffer. The buffer can be used in materials and post-processing effects.
  • NormalBufferPlugin - Pre-rendering of normal buffer. The buffer can be used in materials and post-processing effects.
  • GBufferPlugin - Pre-rendering of depth-normal and flags buffers in a single pass. This is a dependency to several post-processing plugins.
  • SSAOPlugin - Extends the render pipeline to add SSAO(Screen Space Ambient Occlusion) for physical materials in the scene.
  • FrameFadePlugin - Post-render pass to smoothly fade to a new rendered frame over time. Used by the core and several plugins like configurators.

Import

Plugins to add importers/loaders for different file formats.

Post-processing

Plugins to add basic post-processing effects to the final screen pass.

Check packages for more advanced post-processing effects.

Interaction

Plugins to add/configure interaction and user editable elements to the viewer.

  • DropzonePlugin - Drag and drop local files to import and automatically load. Also provides hooks for custom processing.
  • PickingPlugin - Adds support for selecting objects in the viewer with user interactions(click and hover) and shows selection widgets.
  • LoadingScreenPlugin - Shows a configurable loading screen overlay over the canvas which can be extended to show a loader during any kind of processing.
  • FullScreenPlugin - Provides helpers for entering the fullscreen mode in browsers.
  • InteractionPromptPlugin - Adds an animated hand icon over canvas and rotates the camera to prompt the user to interact.
  • TransformControlsPlugin - Adds support for moving, rotating and scaling objects in the viewer with interactive widgets
  • EditorViewWidgetPlugin - Adds an interactive ViewHelper/AxisHelper that syncs with the main camera.
  • DeviceOrientationControlsPlugin - Adds a controlsMode to the mainCamera for device orientation controls(gyroscope rotation control).
  • PointerLockControlsPlugin - Adds a controlsMode to the mainCamera for pointer lock controls.
  • ThreeFirstPersonControlsPlugin - Adds a controlsMode to the mainCamera for first person controls from threejs.

Animation

Plugins to add support for animations and animation controls.

Material

Plugins to add support for custom materials and material extensions for existing materials.

Export

Plugins to configure export options and methods for different file formats.

  • CanvasSnapshotPlugin - Add support for taking snapshots of the canvas.
  • AssetExporterPlugin - Provides helper options, methods and ui config to export the scene, object GLB or Viewer Configuration.
  • FileTransferPlugin - Provides a way to extend the viewer.export functionality with custom actions.

Extras

UI

Plugins related UI, plugins creating UI element. Check the packages page for UI config rendering plugins.

Base

Base plugins that can be inherited to create new plugins for specific use cases.

Configurator

Base plugins for creating configurators. These include the functionality, serialization and state management and UI can be added but any subclass or in the application.

ThreePipe - Make 3D applications on the web