| - [STLLoadPlugin](#stlloadplugin) - Add support for loading .stl files | - [STLLoadPlugin](#stlloadplugin) - Add support for loading .stl files | ||||
| - [KTX2LoadPlugin](#ktx2loadplugin) - Add support for loading .ktx2 files | - [KTX2LoadPlugin](#ktx2loadplugin) - Add support for loading .ktx2 files | ||||
| - [KTXLoadPlugin](#ktxloadplugin) - Add support for loading .ktx files | - [KTXLoadPlugin](#ktxloadplugin) - Add support for loading .ktx files | ||||
| - [USDZLoadPlugin](#usdzloadplugin) - Add support for loading .usdz files | |||||
| - [GLTFMeshOptDecodePlugin](#gltfmeshoptdecodeplugin) - Decode gltf files with EXT_meshopt_compression extension. | - [GLTFMeshOptDecodePlugin](#gltfmeshoptdecodeplugin) - Decode gltf files with EXT_meshopt_compression extension. | ||||
| - [SimplifyModifierPlugin](#simplifymodifierplugin) - Boilerplate for plugin to simplify geometries | - [SimplifyModifierPlugin](#simplifymodifierplugin) - Boilerplate for plugin to simplify geometries | ||||
| - [MeshOptSimplifyModifierPlugin](#meshoptsimplifymodifierplugin) - Simplify geometries using meshoptimizer library | - [MeshOptSimplifyModifierPlugin](#meshoptsimplifymodifierplugin) - Simplify geometries using meshoptimizer library | ||||
| - [@threepipe/plugin-blend-importer](#threepipeplugin-blend-importer) - Blender to add support for loading .blend file | - [@threepipe/plugin-blend-importer](#threepipeplugin-blend-importer) - Blender to add support for loading .blend file | ||||
| - [@threepipe/plugin-geometry-generator](#threepipeplugin-geometry-generator) - Generate parametric geometry types that can be re-generated from UI/API. | - [@threepipe/plugin-geometry-generator](#threepipeplugin-geometry-generator) - Generate parametric geometry types that can be re-generated from UI/API. | ||||
| - [@threepipe/plugin-gaussian-splatting](#threepipeplugin-gaussian-splatting) - Gaussian Splatting plugin for loading and rendering splat files | - [@threepipe/plugin-gaussian-splatting](#threepipeplugin-gaussian-splatting) - Gaussian Splatting plugin for loading and rendering splat files | ||||
| - [@threepipe/plugin-network](#threepipeplugin-network) - Network/Cloud related plugin implementations for Threepipe. | |||||
| - [@threepipe/plugin-svg-renderer](#threepipeplugin-svg-renderer) - Add support for exporting 3d scene as SVG. | |||||
| ## Getting Started | ## Getting Started | ||||
| const envPromise = viewer.setEnvironmentMap(env) | const envPromise = viewer.setEnvironmentMap(env) | ||||
| const modelPromise = viewer.load(src) | const modelPromise = viewer.load(src) | ||||
| Promise.all([envPromise, modelPromise]) | |||||
| Promise.all([envPromise, modelPromise]).then(([env, model]) => { | |||||
| console.log('Loaded', model, env, viewer) | |||||
| }) | |||||
| return () => { | return () => { | ||||
| viewer.dispose() | viewer.dispose() | ||||
| } | } | ||||
| const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr'); | const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr'); | ||||
| const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'); | const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'); | ||||
| Promise.all([envPromise, modelPromise]) | |||||
| Promise.all([envPromise, modelPromise]).then(([env, model]) => { | |||||
| console.log('Loaded', model, env, viewer) | |||||
| }) | |||||
| onBeforeUnmount(() => { | onBeforeUnmount(() => { | ||||
| viewer.dispose(); | viewer.dispose(); | ||||
| const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr'); | const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr'); | ||||
| const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'); | const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'); | ||||
| Promise.all([envPromise, modelPromise]) | |||||
| Promise.all([envPromise, modelPromise]).then(([env, model]) => { | |||||
| console.log('Loaded', model, env, viewer) | |||||
| }) | |||||
| }); | }); | ||||
| onDestroy(() => viewer.dispose()) | onDestroy(() => viewer.dispose()) | ||||
| </script> | </script> |
| * | * | ||||
| * Overrides the driver in popmotion to sync with the viewer and provide ways to keep track and stop animations. | * Overrides the driver in popmotion to sync with the viewer and provide ways to keep track and stop animations. | ||||
| * | * | ||||
| * @category Plugin | |||||
| * @category Plugins | |||||
| */ | */ | ||||
| export class PopmotionPlugin extends AViewerPluginSync<''> { | export class PopmotionPlugin extends AViewerPluginSync<''> { | ||||
| public static readonly PluginType = 'PopmotionPlugin' | public static readonly PluginType = 'PopmotionPlugin' |
| * Also adds a UI to add and animate transforms on objects. | * Also adds a UI to add and animate transforms on objects. | ||||
| * Requires the PopmotionPlugin to animate. | * Requires the PopmotionPlugin to animate. | ||||
| * | * | ||||
| * @category Plugin | |||||
| * @category Plugins | |||||
| */ | */ | ||||
| export class TransformAnimationPlugin extends AViewerPluginSync<''> { | export class TransformAnimationPlugin extends AViewerPluginSync<''> { | ||||
| public static readonly PluginType = 'TransformAnimationPlugin' | public static readonly PluginType = 'TransformAnimationPlugin' |
| import {uiToggle} from 'uiconfig.js' | import {uiToggle} from 'uiconfig.js' | ||||
| import {ICamera, IRenderManager, IScene} from '../../core' | import {ICamera, IRenderManager, IScene} from '../../core' | ||||
| /** | |||||
| * Pipeline Pass Plugin | |||||
| * | |||||
| * Base class for creating a plugin that registers a custom pass to the main render pipeline | |||||
| * | |||||
| * @category Plugins | |||||
| */ | |||||
| export abstract class PipelinePassPlugin<T extends IPipelinePass, TPassId extends IPassID, TEvent extends string, TViewer extends ThreeViewer=ThreeViewer> extends AViewerPluginSync<TEvent, TViewer> { | export abstract class PipelinePassPlugin<T extends IPipelinePass, TPassId extends IPassID, TEvent extends string, TViewer extends ThreeViewer=ThreeViewer> extends AViewerPluginSync<TEvent, TViewer> { | ||||
| abstract passId: TPassId | abstract passId: TPassId | ||||
| /** | /** | ||||
| * Material Configurator Plugin (Base) | * Material Configurator Plugin (Base) | ||||
| * | |||||
| * This plugin allows you to create variations of materials mapped to material names or uuids in the scene. | * This plugin allows you to create variations of materials mapped to material names or uuids in the scene. | ||||
| * These variations can be applied to the materials in the scene. (This copies the properties to the same material instances instead of assigning new materials) | * These variations can be applied to the materials in the scene. (This copies the properties to the same material instances instead of assigning new materials) | ||||
| * The plugin interfaces with the picking plugin and also provides uiConfig to show and edit the variations. | * The plugin interfaces with the picking plugin and also provides uiConfig to show and edit the variations. |
| /** | /** | ||||
| * Switch Node Plugin (Base) | * Switch Node Plugin (Base) | ||||
| * | |||||
| * This plugin allows you to configure object variations in a file and apply them in the scene. | * This plugin allows you to configure object variations in a file and apply them in the scene. | ||||
| * Each SwitchNode is a parent object with multiple direct children. Only one child is visible at a time. | * Each SwitchNode is a parent object with multiple direct children. Only one child is visible at a time. | ||||
| * This works by toggling the `visible` property of the children of a parent object. | * This works by toggling the `visible` property of the children of a parent object. |
| import {AViewerPluginSync, ThreeViewer} from '../../viewer' | import {AViewerPluginSync, ThreeViewer} from '../../viewer' | ||||
| import {downloadBlob} from 'ts-browser-helpers' | import {downloadBlob} from 'ts-browser-helpers' | ||||
| /** | |||||
| * File Transfer Plugin | |||||
| * | |||||
| * Provides a way to extend the viewer.export functionality with custom actions. Used in `AWSClientPlugin` to upload files directly to S3. | |||||
| * | |||||
| * @category Plugins | |||||
| */ | |||||
| export class FileTransferPlugin extends AViewerPluginSync<'transferFile'> { | export class FileTransferPlugin extends AViewerPluginSync<'transferFile'> { | ||||
| enabled = true | enabled = true | ||||
| import {gltfExporterMaterialsVariantsExtensionExport} from './helpers/GLTFMaterialsVariantsExtensionExport' | import {gltfExporterMaterialsVariantsExtensionExport} from './helpers/GLTFMaterialsVariantsExtensionExport' | ||||
| /** | /** | ||||
| * GLTF khr_material_variants plugin | |||||
| * | |||||
| * This plugin allows to import and export gltf files with KHR_materials_variants extension. | * This plugin allows to import and export gltf files with KHR_materials_variants extension. | ||||
| * The material data is stored in the object userData. The plugin also provides a UI to select the variant. | * The material data is stored in the object userData. The plugin also provides a UI to select the variant. | ||||
| * @category Plugin | |||||
| * | |||||
| * @category Plugins | |||||
| */ | */ | ||||
| export class GLTFKHRMaterialVariantsPlugin extends AViewerPluginSync<''> { | export class GLTFKHRMaterialVariantsPlugin extends AViewerPluginSync<''> { | ||||
| public static readonly PluginType = 'GLTFKHRMaterialVariantsPlugin' | public static readonly PluginType = 'GLTFKHRMaterialVariantsPlugin' |
| /** | /** | ||||
| * Adds support for generating different types of lights and camera objects in the viewer. | * Adds support for generating different types of lights and camera objects in the viewer. | ||||
| * @category Plugin | |||||
| * @category Plugins | |||||
| */ | */ | ||||
| @uiPanelContainer('Generate Scene Objects') | @uiPanelContainer('Generate Scene Objects') | ||||
| export class Object3DGeneratorPlugin extends AViewerPluginSync<''> { | export class Object3DGeneratorPlugin extends AViewerPluginSync<''> { |
| /** | /** | ||||
| * Adds light and camera helpers/gizmos in the viewer. | * Adds light and camera helpers/gizmos in the viewer. | ||||
| * A helper is automatically created when any supported light or camera is added to the scene. | * A helper is automatically created when any supported light or camera is added to the scene. | ||||
| * @category Plugin | |||||
| * @category Plugins | |||||
| */ | */ | ||||
| export class Object3DWidgetsPlugin extends AViewerPluginSync<''> { | export class Object3DWidgetsPlugin extends AViewerPluginSync<''> { | ||||
| @onChange(Object3DWidgetsPlugin.prototype.setDirty) | @onChange(Object3DWidgetsPlugin.prototype.setDirty) |
| if (v) this.setDirty() | if (v) this.setDirty() | ||||
| } | } | ||||
| constructor() { | |||||
| constructor(shaderPatch = '') { | |||||
| super() | super() | ||||
| this._shaderPatch = shaderPatch | |||||
| this.setDirty = this.setDirty.bind(this) | this.setDirty = this.setDirty.bind(this) | ||||
| } | } | ||||
| protected _shaderPatch = 'diffuseColor = Vignette(diffuseColor);' | protected _shaderPatch = 'diffuseColor = Vignette(diffuseColor);' | ||||
| /** | |||||
| * @deprecated | |||||
| */ | |||||
| get bgcolor() { | get bgcolor() { | ||||
| console.warn('VignettePlugin.bgcolor is deprecated, use VignettePlugin.color instead') | console.warn('VignettePlugin.bgcolor is deprecated, use VignettePlugin.color instead') | ||||
| return this.color | return this.color | ||||
| } | } | ||||
| /** | |||||
| * @deprecated | |||||
| */ | |||||
| set bgcolor(v) { | set bgcolor(v) { | ||||
| console.warn('VignettePlugin.bgcolor is deprecated, use VignettePlugin.color instead') | console.warn('VignettePlugin.bgcolor is deprecated, use VignettePlugin.color instead') | ||||
| this.color = v | this.color = v |
| export const VERSION = '0.0.32' | |||||
| export const VERSION = '0.0.33' |