On this page

These docs describe the main branch, including unreleased changes. Read the 0.6.0 docs.

@opentui/three

Every export of @opentui/three in the main-branch source, from its type declarations. A version names the release that added an export after the module's first release.

Classes#

class CLICanvasconstructor CLICanvas(device: GPUDevice, width: number, height: number, superSample: SuperSampleType, sampleAlgo?: SuperSampleAlgorithm)
Three.js WebGPU
  • method CLICanvas.addEventListener(event: string, listener: any, options?: any): void
  • method CLICanvas.destroy(): void
  • method CLICanvas.dispatchEvent(event: Event): void
  • method CLICanvas.getContext(type: string, attrs?: WebGLContextAttributes): GPUCanvasContextMock
  • method CLICanvas.getSuperSampleAlgorithm(): SuperSampleAlgorithm
  • method CLICanvas.readPixelsIntoBuffer(buffer: OptimizedBuffer): Promise<void>
  • method CLICanvas.removeEventListener(event: string, listener: any, options?: any): void
  • method CLICanvas.saveToFile(filePath: string): Promise<void>
  • method CLICanvas.setSize(width: number, height: number): void
  • method CLICanvas.setSuperSample(superSample: SuperSampleType): void
  • method CLICanvas.setSuperSampleAlgorithm(superSampleAlgorithm: SuperSampleAlgorithm): void
  • property CLICanvas.mapAsyncTimeMs: number
  • property CLICanvas.superSample: SuperSampleType
  • property CLICanvas.superSampleDrawTimeMs: number
class ExplodingSpriteEffectconstructor ExplodingSpriteEffect(scene: THREE.Scene, resource: SpriteResource, frameUvOffset: THREE.Vector2, frameUvSize: THREE.Vector2, spriteWorldTransform: THREE.Matrix4, userParams?: Partial<ExplosionEffectParameters>)
Three.js WebGPU
  • method ExplodingSpriteEffect.dispose(): void
  • method ExplodingSpriteEffect.update(deltaTimeMs: number): void
  • property ExplodingSpriteEffect.isActive: boolean
class ExplosionManagerconstructor ExplosionManager(scene: THREE.Scene)
Three.js WebGPU
  • method ExplosionManager.createExplosionForSprite(spriteToExplode: TiledSprite, userParams?: Partial<ExplosionEffectParameters>): ExplosionHandle | null
  • method ExplosionManager.disposeAll(): void
  • method ExplosionManager.fillPool(resource: SpriteResource, count: number, params?: Partial<ExplosionEffectParameters>): void
  • method ExplosionManager.update(deltaTimeMs: number): void
class InstanceManagerconstructor InstanceManager(scene: Scene, geometry: THREE.BufferGeometry, material: THREE.Material, options: InstanceManagerOptions)
Three.js WebGPU
  • method InstanceManager.acquireInstanceSlot(): number
  • method InstanceManager.dispose(): void
  • method InstanceManager.getInstanceCount(): number
  • method InstanceManager.getMaxInstances(): number
  • method InstanceManager.releaseInstanceSlot(instanceIndex: number): void
  • readonly property InstanceManager.hasFreeIndices: boolean
  • readonly property InstanceManager.mesh: THREE.InstancedMesh
class MeshPool
Three.js WebGPU
  • method MeshPool.acquireMesh(poolId: string, options: MeshPoolOptions): THREE.InstancedMesh
  • method MeshPool.clearAllPools(): void
  • method MeshPool.clearPool(poolId: string): void
  • method MeshPool.fill(poolId: string, options: MeshPoolOptions, count: number): void
  • method MeshPool.releaseMesh(poolId: string, mesh: THREE.InstancedMesh): void
class PhysicsExplodingSpriteEffectconstructor PhysicsExplodingSpriteEffect(scene: THREE.Scene, physicsWorld: PhysicsWorld, resource: SpriteResource, frameUvOffset: THREE.Vector2, frameUvSize: THREE.Vector2, spriteWorldTransform: THREE.Matrix4, userParams?: Partial<PhysicsExplosionEffectParameters>)
Three.js WebGPU
  • method PhysicsExplodingSpriteEffect.dispose(): void
  • method PhysicsExplodingSpriteEffect.update(deltaTimeMs: number): void
  • property PhysicsExplodingSpriteEffect.isActive: boolean
  • static method PhysicsExplodingSpriteEffect.getSharedMaterial(texture: THREE.DataTexture, materialFactory: () => NodeMaterial): NodeMaterial
class PhysicsExplosionManagerconstructor PhysicsExplosionManager(scene: THREE.Scene, physicsWorld: PhysicsWorld)
Three.js WebGPU
  • method PhysicsExplosionManager.createExplosionForSprite(spriteToExplode: TiledSprite, userParams?: Partial<PhysicsExplosionEffectParameters>): Promise<PhysicsExplosionHandle | null>
  • method PhysicsExplosionManager.disposeAll(): void
  • method PhysicsExplosionManager.fillPool(resource: SpriteResource, count: number, params?: Partial<PhysicsExplosionEffectParameters>): void
  • method PhysicsExplosionManager.update(deltaTimeMs: number): void
class PlanckPhysicsWorld implements PhysicsWorldconstructor PlanckPhysicsWorld(planckWorld: planck.World)
Three.js WebGPU
  • method PlanckPhysicsWorld.createCollider(colliderDesc: PhysicsColliderDesc, rigidBody: PhysicsRigidBody): void
  • method PlanckPhysicsWorld.createRigidBody(desc: PhysicsRigidBodyDesc): PhysicsRigidBody
  • method PlanckPhysicsWorld.removeRigidBody(rigidBody: PhysicsRigidBody): void
  • static method PlanckPhysicsWorld.createFromPlanckWorld(planckWorld: planck.World): PlanckPhysicsWorld
class PlanckRigidBody implements PhysicsRigidBodyconstructor PlanckRigidBody(planckBody: planck.Body)
Three.js WebGPU
  • method PlanckRigidBody.applyImpulse(force: PhysicsVector2): void
  • method PlanckRigidBody.applyTorqueImpulse(torque: number): void
  • method PlanckRigidBody.getRotation(): number
  • method PlanckRigidBody.getTranslation(): PhysicsVector2
  • readonly property PlanckRigidBody.nativeBody: planck.Body
class RapierPhysicsWorld implements PhysicsWorldconstructor RapierPhysicsWorld(rapierWorld: World)
Three.js WebGPU
  • method RapierPhysicsWorld.createCollider(colliderDesc: PhysicsColliderDesc, rigidBody: PhysicsRigidBody): void
  • method RapierPhysicsWorld.createRigidBody(desc: PhysicsRigidBodyDesc): PhysicsRigidBody
  • method RapierPhysicsWorld.removeRigidBody(rigidBody: PhysicsRigidBody): void
  • static method RapierPhysicsWorld.createFromRapierWorld(rapierWorld: World): RapierPhysicsWorld
class RapierRigidBody implements PhysicsRigidBodyconstructor RapierRigidBody(rapierBody: RigidBody)
Three.js WebGPU
  • method RapierRigidBody.applyImpulse(force: PhysicsVector2): void
  • method RapierRigidBody.applyTorqueImpulse(torque: number): void
  • method RapierRigidBody.getRotation(): number
  • method RapierRigidBody.getTranslation(): PhysicsVector2
  • readonly property RapierRigidBody.nativeBody: RigidBody
class SheetSprite extends Spriteconstructor SheetSprite(material: SpriteMaterial, numFrames: number)
Three.js WebGPU
  • property SheetSprite.setIndex: (index: number) => void
class SpriteAnimatorconstructor SpriteAnimator(scene: Scene)
Three.js WebGPU
  • method SpriteAnimator.createSprite(userSpriteDefinition: SpriteDefinition, materialFactory?: () => NodeMaterial): Promise<TiledSprite>
  • method SpriteAnimator.removeAllSprites(): void
  • method SpriteAnimator.removeSprite(id: string): void
  • method SpriteAnimator.update(deltaTime: number): void
class SpriteParticleGeneratorconstructor SpriteParticleGenerator(scene: THREE.Scene, initialBaseConfig: ParticleEffectParameters)
Three.js WebGPU
  • method SpriteParticleGenerator.dispose(): void
  • method SpriteParticleGenerator.getActiveParticleCount(): number
  • method SpriteParticleGenerator.hasAutoSpawn(): boolean
  • method SpriteParticleGenerator.setAutoSpawn(ratePerSecond: number, autoSpawnParamOverrides?: Partial<ParticleEffectParameters>): void
  • method SpriteParticleGenerator.spawnParticles(count: number, overrides?: Partial<ParticleEffectParameters>): Promise<void>
  • method SpriteParticleGenerator.stopAutoSpawn(): void
  • method SpriteParticleGenerator.update(deltaTimeMs: number): Promise<void>
class SpriteResourceconstructor SpriteResource(texture: THREE.DataTexture, sheetProperties: SheetProperties, scene: Scene)
Three.js WebGPU
  • method SpriteResource.createInstanceManager(geometry: THREE.BufferGeometry, material: THREE.Material, options: InstanceManagerOptions): InstanceManager
  • method SpriteResource.dispose(): void
  • readonly property SpriteResource.meshPool: MeshPool
  • readonly property SpriteResource.sheetProperties: SheetProperties
  • readonly property SpriteResource.texture: THREE.DataTexture
  • readonly property SpriteResource.uvTileSize: THREE.Vector2
class SpriteResourceManagerconstructor SpriteResourceManager(scene: Scene)
Three.js WebGPU
  • method SpriteResourceManager.clearCache(): void
  • method SpriteResourceManager.createResource(config: ResourceConfig): Promise<SpriteResource>
  • method SpriteResourceManager.getOrCreateResource(texture: THREE.DataTexture, sheetProps: SheetProperties): Promise<SpriteResource>
class SpriteUtils
Three.js WebGPU
  • static method SpriteUtils.fromFile(path: string, { materialParameters, }?: { materialParameters?: Omit<SpriteMaterialParameters, "map">; }): Promise<Sprite>
  • static method SpriteUtils.sheetFromFile(path: string, numFrames: number): Promise<SheetSprite>
class TextureUtils
Three.js WebGPU
  • static method TextureUtils.createCheckerboard(size?: number, color1?: Color, color2?: Color, checkSize?: number): Texture
  • static method TextureUtils.createGradient(size?: number, startColor?: Color, endColor?: Color, direction?: "horizontal" | "vertical" | "radial"): Texture
  • static method TextureUtils.createNoise(size?: number, scale?: number, octaves?: number, color1?: Color, color2?: Color): Texture
  • static method TextureUtils.fromFile(path: string): Promise<DataTexture | null>
  • static method TextureUtils.loadTextureFromFile(path: string): Promise<DataTexture | null>
class ThreeCliRendererconstructor ThreeCliRenderer(cliRenderer: CliRenderer, options: ThreeCliRendererOptions)
Three.js WebGPU
  • method ThreeCliRenderer.destroy(): void
  • method ThreeCliRenderer.doDrawScene(root: Scene, camera: PerspectiveCamera | OrthographicCamera, buffer: OptimizedBuffer, deltaTime: number): Promise<void>
  • method ThreeCliRenderer.drawScene(root: Scene, buffer: OptimizedBuffer, deltaTime: number): Promise<void>
  • method ThreeCliRenderer.getActiveCamera(): PerspectiveCamera | OrthographicCamera
  • method ThreeCliRenderer.getSuperSampleAlgorithm(): SuperSampleAlgorithm
  • method ThreeCliRenderer.init(): Promise<void>
  • method ThreeCliRenderer.renderStats(buffer: OptimizedBuffer): void
  • method ThreeCliRenderer.saveToFile(filePath: string): Promise<void>
  • method ThreeCliRenderer.setActiveCamera(camera: PerspectiveCamera | OrthographicCamera): void
  • method ThreeCliRenderer.setBackgroundColor(color: RGBA): void
  • method ThreeCliRenderer.setSize(width: number, height: number, forceUpdate?: boolean): void
  • method ThreeCliRenderer.setSuperSampleAlgorithm(superSampleAlgorithm: SuperSampleAlgorithm): void
  • method ThreeCliRenderer.toggleDebugStats(): void
  • method ThreeCliRenderer.toggleSuperSampling(): void
  • readonly property ThreeCliRenderer.aspectRatio: number
class ThreeRenderable extends Renderableconstructor ThreeRenderable(ctx: RenderContext, options: ThreeRenderableOptions)
Three.js WebGPU
  • method ThreeRenderable.getActiveCamera(): PerspectiveCamera | OrthographicCamera
  • method ThreeRenderable.getScene(): Scene | null
  • method ThreeRenderable.setActiveCamera(camera: PerspectiveCamera | OrthographicCamera): void
  • method ThreeRenderable.setAutoAspect(autoAspect: boolean): void
  • method ThreeRenderable.setScene(scene: Scene | null): void
  • protected method ThreeRenderable.destroySelf(): void
  • protected method ThreeRenderable.onResize(width: number, height: number): void
  • protected method ThreeRenderable.renderSelf(buffer: OptimizedBuffer, deltaTime: number): void
  • readonly property ThreeRenderable.aspectRatio: number
  • readonly property ThreeRenderable.renderer: ThreeCliRenderer
class TiledSpriteconstructor TiledSprite(id: string, userSpriteDefinition: SpriteDefinition, animator: SpriteAnimator, animationInstanceParams: Array<{ name: string; state: ResolvedAnimationState; resource: SpriteResource; index: number; instanceManager: InstanceManager; frameAttribute: THREE.InstancedBufferAttribute; flipAttribute: THREE.InstancedBufferAttribute; }>)
Three.js WebGPU
  • method TiledSprite.destroy(): void
  • method TiledSprite.getCurrentAnimationName(): string
  • method TiledSprite.getScale(): THREE.Vector3
  • method TiledSprite.getWorldPlaneSize(): THREE.Vector2
  • method TiledSprite.getWorldTransform(): THREE.Matrix4
  • method TiledSprite.goToFrame(frame: number): void
  • method TiledSprite.isPlaying(): boolean
  • method TiledSprite.play(): void
  • method TiledSprite.setAnimation(animationName: string): Promise<void>
  • method TiledSprite.setFrameDuration(newFrameDuration: number): void
  • method TiledSprite.setPosition(position: THREE.Vector3): void
  • method TiledSprite.setRotation(rotation: THREE.Quaternion): void
  • method TiledSprite.setScale(scale: THREE.Vector3): void
  • method TiledSprite.setTransform(position: THREE.Vector3, rotation: THREE.Quaternion, newScale: THREE.Vector3): void
  • method TiledSprite.stop(): void
  • method TiledSprite.update(deltaTime: number): void
  • property TiledSprite.visible: boolean
  • readonly property TiledSprite.currentAnimation: Animation
  • readonly property TiledSprite.currentTransform: { position: THREE.Vector3; quaternion: THREE.Quaternion; scale: THREE.Vector3; }
  • readonly property TiledSprite.definition: SpriteDefinition
  • readonly property TiledSprite.id: string

Interfaces#

interface AnimationDefinition
Three.js WebGPU
  • property AnimationDefinition.animFrameOffset?: number
  • property AnimationDefinition.animNumFrames?: number
  • property AnimationDefinition.flipX?: boolean
  • property AnimationDefinition.flipY?: boolean
  • property AnimationDefinition.frameDuration?: number
  • property AnimationDefinition.initialFrame?: number
  • property AnimationDefinition.loop?: boolean
  • property AnimationDefinition.resource: SpriteResource
interface AnimationStateConfig
Three.js WebGPU
  • property AnimationStateConfig.animFrameOffset: number
  • property AnimationStateConfig.animNumFrames: number
  • property AnimationStateConfig.flipX?: boolean
  • property AnimationStateConfig.flipY?: boolean
  • property AnimationStateConfig.frameDuration?: number
  • property AnimationStateConfig.imagePath: string
  • property AnimationStateConfig.initialFrame?: number
  • property AnimationStateConfig.loop?: boolean
  • property AnimationStateConfig.sheetNumFrames: number
interface ExplosionCreationData
Three.js WebGPU
  • property ExplosionCreationData.frameUvOffset: THREE.Vector2
  • property ExplosionCreationData.frameUvSize: THREE.Vector2
  • property ExplosionCreationData.resource: SpriteResource
  • property ExplosionCreationData.spriteWorldTransform: THREE.Matrix4
interface ExplosionEffectParameters
Three.js WebGPU
  • property ExplosionEffectParameters.angularVelocityMax: THREE.Vector3
  • property ExplosionEffectParameters.angularVelocityMin: THREE.Vector3
  • property ExplosionEffectParameters.durationMs: number
  • property ExplosionEffectParameters.fadeOut: boolean
  • property ExplosionEffectParameters.gravity: number
  • property ExplosionEffectParameters.gravityScale: number
  • property ExplosionEffectParameters.initialVelocityYBoost: number
  • property ExplosionEffectParameters.materialFactory: () => NodeMaterial
  • property ExplosionEffectParameters.numCols: number
  • property ExplosionEffectParameters.numRows: number
  • property ExplosionEffectParameters.strength: number
  • property ExplosionEffectParameters.strengthVariation: number
  • property ExplosionEffectParameters.zVariationStrength: number
interface ExplosionHandle
Three.js WebGPU
  • property ExplosionHandle.hasBeenRestored: boolean
  • property ExplosionHandle.restoreSprite: (spriteAnimator: SpriteAnimator) => Promise<TiledSprite | null>
  • readonly property ExplosionHandle.effect: ExplodingSpriteEffect
  • readonly property ExplosionHandle.recreationData: SpriteRecreationData
interface InstanceManagerOptions
Three.js WebGPU
  • property InstanceManagerOptions.depthWrite?: boolean
  • property InstanceManagerOptions.frustumCulled?: boolean
  • property InstanceManagerOptions.matrix?: THREE.Matrix4
  • property InstanceManagerOptions.maxInstances: number
  • property InstanceManagerOptions.name?: string
  • property InstanceManagerOptions.renderOrder?: number
interface MeshPoolOptions
Three.js WebGPU
  • property MeshPoolOptions.geometry: () => THREE.BufferGeometry
  • property MeshPoolOptions.material: THREE.Material
  • property MeshPoolOptions.maxInstances: number
  • property MeshPoolOptions.name?: string
interface ParticleEffectParameters
Three.js WebGPU
  • property ParticleEffectParameters.angularVelocityMax: THREE.Vector3
  • property ParticleEffectParameters.angularVelocityMin: THREE.Vector3
  • property ParticleEffectParameters.animFrameOffset?: number
  • property ParticleEffectParameters.animNumFrames?: number
  • property ParticleEffectParameters.depthWrite?: boolean
  • property ParticleEffectParameters.fadeOut?: boolean
  • property ParticleEffectParameters.frameDuration?: number
  • property ParticleEffectParameters.gravity?: THREE.Vector3
  • property ParticleEffectParameters.initialVelocityMax: THREE.Vector3
  • property ParticleEffectParameters.initialVelocityMin: THREE.Vector3
  • property ParticleEffectParameters.lifetimeMsMax: number
  • property ParticleEffectParameters.lifetimeMsMin: number
  • property ParticleEffectParameters.loop?: boolean
  • property ParticleEffectParameters.materialFactory?: () => NodeMaterial
  • property ParticleEffectParameters.maxParticles: number
  • property ParticleEffectParameters.origins: THREE.Vector3[]
  • property ParticleEffectParameters.randomGravityFactorMinMax?: THREE.Vector2
  • property ParticleEffectParameters.renderOrder?: number
  • property ParticleEffectParameters.resource: SpriteResource
  • property ParticleEffectParameters.scale?: number
  • property ParticleEffectParameters.scaleOverLifeMinMax?: THREE.Vector2
  • property ParticleEffectParameters.spawnRadius: number | THREE.Vector3
interface PhysicsExplosionCreationData
Three.js WebGPU
  • property PhysicsExplosionCreationData.frameUvOffset: THREE.Vector2
  • property PhysicsExplosionCreationData.frameUvSize: THREE.Vector2
  • property PhysicsExplosionCreationData.resource: SpriteResource
  • property PhysicsExplosionCreationData.spriteWorldTransform: THREE.Matrix4
interface PhysicsExplosionEffectParameters
Three.js WebGPU
  • property PhysicsExplosionEffectParameters.angularDamping: number
  • property PhysicsExplosionEffectParameters.density: number
  • property PhysicsExplosionEffectParameters.durationMs: number
  • property PhysicsExplosionEffectParameters.explosionForce: number
  • property PhysicsExplosionEffectParameters.fadeOut: boolean
  • property PhysicsExplosionEffectParameters.forceVariation: number
  • property PhysicsExplosionEffectParameters.friction: number
  • property PhysicsExplosionEffectParameters.gravityScale: number
  • property PhysicsExplosionEffectParameters.linearDamping: number
  • property PhysicsExplosionEffectParameters.materialFactory: () => NodeMaterial
  • property PhysicsExplosionEffectParameters.numCols: number
  • property PhysicsExplosionEffectParameters.numRows: number
  • property PhysicsExplosionEffectParameters.restitution: number
  • property PhysicsExplosionEffectParameters.torqueStrength: number
interface PhysicsExplosionHandle
Three.js WebGPU
  • property PhysicsExplosionHandle.hasBeenRestored: boolean
  • property PhysicsExplosionHandle.restoreSprite: (spriteAnimator: SpriteAnimator) => Promise<TiledSprite | null>
  • readonly property PhysicsExplosionHandle.effect: PhysicsExplodingSpriteEffect
  • readonly property PhysicsExplosionHandle.recreationData: PhysicsSpriteRecreationData
interface PhysicsSpriteRecreationData
Three.js WebGPU
  • property PhysicsSpriteRecreationData.currentTransform: { position: THREE.Vector3; quaternion: THREE.Quaternion; scale: THREE.Vector3; }
  • property PhysicsSpriteRecreationData.definition: SpriteDefinition
interface ResourceConfig
Three.js WebGPU
  • property ResourceConfig.imagePath: string
  • property ResourceConfig.sheetNumFrames: number
interface SheetProperties
Three.js WebGPU
  • property SheetProperties.imagePath: string
  • property SheetProperties.sheetNumFrames: number
  • property SheetProperties.sheetTilesetHeight: number
  • property SheetProperties.sheetTilesetWidth: number
interface SpriteDefinition
Three.js WebGPU
  • property SpriteDefinition.animations: Record<string, AnimationDefinition>
  • property SpriteDefinition.depthWrite?: boolean
  • property SpriteDefinition.id?: string
  • property SpriteDefinition.initialAnimation: string
  • property SpriteDefinition.maxInstances?: number
  • property SpriteDefinition.renderOrder?: number
  • property SpriteDefinition.scale?: number
interface SpriteRecreationData
Three.js WebGPU
  • property SpriteRecreationData.currentTransform: { position: THREE.Vector3; quaternion: THREE.Quaternion; scale: THREE.Vector3; }
  • property SpriteRecreationData.definition: SpriteDefinition
interface ThreeCliRendererOptions
Three.js WebGPU
  • property ThreeCliRendererOptions.alpha?: boolean
  • property ThreeCliRendererOptions.autoResize?: boolean
  • property ThreeCliRendererOptions.backgroundColor?: RGBA
  • property ThreeCliRendererOptions.focalLength?: number
  • property ThreeCliRendererOptions.height: number
  • property ThreeCliRendererOptions.libPath?: string
  • property ThreeCliRendererOptions.superSample?: SuperSampleType
  • property ThreeCliRendererOptions.width: number
interface ThreeRenderableOptions extends RenderableOptions<ThreeRenderable>
Three.js WebGPU
  • property ThreeRenderableOptions.autoAspect?: boolean
  • property ThreeRenderableOptions.camera?: PerspectiveCamera | OrthographicCamera
  • property ThreeRenderableOptions.renderer?: Omit<ThreeCliRendererOptions, "width" | "height" | "autoResize">
  • property ThreeRenderableOptions.scene?: Scene | null

Types#

type ResolvedAnimationState = Required<AnimationStateConfig> & { sheetTilesetWidth: number; sheetTilesetHeight: number; texture: THREE.DataTexture; }
Three.js WebGPU

Enums#

enum SuperSampleAlgorithm
Three.js WebGPU
  • enum-member SuperSampleAlgorithm.PRE_SQUEEZED = 1
  • enum-member SuperSampleAlgorithm.STANDARD = 0
enum SuperSampleType
Three.js WebGPU
  • enum-member SuperSampleType.CPU = "cpu"
  • enum-member SuperSampleType.GPU = "gpu"
  • enum-member SuperSampleType.NONE = "none"

Constants and variables#

const DEFAULT_EXPLOSION_PARAMETERS: ExplosionEffectParameters
Three.js WebGPU
const DEFAULT_PHYSICS_EXPLOSION_PARAMETERS: PhysicsExplosionEffectParameters
Three.js WebGPU

Namespaces and re-exports#

namespace THREE from "three"
Three.js WebGPU