Three.js integration types

Import these contracts with type from @pibbl/three.

`PibblThreeInputBridge`

Its connect() method supplies the input element expected by controls such as OrbitControls.

`PibblThreeLayerContext`

Extends the core render-layer context with the owned THREE.WebGLRenderer and input bridge.

`PibblThreeLayerDefinition`

Defines the synchronous create, update, resize, render, targets, pick, and dispose callbacks used by defineThreeLayer().

`PibblThreeLayerResources`

Requires the application resource value to expose a Three scene and camera.

`PibblThreePicker`

A custom layer-local point picker that can replace default raycasting.

`PibblThreePickResult`

The miss, block, or Three-object target result returned by a picker.

`PibblThreeRendererOptions`

Normal Three renderer parameters except canvas and alpha; the adapter owns the OffscreenCanvas and always enables a transparent compositing surface.

`PibblThreeTarget`

Associates an ordinary THREE.Object3D with Pibbl event handlers, cursor, pointer policy, focusability, and optional keyboard-navigation bounds.

API details from source

PibblThreeInputBridge

Connects Three controls to Pibbl-routed input through an element-compatible bridge.

interface PibblThreeInputBridge

Related API: PibblThreeInputBridge.

Properties and methods

connect

connect: <Control>(create: (element: HTMLElement) => Control) => Control

Creates controls against the Pibbl input bridge and returns the created control instance. See PibblThreeInputBridge.

Parameters

create — Factory that constructs controls using Pibbl’s routed-input element.

Returns

The control object returned by the factory.

View source — packages/three/src/lib/types.ts:85

PibblThreeLayerContext

Pibbl surface context extended with the adapter-owned renderer and controls-input bridge.

interface PibblThreeLayerContext extends PibblRenderLayerContext

Properties and methods

renderer

readonly renderer: THREE.WebGLRenderer

The transparent renderer owned by this mounted adapter. See PibblThreeLayerContext.

View source — packages/three/src/lib/types.ts:122

input

readonly input: PibblThreeInputBridge

Related API: PibblThreeInputBridge.

Bridge used to connect Three controls to Pibbl-routed events. See PibblThreeInputBridge.

View source — packages/three/src/lib/types.ts:126

canvas

readonly canvas: OffscreenCanvas

Canvas surface associated with this resource or mount. See PibblRenderLayerContext.

View source — packages/core/src/lib/render-layer/types.ts:74

size

readonly size: PibblRenderLayerSize

Related API: PibblRenderLayerSize.

Current logical dimensions, backing-store dimensions, and effective pixel ratios. See PibblRenderLayerSize.

View source — packages/core/src/lib/render-layer/types.ts:76

invalidate

invalidate: () => void

Requests another Pibbl render through the shared scheduler. See PibblRenderLayerContext.

View source — packages/core/src/lib/render-layer/types.ts:80

PibblThreeLayerDefinition

Three scene resource lifecycle, optional rendering overrides, and Pibbl interaction integration.

interface PibblThreeLayerDefinition<Props, Resources extends PibblThreeLayerResources>

Properties and methods

renderer (optional)

readonly renderer?: PibblThreeRendererOptions | undefined

Related API: PibblThreeRendererOptions.

Three renderer construction options; Pibbl supplies the canvas and enables transparency. See PibblThreeRendererOptions.

View source — packages/three/src/lib/types.ts:149

create

create: (context: PibblThreeLayerContext, initialProps: Readonly<Props>) => Resources

Related API: PibblThreeLayerContext.

Creates the application’s scene, camera, and other explicitly owned resources. See PibblThreeLayerDefinition.

Parameters

context — Adapter-owned renderer, surface, input bridge, and invalidation services. See PibblThreeLayerContext .
initialProps — Props from the first mounted render.

Returns

Application-owned scene, camera, and additional resources retained for this mount.

View source — packages/three/src/lib/types.ts:158

update (optional)

update?: ((resources: Resources, props: Readonly<Props>, context: PibblThreeLayerContext) => void) | undefined

Related API: PibblThreeLayerContext.

Applies current props to the persistent Three resources. See PibblThreeLayerDefinition.

Parameters

resources — Resources returned by create.
props — Latest layer props.
context — Adapter-owned renderer, surface, input bridge, and invalidation services. See PibblThreeLayerContext .

View source — packages/three/src/lib/types.ts:166

resize (optional)

resize?: ((resources: Resources, size: PibblRenderLayerSize, context: PibblThreeLayerContext) => void) | undefined

Updates camera or application render targets after the layer size changes. See PibblThreeLayerDefinition.

Parameters

resources — Resources returned by create.
size — New logical and backing dimensions. See PibblRenderLayerSize.
context — Adapter-owned renderer, surface, input bridge, and invalidation services. See PibblThreeLayerContext .

View source — packages/three/src/lib/types.ts:179

render (optional)

render?: ((resources: Resources, frame: PibblRenderLayerFrame, context: PibblThreeLayerContext) => void) | undefined

Overrides rendering for custom effects; omitted callbacks use ordinary scene/camera rendering. See PibblThreeLayerDefinition.

Parameters

resources — Resources returned by create.
frame — Shared Pibbl frame timing and invalidation service. See PibblRenderLayerFrame .
context — Adapter-owned renderer, surface, input bridge, and invalidation services. See PibblThreeLayerContext .

View source — packages/three/src/lib/types.ts:193

targets (optional)

targets?: ((resources: Resources, props: Readonly<Props>) => Iterable<PibblThreeTarget>) | undefined

Related API: PibblThreeTarget.

Returns the Three objects exposed as Pibbl interaction and focus targets. See PibblThreeTarget.

Parameters

resources — Resources returned by create.
props — Props used by this interaction generation.

Returns

Object targets and their Pibbl event/focus metadata. See PibblThreeTarget.

View source — packages/three/src/lib/types.ts:205

pick (optional)

pick?: ((resources: Resources, context: PibblThreeLayerContext) => PibblThreePicker) | undefined

Creates a custom picker for the settled generation; omission uses the adapter’s raycasting. See PibblThreePicker.

Parameters

resources — Resources returned by create.
context — Adapter-owned renderer, surface, input bridge, and invalidation services. See PibblThreeLayerContext .

Returns

A picker for the current scene resources. See PibblThreePicker.

View source — packages/three/src/lib/types.ts:214

dispose (optional)

dispose?: ((resources: Resources, context: PibblThreeLayerContext) => void) | undefined

Related API: PibblThreeLayerContext.

Disposes application-created Three resources; the adapter disposes its own renderer. See PibblThreeLayerDefinition.

Parameters

resources — Application-owned resources returned by create; release geometries, materials, and other owned resources here.
context — Adapter context; the adapter releases its renderer and bridge after this callback. See PibblThreeLayerContext .

View source — packages/three/src/lib/types.ts:223

PibblThreeLayerResources

Application-owned scene and camera required by a Three layer; additional resources may be stored alongside them.

interface PibblThreeLayerResources

Related API: PibblThreeLayerResources.

Properties and methods

scene

readonly scene: THREE.Scene<THREE.Object3DEventMap>

Application-owned scene rendered by the layer. See THREE.Scene.

View source — packages/three/src/lib/types.ts:24

camera

readonly camera: THREE.Camera

Application-owned camera used for rendering and picking. See THREE.Camera.

View source — packages/three/src/lib/types.ts:26

PibblThreePicker

Hit-tests a layer-local logical point against a settled Three scene.

type PibblThreePicker = (
  point: Readonly<{
    /**
     * Horizontal coordinate or displacement in the containing coordinate system. See
     * {@link PibblThreePicker}.
     */
    x: number;
    /**
     * Vertical coordinate or displacement in the containing coordinate system. See
     * {@link PibblThreePicker}.
     */
    y: number;
  }>,
) => PibblThreePickResult

Parameters

point — Pointer position in layer-local logical coordinates.

Returns

A Three object target, a blocking hit, or a miss. See PibblThreePickResult.

PibblThreePickResult

The target, block, or miss result of picking in a Three layer.

type PibblThreePickResult = PibblRenderLayerHit<THREE.Object3D>

Properties and methods

kind

readonly kind: "block" | "miss" | "target"

Selects the kind of geometry, material, or result. See PibblRenderLayerHit.

View source — packages/core/src/lib/render-layer/types.ts:103

PibblThreeRendererOptions

Three renderer construction options, excluding the canvas and transparency owned by the adapter.

type PibblThreeRendererOptions = Omit<
  THREE.WebGLRendererParameters,
  "canvas" | "alpha"
>

Related API: PibblThreeRendererOptions.

PibblThreeTarget

A Three object registered as a Pibbl logical event and keyboard-focus target.

interface PibblThreeTarget

Related API: PibblThreeTarget.

Properties and methods

object

readonly object: THREE.Object3D<THREE.Object3DEventMap>

Three object registered as a Pibbl logical target. See THREE.Object3D.

View source — packages/three/src/lib/types.ts:40

handlers (optional)

Full type declaration

readonly handlers?: Partial<{ onAuxClick: PibblEventHandler<"auxclick">; onBeforeInput: PibblEventHandler<"beforeinput">; onBlur: PibblEventHandler<"blur">; onChange: PibblEventHandler<"change">; onClick: PibblEventHandler<"click">; onCompositionEnd: PibblEventHandler<"compositionend">; onCompositionStart: PibblEventHandler<"compositionstart">; onCompositionUpdate: PibblEventHandler<"compositionupdate">; onContextMenu: PibblEventHandler<"contextmenu">; onCopy: PibblEventHandler<"copy">; onCut: PibblEventHandler<"cut">; onDblClick: PibblEventHandler<"dblclick">; onDrag: PibblEventHandler<"drag">; onDragEnd: PibblEventHandler<"dragend">; onDragEnter: PibblEventHandler<"dragenter">; onDragLeave: PibblEventHandler<"dragleave">; onDragOver: PibblEventHandler<"dragover">; onDragStart: PibblEventHandler<"dragstart">; onDrop: PibblEventHandler<"drop">; onFocus: PibblEventHandler<"focus">; onFocusIn: PibblEventHandler<"focusin">; onFocusOut: PibblEventHandler<"focusout">; onGotPointerCapture: PibblEventHandler<"gotpointercapture">; onInput: PibblEventHandler<"input">; onKeyDown: PibblEventHandler<"keydown">; onKeyUp: PibblEventHandler<"keyup">; onLostPointerCapture: PibblEventHandler<"lostpointercapture">; onMouseDown: PibblEventHandler<"mousedown">; onMouseEnter: PibblEventHandler<"mouseenter">; onMouseLeave: PibblEventHandler<"mouseleave">; onMouseMove: PibblEventHandler<"mousemove">; onMouseOut: PibblEventHandler<"mouseout">; onMouseOver: PibblEventHandler<"mouseover">; onMouseUp: PibblEventHandler<"mouseup">; onPaste: PibblEventHandler<"paste">; onPointerCancel: PibblEventHandler<"pointercancel">; onPointerDown: PibblEventHandler<"pointerdown">; onPointerEnter: PibblEventHandler<"pointerenter">; onPointerLeave: PibblEventHandler<"pointerleave">; onPointerMove: PibblEventHandler<"pointermove">; onPointerOut: PibblEventHandler<"pointerout">; onPointerOver: PibblEventHandler<"pointerover">; onPointerRawUpdate: PibblEventHandler<"pointerrawupdate">; onPointerUp: PibblEventHandler<"pointerup">; onSelect: PibblEventHandler<"select">; onSelectionChange: PibblEventHandler<"selectionchange">; onTouchCancel: PibblEventHandler<"touchcancel">; onTouchEnd: PibblEventHandler<"touchend">; onTouchMove: PibblEventHandler<"touchmove">; onTouchStart: PibblEventHandler<"touchstart">; onWheel: PibblEventHandler<"wheel">; } & { onAuxClickCapture: PibblEventHandler<"auxclick">; onBeforeInputCapture: PibblEventHandler<"beforeinput">; onBlurCapture: PibblEventHandler<"blur">; onChangeCapture: PibblEventHandler<"change">; onClickCapture: PibblEventHandler<"click">; onCompositionEndCapture: PibblEventHandler<"compositionend">; onCompositionStartCapture: PibblEventHandler<"compositionstart">; onCompositionUpdateCapture: PibblEventHandler<"compositionupdate">; onContextMenuCapture: PibblEventHandler<"contextmenu">; onCopyCapture: PibblEventHandler<"copy">; onCutCapture: PibblEventHandler<"cut">; onDblClickCapture: PibblEventHandler<"dblclick">; onDragCapture: PibblEventHandler<"drag">; onDragEndCapture: PibblEventHandler<"dragend">; onDragEnterCapture: PibblEventHandler<"dragenter">; onDragLeaveCapture: PibblEventHandler<"dragleave">; onDragOverCapture: PibblEventHandler<"dragover">; onDragStartCapture: PibblEventHandler<"dragstart">; onDropCapture: PibblEventHandler<"drop">; onFocusCapture: PibblEventHandler<"focus">; onFocusInCapture: PibblEventHandler<"focusin">; onFocusOutCapture: PibblEventHandler<"focusout">; onGotPointerCaptureCapture: PibblEventHandler<"gotpointercapture">; onInputCapture: PibblEventHandler<"input">; onKeyDownCapture: PibblEventHandler<"keydown">; onKeyUpCapture: PibblEventHandler<"keyup">; onLostPointerCaptureCapture: PibblEventHandler<"lostpointercapture">; onMouseDownCapture: PibblEventHandler<"mousedown">; onMouseEnterCapture: PibblEventHandler<"mouseenter">; onMouseLeaveCapture: PibblEventHandler<"mouseleave">; onMouseMoveCapture: PibblEventHandler<"mousemove">; onMouseOutCapture: PibblEventHandler<"mouseout">; onMouseOverCapture: PibblEventHandler<"mouseover">; onMouseUpCapture: PibblEventHandler<"mouseup">; onPasteCapture: PibblEventHandler<"paste">; onPointerCancelCapture: PibblEventHandler<"pointercancel">; onPointerDownCapture: PibblEventHandler<"pointerdown">; onPointerEnterCapture: PibblEventHandler<"pointerenter">; onPointerLeaveCapture: PibblEventHandler<"pointerleave">; onPointerMoveCapture: PibblEventHandler<"pointermove">; onPointerOutCapture: PibblEventHandler<"pointerout">; onPointerOverCapture: PibblEventHandler<"pointerover">; onPointerRawUpdateCapture: PibblEventHandler<"pointerrawupdate">; onPointerUpCapture: PibblEventHandler<"pointerup">; onSelectCapture: PibblEventHandler<"select">; onSelectionChangeCapture: PibblEventHandler<"selectionchange">; onTouchCancelCapture: PibblEventHandler<"touchcancel">; onTouchEndCapture: PibblEventHandler<"touchend">; onTouchMoveCapture: PibblEventHandler<"touchmove">; onTouchStartCapture: PibblEventHandler<"touchstart">; onWheelCapture: PibblEventHandler<"wheel">; }> | undefined

Related API: PibblEventHandler, blur.

Event handlers dispatched for this logical target. See PibblEventHandlers.

View source — packages/three/src/lib/types.ts:42

pointerEvents (optional)

readonly pointerEvents?: PibblPointerEvents | undefined

Related API: PibblPointerEvents.

Whether this content participates in pointer targeting. See PibblPointerEvents.

View source — packages/three/src/lib/types.ts:44

cursor (optional)

readonly cursor?: string | undefined

Cursor shown while this target owns pointer presentation. See PibblThreeTarget.

View source — packages/three/src/lib/types.ts:46

keyboardFocusable (optional)

readonly keyboardFocusable?: boolean | undefined

Whether the target may receive keyboard focus. See PibblThreeTarget.

View source — packages/three/src/lib/types.ts:48

keyboardNavigationBounds (optional)

readonly keyboardNavigationBounds?: Readonly<LayoutBox> | undefined

Related API: LayoutBox.

Logical rectangle used for directional keyboard navigation. See LayoutBox.

View source — packages/three/src/lib/types.ts:50

Implementation guidance for agents

Read the External renderers and Three.js companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

Three.js orbit controls: Drag a cube using OrbitControls connected to Pibbl-routed input. Plain source
Three.js scene layer: Mount a lit Three.js cube with Pibbl target clicks and raycast picking. Plain source

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 380919b. ALPHA — NOT FOR PRODUCTION USE.

Three.js integration types

PibblThreeInputBridge

PibblThreeLayerContext

PibblThreeLayerDefinition

PibblThreeLayerResources

PibblThreePicker

PibblThreePickResult

PibblThreeRendererOptions

PibblThreeTarget

API details from source

PibblThreeInputBridge

See also

Properties and methods

Parameters

Returns

PibblThreeLayerContext

See also

Properties and methods

PibblThreeLayerDefinition

See also

Properties and methods

Parameters

Returns

Parameters

Parameters

Parameters

Parameters

Returns

Parameters

Returns

Parameters

PibblThreeLayerResources

See also

Properties and methods

PibblThreePicker

Parameters

Returns

See also

PibblThreePickResult

See also

Properties and methods

PibblThreeRendererOptions

See also

PibblThreeTarget

See also

Properties and methods

Implementation guidance for agents

Complete minimal examples

Documentation version

`PibblThreeInputBridge`

`PibblThreeLayerContext`

`PibblThreeLayerDefinition`

`PibblThreeLayerResources`

`PibblThreePicker`

`PibblThreePickResult`

`PibblThreeRendererOptions`

`PibblThreeTarget`