# defineThreeLayer

```ts
import { defineThreeLayer } from "@pibbl/three";
```

`defineThreeLayer()` builds on
[`defineRenderLayer`](/reference/functions/define-render-layer/). It creates one
transparent `THREE.WebGLRenderer` per mounted Pibbl component identity and passes
that renderer through `PibblThreeLayerContext`.

The required `create(context, initialProps)` callback returns an application
[`PibblThreeLayerResources`](/reference/types/three/#pibblthreelayerresources) object
containing a `THREE.Scene` and `THREE.Camera`. The complete
[`PibblThreeLayerDefinition`](/reference/types/three/#pibblthreelayerdefinition) supports
optional
`update`, `resize`, `render`, `targets`, `pick`, and `dispose` callbacks define
the rest of the synchronous lifecycle. If `render` is omitted, the adapter
renders the returned scene and camera directly.

Objects returned from `targets()` use
[`PibblThreeTarget`](/reference/types/three/#pibblthreetarget).

The returned Pibbl component accepts the definition's props plus the ordinary
render-layer style, event, focus, pointer, key, and `missBehavior` props. See
[the Three.js guide](/guides/three-js/) for the complete lifecycle and
interaction model.

## API details from source

<span id="api-defineThreeLayer"></span>

Defines a Pibbl external layer using ordinary Three.js scenes and resources. Each mount owns one
transparent renderer; dispose must release application-created resources, and animation uses
Pibbl's supplied frame and invalidation.

```ts
defineThreeLayer: <Props, Resources extends PibblThreeLayerResources>(definition: PibblThreeLayerDefinition<Props, Resources>) => PibblComponent<PibblRenderLayerProps<Props>>
```

Related API: [defineThreeLayer](/reference/functions/define-three-layer/), [PibblThreeLayerResources](/reference/types/three/#pibblthreelayerresources), [PibblThreeLayerDefinition](/reference/types/three/#pibblthreelayerdefinition), [PibblComponent](/reference/types/elements-components/#pibblcomponent), [PibblRenderLayerProps](/reference/types/canvas-runtime/#pibblrenderlayerprops).

### Parameters

- **`definition`** — Resource lifecycle, rendering overrides, targets, and picking configuration.
See [PibblThreeLayerDefinition](/reference/types/three/#pibblthreelayerdefinition) .

### Returns

A Pibbl component mounting a persistent Three.js scene boundary with an adapter-owned
renderer.

### See also

[PibblThreeLayerDefinition](/reference/types/three/#pibblthreelayerdefinition)

[PibblThreeLayerResources](/reference/types/three/#pibblthreelayerresources)

[View source — packages/three/src/lib/define-three-layer.ts:45](/source/packages/three/src/lib/define-three-layer-ts/#L45)

## Implementation guidance for agents

Read the [External renderers and Three.js companion](/agents/topics/external-renderers/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Three.js scene layer](/minimal-examples/render-layers/three-layer/): Mount a lit Three.js cube with Pibbl target clicks and raycast picking. [Plain source](/minimal/render-layers/three-layer.tsx)
## Documentation version

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