Flatland

Defined in: packages/three-flatland/src/Flatland.ts:280

Flatland - Unified 2D rendering pipeline for Three.js WebGPU.

Combines sprite batching, post-processing, render targets, and global uniforms into a single high-level API. Each instance privately owns the runtime shared between sprite batching and post-processing passes.

Examples

// Basic usage - render to viewport
const flatland = new Flatland({ viewSize: 400 })
flatland.add(new Sprite2D({ texture }))

// Render loop
function animate() {
  flatland.render(renderer)
  requestAnimationFrame(animate)
}

// Render to texture
import { RenderTarget } from 'three'

const target = new RenderTarget(512, 512)
const flatland = new Flatland({ renderTarget: target })
flatland.add(sprite)

// Use texture on 3D mesh
mesh.material.map = flatland.texture

// Render loop
flatland.render(renderer)  // Renders to target
renderer.render(scene3D, camera3D)  // Renders 3D with card

// React Three Fiber usage
import { Canvas, extend, useFrame, useThree } from '@react-three/fiber/webgpu'
import { Flatland, Sprite2D } from 'three-flatland/react'

extend({ Flatland, Sprite2D })

function Scene() {
  const flatlandRef = useRef<Flatland>(null)
  const { renderer } = useThree()

  useFrame(() => {
    flatlandRef.current?.render(renderer)
  })

  return (
    <flatland ref={flatlandRef} viewSize={400} clearColor={0x1a1a2e}>
      <sprite2D texture={texture} position={[0, 0, 0]} />
    </flatland>
  )
}

Extends

• Group 

Constructors

Constructor

new Flatland(options?): Flatland

Defined in: packages/three-flatland/src/Flatland.ts:495

Parameters

options?

FlatlandOptions = {}

Returns

Flatland

Overrides

Group.constructor

Properties

animations

animations: AnimationClip []

Defined in: three.js/core/Object3D:animations 

Array with object’s animation clips.

Default Value

[]

Inherited from

Group.animations

---

autoClear

autoClear: boolean

Defined in: packages/three-flatland/src/Flatland.ts:378

Auto-clear before render

---

castShadow

castShadow: boolean

Defined in: three.js/core/Object3D:castShadow 

Whether the object gets rendered into shadow map.

Default Value

false

Inherited from

Group.castShadow

---

children

children: Object3D <Object3DEventMap >[]

Defined in: three.js/core/Object3D:children 

Array with object’s children.

See

THREE.Object3DGroup | Group for info on manually grouping objects.

Default Value

[]

Inherited from

Group.children

---

clearAlpha

clearAlpha: number

Defined in: packages/three-flatland/src/Flatland.ts:384

Clear alpha

---

clearColor

clearColor: Color 

Defined in: packages/three-flatland/src/Flatland.ts:381

Clear color

---

count?

optional count?: number

Defined in: three.js/renderers/common/Backend:count 

Inherited from

Group.count

---

customDepthMaterial?

optional customDepthMaterial?: Material <MaterialEventMap >

Defined in: three.js/core/Object3D:customDepthMaterial 

Custom depth material to be used when rendering to the depth map.

Remarks

Can only be used in context of meshes. When shadow-casting with a THREE.DirectionalLight | DirectionalLight or THREE.SpotLight | SpotLight, if you are modifying vertex positions in the vertex shader you must specify a customDepthMaterial for proper shadows.

Default Value

undefined

Inherited from

Group.customDepthMaterial

---

customDistanceMaterial?

optional customDistanceMaterial?: Material <MaterialEventMap >

Defined in: three.js/core/Object3D:customDistanceMaterial 

Same as customDepthMaterial, but used with THREE.Object3DPointLight | PointLight.

Default Value

undefined

Inherited from

Group.customDistanceMaterial

---

frustumCulled

frustumCulled: boolean

Defined in: three.js/core/Object3D:frustumCulled 

When this is set, it checks every frame if the object is in the frustum of the camera before rendering the object. If set to false the object gets rendered every frame even if it is not in the frustum of the camera.

Default Value

true

Inherited from

Group.frustumCulled

---

globals

readonly globals: GlobalUniforms

Defined in: packages/three-flatland/src/Flatland.ts:315

Global uniforms shared across all sprite materials

---

id

readonly id: number

Defined in: three.js/core/Object3D:id 

Unique number for this Object3D  instance.

Remarks

Note that ids are assigned in chronological order: 1, 2, 3, …, incrementing by one for each new object. Expects a Integer

Inherited from

Group.id

---

isGroup

readonly isGroup: true

Defined in: three.js/objects/Group:isGroup 

Read-only flag to check if a given object is of type Group .

Remarks

This is a constant value

Default Value

true

Inherited from

Group.isGroup

---

isObject3D

readonly isObject3D: true

Defined in: three.js/core/Object3D:isObject3D 

Flag to check if a given object is of type Object3D .

Remarks

This is a constant value

Default Value

true

Inherited from

Group.isObject3D

---

layers

layers: Layers 

Defined in: three.js/core/Object3D:layers 

The layer membership of the object.

Remarks

The object is only visible if it has at least one layer in common with the THREE.Object3DCamera | Camera in use. This property can also be used to filter out unwanted objects in ray-intersection tests when using THREE.Raycaster | Raycaster.

Default Value

new THREE.Layers()

Inherited from

Group.layers

---

matrix

matrix: Matrix4 

Defined in: three.js/core/Object3D:matrix 

The local transform matrix.

Default Value

new THREE.Matrix4()

Inherited from

Group.matrix

---

matrixAutoUpdate

matrixAutoUpdate: boolean

Defined in: three.js/core/Object3D:matrixAutoUpdate 

When this is set, it calculates the matrix of position, (rotation or quaternion) and scale every frame and also recalculates the matrixWorld property.

Default Value

DEFAULT_MATRIX_AUTO_UPDATE - that is (true).

Inherited from

Group.matrixAutoUpdate

---

matrixWorld

matrixWorld: Matrix4 

Defined in: three.js/core/Object3D:matrixWorld 

The global transform of the object.

Remarks

If the Object3D  has no parent, then it’s identical to the local transform THREE.Object3D.matrix | .matrix.

Default Value

new THREE.Matrix4()

Inherited from

Group.matrixWorld

---

matrixWorldAutoUpdate

matrixWorldAutoUpdate: boolean

Defined in: three.js/core/Object3D:matrixWorldAutoUpdate 

If set, then the renderer checks every frame if the object and its children need matrix updates. When it isn’t, then you have to maintain all matrices in the object and its children yourself.

Default Value

DEFAULT_MATRIX_WORLD_AUTO_UPDATE - that is (true).

Inherited from

Group.matrixWorldAutoUpdate

---

matrixWorldNeedsUpdate

matrixWorldNeedsUpdate: boolean

Defined in: three.js/core/Object3D:matrixWorldNeedsUpdate 

When this is set, it calculates the matrixWorld in that frame and resets this property to false.

Default Value

false

Inherited from

Group.matrixWorldNeedsUpdate

---

modelViewMatrix

readonly modelViewMatrix: Matrix4 

Defined in: three.js/core/Object3D:modelViewMatrix 

Default Value

new THREE.Matrix4()

Inherited from

Group.modelViewMatrix

---

name

name: string

Defined in: three.js/core/Object3D:name 

Optional name of the object

Remarks

(doesn’t need to be unique).

Default Value

""

Inherited from

Group.name

---

normalMatrix

readonly normalMatrix: Matrix3 

Defined in: three.js/core/Object3D:normalMatrix 

Default Value

new THREE.Matrix3()

Inherited from

Group.normalMatrix

---

occlusionTest?

optional occlusionTest?: boolean

Defined in: three.js/renderers/common/Backend:occlusionTest 

Inherited from

Group.occlusionTest

---

parent

parent: Object3D <Object3DEventMap > | null

Defined in: three.js/core/Object3D:parent 

Object’s parent in the scene graph .

Remarks

An object can have at most one parent.

Default Value

null

Inherited from

Group.parent

---

pivot

pivot: Vector3  | null

Defined in: three.js/core/Object3D:pivot 

The pivot point for rotation and scale transformations. When set, rotation and scale are applied around this point instead of the object’s origin.

Default

null

Inherited from

Group.pivot

---

position

readonly position: Vector3 

Defined in: three.js/core/Object3D:position 

Object’s local position.

Default Value

new THREE.Vector3() - that is (0, 0, 0).

Inherited from

Group.position

---

quaternion

readonly quaternion: Quaternion 

Defined in: three.js/core/Object3D:quaternion 

Object’s local rotation as a THREE.Quaternion | Quaternion.

Default Value

new THREE.Quaternion() - that is (0, 0, 0, 1).

Inherited from

Group.quaternion

---

receiveShadow

receiveShadow: boolean

Defined in: three.js/core/Object3D:receiveShadow 

Whether the material receives shadows.

Default Value

false

Inherited from

Group.receiveShadow

---

renderOrder

renderOrder: number

Defined in: three.js/core/Object3D:renderOrder 

This value allows the default rendering order of scene graph  objects to be overridden although opaque and transparent objects remain sorted independently.

Remarks

When this property is set for an instance of Group , all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder.

Default Value

0

Inherited from

Group.renderOrder

---

rotation

readonly rotation: Euler 

Defined in: three.js/core/Object3D:rotation 

Object’s local rotation (Euler angles ), in radians.

Default Value

new THREE.Euler() - that is (0, 0, 0, Euler.DEFAULT_ORDER).

Inherited from

Group.rotation

---

scale

readonly scale: Vector3 

Defined in: three.js/core/Object3D:scale 

The object’s local scale.

Default Value

new THREE.Vector3( 1, 1, 1 )

Inherited from

Group.scale

---

scene

readonly scene: Scene 

Defined in: packages/three-flatland/src/Flatland.ts:285

Internal scene containing sprites

---

spriteGroup

readonly spriteGroup: SpriteGroup

Defined in: packages/three-flatland/src/Flatland.ts:309

Internal sprite group for batching

---

static

static: boolean

Defined in: three.js/core/Object3D:static 

Whether the 3D object is supposed to be static or not. If set to true, it means the 3D object is not going to be changed after the initial renderer. This includes geometry and material settings. A static 3D object can be processed by the renderer slightly faster since certain state checks can be bypassed.

Only relevant in context of WebGPURenderer.

Default

false

Inherited from

Group.static

---

type

readonly type: string

Defined in: three.js/core/Object3D:type 

A Read-only string to check this object type.

Remarks

This can be used to find a specific type of Object3D in a scene. Sub-classes will update this value.

Default Value

Object3D

Inherited from

Group.type

---

up

up: Vector3 

Defined in: three.js/core/Object3D:up 

This is used by the lookAt  method, for example, to determine the orientation of the result.

Default Value

Object3D.DEFAULT_UP - that is (0, 1, 0).

Inherited from

Group.up

---

userData

userData: Record<string, any>

Defined in: three.js/core/Object3D:userData 

An object that can be used to store custom data about the Object3D .

Remarks

It should not hold references to functions as these will not be cloned.

Default

{}

Inherited from

Group.userData

---

uuid

uuid: string

Defined in: three.js/core/Object3D:uuid 

UUID  of this object instance.

Remarks

This gets automatically assigned and shouldn’t be edited.

Inherited from

Group.uuid

---

visible

visible: boolean

Defined in: three.js/core/Object3D:visible 

Object gets rendered if true.

Default Value

true

Inherited from

Group.visible

---

DEFAULT_MATRIX_AUTO_UPDATE

static DEFAULT_MATRIX_AUTO_UPDATE: boolean

Defined in: three.js/core/Object3D:DEFAULT_MATRIX_AUTO_UPDATE 

The default setting for matrixAutoUpdate for newly created Object3Ds.

Default Value

true

Inherited from

Group.DEFAULT_MATRIX_AUTO_UPDATE

---

DEFAULT_MATRIX_WORLD_AUTO_UPDATE

static DEFAULT_MATRIX_WORLD_AUTO_UPDATE: boolean

Defined in: three.js/core/Object3D:DEFAULT_MATRIX_WORLD_AUTO_UPDATE 

The default setting for matrixWorldAutoUpdate for newly created Object3Ds.

Default Value

true

Inherited from

Group.DEFAULT_MATRIX_WORLD_AUTO_UPDATE

---

DEFAULT_UP

static DEFAULT_UP: Vector3 

Defined in: three.js/core/Object3D:DEFAULT_UP 

The default up direction for objects, also used as the default position for THREE.DirectionalLight | DirectionalLight, THREE.HemisphereLight | HemisphereLight and THREE.Spotlight | Spotlight (which creates lights shining from the top down).

Default Value

new THREE.Vector3( 0, 1, 0)

Inherited from

Group.DEFAULT_UP

---

options

static options: RenderingSetting | undefined = undefined

Defined in: packages/three-flatland/src/Flatland.ts:282

Class-level rendering defaults, resolved before RenderingConfig.

Accessors

aspect

Get Signature

get aspect(): number | "auto"

Defined in: packages/three-flatland/src/Flatland.ts:753

Get the configured aspect mode. Returns 'auto' while Flatland follows the render surface; use resolvedAspect for the camera’s current numeric ratio. A PixelPerfectCamera follows the physical output shape even when this property retains a numeric regular-camera setting. A user-supplied camera keeps its authored frustum regardless of this mode.

Returns

number | "auto"

Set Signature

set aspect(value): void

Defined in: packages/three-flatland/src/Flatland.ts:782

A number pins the regular managed camera ratio manually. A PixelPerfectCamera continues following the physical output shape; the numeric value is retained in case pixelPerfect is later disabled. Assigning 'auto' restores automatic internal-camera and effect sizing, including after resize(). User-supplied cameras keep their authored frustum. The explicit sentinel also lets R3F restore constructor defaults when an aspect JSX prop is removed. Invalid numeric values are ignored.

Parameters

value

number | "auto"

Returns

void

---

camera

Get Signature

get camera(): OrthographicCamera 

Defined in: packages/three-flatland/src/Flatland.ts:645

The camera flatland renders its internal scene with. Read-only access for event integration (portal events.compute re-casts pointer rays from this camera — spec §8.1) and debugging.

Returns

OrthographicCamera 

Set Signature

set camera(value): void

Defined in: packages/three-flatland/src/Flatland.ts:686

Set a custom camera. Assigning the default camera read from a no-arg Flatland instance restores this instance’s own managed camera; this is the property-removal path used by React Three Fiber.

Parameters

value

OrthographicCamera 

Returns

void

---

lighting

Get Signature

get lighting(): LightEffect | null

Defined in: packages/three-flatland/src/Flatland.ts:1567

Get the active LightEffect.

Returns

LightEffect | null

---

lights

Get Signature

get lights(): readonly Light2D[]

Defined in: packages/three-flatland/src/Flatland.ts:1560

Get the active Light2D instances.

Returns

readonly Light2D[]

---

outputNode

Get Signature

get outputNode(): Node  | null

Defined in: packages/three-flatland/src/Flatland.ts:860

Get/set the output node for post-processing effects. Set this to apply TSL effect chains.

Returns

Node  | null

Set Signature

set outputNode(value): void

Defined in: packages/three-flatland/src/Flatland.ts:864

Parameters

value

Node 

Returns

void

---

passes

Get Signature

get passes(): readonly PassEffect[]

Defined in: packages/three-flatland/src/Flatland.ts:1539

Get the current post-processing passes.

Returns

readonly PassEffect[]

---

passNode

Get Signature

get passNode(): PassNode  | null

Defined in: packages/three-flatland/src/Flatland.ts:852

Get the pass node for composing effects.

Returns

PassNode  | null

---

pixelPerfect

Get Signature

get pixelPerfect(): boolean

Defined in: packages/three-flatland/src/Flatland.ts:654

Whether Flatland manages a PixelPerfectCamera. Toggling this while a custom camera is active records the preferred internal-camera mode; the custom camera remains untouched until it is removed.

Returns

boolean

Set Signature

set pixelPerfect(value): void

Defined in: packages/three-flatland/src/Flatland.ts:658

Parameters

value

boolean

Returns

void

---

renderPipeline

Get Signature

get renderPipeline(): RenderPipeline  | null

Defined in: packages/three-flatland/src/Flatland.ts:845

Get the render pipeline instance.

Returns

RenderPipeline  | null

---

renderTarget

Get Signature

get renderTarget(): RenderTarget <Texture <unknown, TextureEventMap >, RenderTargetEventMap > | null

Defined in: packages/three-flatland/src/Flatland.ts:812

Get the render target (null = viewport).

Returns

RenderTarget <Texture <unknown, TextureEventMap >, RenderTargetEventMap > | null

Set Signature

set renderTarget(value): void

Defined in: packages/three-flatland/src/Flatland.ts:819

Set the render target.

Parameters

value

RenderTarget <Texture <unknown, TextureEventMap >, RenderTargetEventMap > | null

Returns

void

---

resolvedAspect

Get Signature

get resolvedAspect(): number

Defined in: packages/three-flatland/src/Flatland.ts:762

Current numeric camera aspect. For Flatland’s internal camera this includes the ratio resolved in auto mode; for a user-supplied camera it is derived directly from that camera’s authored orthographic frustum.

Returns

number

---

texture

Get Signature

get texture(): Texture <unknown, TextureEventMap > | null

Defined in: packages/three-flatland/src/Flatland.ts:838

Get the render target texture (or null if rendering to viewport).

Returns

Texture <unknown, TextureEventMap > | null

---

viewSize

Get Signature

get viewSize(): number

Defined in: packages/three-flatland/src/Flatland.ts:719

Get the view size.

Returns

number

Set Signature

set viewSize(value): void

Defined in: packages/three-flatland/src/Flatland.ts:726

Set the view size.

Parameters

value

number

Returns

void

---

viewWidth

Get Signature

get viewWidth(): number | undefined

Defined in: packages/three-flatland/src/Flatland.ts:734

Fixed horizontal design extent, or undefined for fill-at-integer-scale.

Returns

number | undefined

Set Signature

set viewWidth(value): void

Defined in: packages/three-flatland/src/Flatland.ts:738

Parameters

value

number | undefined

Returns

void

Methods

add()

add(…objects): this

Defined in: packages/three-flatland/src/Flatland.ts:1086

Add objects to Flatland. Sprites are routed to the internal SpriteGroup for batching. Other objects are added directly to the internal scene.

This overrides Group.add() to route children to the internal scene rather than this Group, enabling proper rendering with Flatland’s camera.

Parameters

objects

…Object3D <Object3DEventMap >[]

Returns

this

Overrides

Group.add

---

addEventListener()

addEventListener<T>(type, listener): void

Defined in: three.js/core/EventDispatcher:addEventListener 

Adds a listener to an event type.

Type Parameters

T

T extends keyof Object3DEventMap 

Parameters

type

T

The type of event to listen to.

listener

EventListener <Object3DEventMap [T], T, Flatland>

The function that gets called when the event is fired.

Returns

void

Inherited from

Group.addEventListener

---

addPass()

addPass(passEffect, order?): this

Defined in: packages/three-flatland/src/Flatland.ts:1384

Add a post-processing pass to the pipeline. Passes are applied in insertion order (or explicit order). Automatically enables post-processing.

Parameters

passEffect

PassEffect

PassEffect instance to add

order?

number

Optional explicit order (default: auto-increment)

Returns

this

this (for chaining)

Example

import { CRTEffect, VignetteEffect } from 'three-flatland'

const crt = new CRTEffect()
const vignette = new VignetteEffect()
flatland.addPass(crt).addPass(vignette)
crt.curvature = 0.3  // zero-cost uniform update

---

applyMatrix4()

applyMatrix4(matrix): void

Defined in: three.js/core/Object3D:applyMatrix4 

Applies the matrix transform to the object and updates the object’s position, rotation and scale.

Parameters

matrix

Matrix4 

Returns

void

Inherited from

Group.applyMatrix4

---

applyQuaternion()

applyQuaternion(quaternion): this

Defined in: three.js/core/Object3D:applyQuaternion 

Applies the rotation represented by the quaternion to the object.

Parameters

quaternion

Quaternion 

Returns

this

Inherited from

Group.applyQuaternion

---

attach()

attach(object): this

Defined in: three.js/core/Object3D:attach 

Adds a Object3D  as a child of this, while maintaining the object’s world transform.

Parameters

object

Object3D 

Returns

this

Remarks

Note: This method does not support scene graphs having non-uniformly-scaled nodes(s).

See

add 

Inherited from

Group.attach

---

clear()

clear(): this

Defined in: packages/three-flatland/src/Flatland.ts:1234

Remove all sprites and other objects from the internal scene. Overrides Group.clear() to clear the internal scene.

Returns

this

Overrides

Group.clear

---

clearPasses()

clearPasses(): this

Defined in: packages/three-flatland/src/Flatland.ts:1519

Remove all post-processing passes from the pipeline. Disables post-processing if it was auto-initialized.

Returns

this

this (for chaining)

---

clearRenderPipeline()

clearRenderPipeline(): void

Defined in: packages/three-flatland/src/Flatland.ts:1355

Clear the render pipeline setup.

Returns

void

---

clone()

clone(recursive?): this

Defined in: packages/three-flatland/src/Flatland.ts:2687

Clone for devtools/serialization compatibility. Flatland manages internal scene, camera, and render pipeline that cannot be meaningfully cloned. Returns a Group with cloned children.

Parameters

recursive?

boolean

Returns

this

Overrides

Group.clone

---

copy()

copy(object, recursive?): this

Defined in: three.js/core/Object3D:copy 

Copies the given object into this object.

Parameters

object

Object3D 

recursive?

boolean

If set to true, descendants of the object are copied next to the existing ones. If set to false, descendants are left unchanged. Default is true.

Returns

this

Remarks

Event listeners and user-defined callbacks (.onAfterRender and .onBeforeRender) are not copied.

Inherited from

Group.copy

---

declareSortLayer()

declareSortLayer(name, config): SortLayerConfig

Defined in: packages/three-flatland/src/Flatland.ts:292

Declare (or redeclare) a named sort layer for use with sprite.sortLayer and SortLayerGroup. Pair with a SortLayerRegistry interface augmentation for typed names.

Parameters

name

SortLayerName

config

SortLayerConfig

Returns

SortLayerConfig

---

dispatchEvent()

dispatchEvent<T>(event): void

Defined in: three.js/core/EventDispatcher:dispatchEvent 

Fire an event type.

Type Parameters

T

T extends keyof Object3DEventMap 

Parameters

event

BaseEvent <T> & Object3DEventMap [T]

The event that gets fired.

Returns

void

Inherited from

Group.dispatchEvent

---

dispose()

dispose(): void

Defined in: packages/three-flatland/src/Flatland.ts:2705

Dispose of all resources.

Returns

void

---

getObjectById()

getObjectById(id): Object3D <Object3DEventMap > | undefined

Defined in: three.js/core/Object3D:getObjectById 

Searches through an object and its children, starting with the object itself, and returns the first with a matching id.

Parameters

id

number

Unique number of the object instance. Expects a Integer

Returns

Object3D <Object3DEventMap > | undefined

Remarks

Note that ids are assigned in chronological order: 1, 2, 3, …, incrementing by one for each new object.

See

id

Inherited from

Group.getObjectById

---

getObjectByName()

getObjectByName(name): Object3D <Object3DEventMap > | undefined

Defined in: three.js/core/Object3D:getObjectByName 

Searches through an object and its children, starting with the object itself, and returns the first with a matching name.

Parameters

name

string

String to match to the children’s Object3D.name property.

Returns

Object3D <Object3DEventMap > | undefined

Remarks

Note that for most objects the name is an empty string by default You will have to set it manually to make use of this method.

Inherited from

Group.getObjectByName

---

getObjectByProperty()

getObjectByProperty(name, value): Object3D <Object3DEventMap > | undefined

Defined in: three.js/core/Object3D:getObjectByProperty 

Searches through an object and its children, starting with the object itself, and returns the first with a property that matches the value given.

Parameters

name

string

the property name to search for.

value

any

value of the given property.

Returns

Object3D <Object3DEventMap > | undefined

Inherited from

Group.getObjectByProperty

---

getObjectsByProperty()

getObjectsByProperty(name, value, optionalTarget?): Object3D <Object3DEventMap >[]

Defined in: three.js/core/Object3D:getObjectsByProperty 

Searches through an object and its children, starting with the object itself, and returns the first with a property that matches the value given.

Parameters

name

string

The property name to search for.

value

any

Value of the given property.

optionalTarget?

Object3D <Object3DEventMap >[]

target to set the result. Otherwise a new Array is instantiated. If set, you must clear this array prior to each call (i.e., array.length = 0;).

Returns

Object3D <Object3DEventMap >[]

Inherited from

Group.getObjectsByProperty

---

getWorldDirection()

getWorldDirection(target): Vector3 

Defined in: three.js/core/Object3D:getWorldDirection 

Returns a vector representing the direction of object’s positive z-axis in world space.

Parameters

target

Vector3 

The result will be copied into this Vector3.

Returns

Vector3 

Inherited from

Group.getWorldDirection

---

getWorldPosition()

getWorldPosition(target): Vector3 

Defined in: three.js/core/Object3D:getWorldPosition 

Returns a vector representing the position of the object in world space.

Parameters

target

Vector3 

The result will be copied into this Vector3.

Returns

Vector3 

Inherited from

Group.getWorldPosition

---

getWorldQuaternion()

getWorldQuaternion(target): Quaternion 

Defined in: three.js/core/Object3D:getWorldQuaternion 

Returns a quaternion representing the rotation of the object in world space.

Parameters

target

Quaternion 

The result will be copied into this Quaternion.

Returns

Quaternion 

Inherited from

Group.getWorldQuaternion

---

getWorldScale()

getWorldScale(target): Vector3 

Defined in: three.js/core/Object3D:getWorldScale 

Returns a vector of the scaling factors applied to the object for each axis in world space.

Parameters

target

Vector3 

The result will be copied into this Vector3.

Returns

Vector3 

Inherited from

Group.getWorldScale

---

hasEventListener()

hasEventListener<T>(type, listener): boolean

Defined in: three.js/core/EventDispatcher:hasEventListener 

Checks if listener is added to an event type.

Type Parameters

T

T extends keyof Object3DEventMap 

Parameters

type

T

The type of event to listen to.

listener

EventListener <Object3DEventMap [T], T, Flatland>

The function that gets called when the event is fired.

Returns

boolean

Inherited from

Group.hasEventListener

---

localToWorld()

localToWorld(vector): Vector3 

Defined in: three.js/core/Object3D:localToWorld 

Converts the vector from this object’s local space to world space.

Parameters

vector

Vector3 

A vector representing a position in this object’s local space.

Returns

Vector3 

Inherited from

Group.localToWorld

---

lookAt()

Call Signature

lookAt(vector): void

Defined in: three.js/core/Object3D:lookAt 

Rotates the object to face a point in world space.

Parameters

vector

Vector3 

A vector representing a position in world space to look at.

Returns

void

Remarks

This method does not support objects having non-uniformly-scaled parent(s).

Inherited from

Group.lookAt

Call Signature

lookAt(x, y, z): void

Defined in: three.js/core/Object3D:lookAt 

Rotates the object to face a point in world space.

Parameters

x

number

Expects a Float

y

number

Expects a Float

z

number

Expects a Float

Returns

void

Remarks

This method does not support objects having non-uniformly-scaled parent(s).

Inherited from

Group.lookAt

---

onAfterRender()

onAfterRender(renderer, scene, camera, geometry, material, group): void

Defined in: three.js/core/Object3D:onAfterRender 

An optional callback that is executed immediately after a 3D object is rendered.

Parameters

renderer

WebGLRenderer 

scene

Scene 

camera

Camera 

geometry

BufferGeometry 

material

Material 

group

Group 

Returns

void

Remarks

This function is called with the following parameters: renderer, scene, camera, geometry, material, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D , Group  or Bone are not renderable and thus this callback is not executed for such objects.

Inherited from

Group.onAfterRender

---

onAfterShadow()

onAfterShadow(renderer, scene, camera, shadowCamera, geometry, depthMaterial, group): void

Defined in: three.js/core/Object3D:onAfterShadow 

An optional callback that is executed immediately after a 3D object is rendered to a shadow map.

Parameters

renderer

WebGLRenderer 

scene

Scene 

camera

Camera 

shadowCamera

Camera 

geometry

BufferGeometry 

depthMaterial

Material 

group

Group 

Returns

void

Remarks

This function is called with the following parameters: renderer, scene, camera, shadowCamera, geometry, depthMaterial, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D , Group  or Bone are not renderable and thus this callback is not executed for such objects.

Inherited from

Group.onAfterShadow

---

onBeforeRender()

onBeforeRender(renderer, scene, camera, geometry, material, group): void

Defined in: three.js/core/Object3D:onBeforeRender 

An optional callback that is executed immediately before a 3D object is rendered.

Parameters

renderer

WebGLRenderer 

scene

Scene 

camera

Camera 

geometry

BufferGeometry 

material

Material 

group

Group 

Returns

void

Remarks

This function is called with the following parameters: renderer, scene, camera, geometry, material, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D , Group  or Bone are not renderable and thus this callback is not executed for such objects.

Inherited from

Group.onBeforeRender

---

onBeforeShadow()

onBeforeShadow(renderer, scene, camera, shadowCamera, geometry, depthMaterial, group): void

Defined in: three.js/core/Object3D:onBeforeShadow 

An optional callback that is executed immediately before a 3D object is rendered to a shadow map.

Parameters

renderer

WebGLRenderer 

scene

Scene 

camera

Camera 

shadowCamera

Camera 

geometry

BufferGeometry 

depthMaterial

Material 

group

Group 

Returns

void

Remarks

This function is called with the following parameters: renderer, scene, camera, shadowCamera, geometry, depthMaterial, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D , Group  or Bone are not renderable and thus this callback is not executed for such objects.

Inherited from

Group.onBeforeShadow

---

raycast()

raycast(raycaster, intersects): void

Defined in: three.js/core/Object3D:raycast 

Abstract (empty) method to get intersections between a casted ray and this object

Parameters

raycaster

Raycaster 

intersects

Intersection <Object3D <Object3DEventMap >>[]

Returns

void

Remarks

Subclasses such as THREE.Mesh | Mesh, THREE.Line | Line, and THREE.Points | Points implement this method in order to use raycasting.

See

THREE.Raycaster | Raycaster

Default Value

() => {}

Inherited from

Group.raycast

---

remove()

remove(…objects): this

Defined in: packages/three-flatland/src/Flatland.ts:1192

Remove objects from Flatland. This overrides Group.remove() to properly remove from internal scene/spriteGroup.

Parameters

objects

…Object3D <Object3DEventMap >[]

Returns

this

Overrides

Group.remove

---

removeEventListener()

removeEventListener<T>(type, listener): void

Defined in: three.js/core/EventDispatcher:removeEventListener 

Removes a listener from an event type.

Type Parameters

T

T extends keyof Object3DEventMap 

Parameters

type

T

The type of the listener that gets removed.

listener

EventListener <Object3DEventMap [T], T, Flatland>

The listener function that gets removed.

Returns

void

Inherited from

Group.removeEventListener

---

removeFromParent()

removeFromParent(): this

Defined in: three.js/core/Object3D:removeFromParent 

Removes this object from its current parent.

Returns

this

Inherited from

Group.removeFromParent

---

removePass()

removePass(passEffect): this

Defined in: packages/three-flatland/src/Flatland.ts:1500

Remove a post-processing pass from the pipeline.

Parameters

passEffect

PassEffect

The same PassEffect instance passed to addPass()

Returns

this

this (for chaining)

---

render()

render(renderer): void

Defined in: packages/three-flatland/src/Flatland.ts:2159

Render Flatland.

Parameters

renderer

WebGPURenderer 

Returns

void

---

resize()

resize(width, height): void

Defined in: packages/three-flatland/src/Flatland.ts:2561

Resize the rendering area, taking manual control of the aspect ratio and surface size (the automatic per-render sync is disabled from here on). The active destination fixes the authored unit for the whole manual-size session. With no render target attached, dimensions are logical CSS pixels and every later destination uses width × renderer DPR. With a render target attached, dimensions are physical texels and remain physical across later target swaps or a return to the canvas. Calling resize() again begins a new session using the destination active at that time.

Zero, negative, or non-finite dimensions are ignored — a transient unmeasured layout (R3F’s first commit reports a 0×0 canvas) must not latch a NaN/Infinity frustum, and must not disable the automatic sync that will pick up the real size once it exists.

Parameters

width

number

height

number

Returns

void

---

rotateOnAxis()

rotateOnAxis(axis, angle): this

Defined in: three.js/core/Object3D:rotateOnAxis 

Rotate an object along an axis in object space.

Parameters

axis

Vector3 

A normalized vector in object space.

angle

number

The angle in radians. Expects a Float

Returns

this

Remarks

The axis is assumed to be normalized.

Inherited from

Group.rotateOnAxis

---

rotateOnWorldAxis()

rotateOnWorldAxis(axis, angle): this

Defined in: three.js/core/Object3D:rotateOnWorldAxis 

Rotate an object along an axis in world space.

Parameters

axis

Vector3 

A normalized vector in world space.

angle

number

The angle in radians. Expects a Float

Returns

this

Remarks

The axis is assumed to be normalized Method Assumes no rotated parent.

Inherited from

Group.rotateOnWorldAxis

---

rotateX()

rotateX(angle): this

Defined in: three.js/core/Object3D:rotateX 

Rotates the object around x axis in local space.

Parameters

angle

number

Returns

this

Inherited from

Group.rotateX

---

rotateY()

rotateY(angle): this

Defined in: three.js/core/Object3D:rotateY 

Rotates the object around y axis in local space.

Parameters

angle

number

Returns

this

Inherited from

Group.rotateY

---

rotateZ()

rotateZ(angle): this

Defined in: three.js/core/Object3D:rotateZ 

Rotates the object around z axis in local space.

Parameters

angle

number

Returns

this

Inherited from

Group.rotateZ

---

setLighting()

setLighting(lightEffect): this

Defined in: packages/three-flatland/src/Flatland.ts:1593

Set the lighting effect for this Flatland instance. The LightEffect produces a ColorTransformFn that is applied to all lit sprites.

Flatland owns the active effect’s lifecycle while attached. Replacing it or passing null calls dispose() before detachment so GPU resources are released promptly. The effect instance remains reusable and will receive a fresh init → resize → update sequence when reattached; callers should not use effect-owned GPU resource handles while the effect is detached.

Parameters

lightEffect

LightEffect | null

LightEffect instance (or null to disable lighting)

Returns

this

this (for chaining)

Example

import { DefaultLightEffect } from '@three-flatland/presets'

const lighting = new DefaultLightEffect()
flatland.setLighting(lighting)
lighting.ambientIntensity = 0.4  // zero-cost uniform update

---

setRenderPipeline()

setRenderPipeline(renderPipeline, passNode): void

Defined in: packages/three-flatland/src/Flatland.ts:1340

Initialize the render pipeline with a given RenderPipeline instance. Users should create the RenderPipeline and pass node themselves for flexibility.

Parameters

renderPipeline

RenderPipeline 

passNode

PassNode 

Returns

void

Example

import { RenderPipeline, pass } from 'three/webgpu'
import { crtComplete } from 'three-flatland'

const pipeline = new RenderPipeline(renderer)
const scenePass = pass(flatland.scene, flatland.camera)
pipeline.outputNode = crtComplete(scenePass, uv(), { curvature: 0.1 })

flatland.setRenderPipeline(pipeline, scenePass)

Flatland preserves the pipeline’s outputColorTransform setting. Set it to false when a manual pipeline writes working-space color to a render target. With a PixelPerfectCamera, Flatland sizes the supplied scene pass to the camera’s integer viewport so the pipeline cannot introduce a fractional intermediate resample.

---

setRotationFromAxisAngle()

setRotationFromAxisAngle(axis, angle): void

Defined in: three.js/core/Object3D:setRotationFromAxisAngle 

Calls THREE.Quaternion.setFromAxisAngle | setFromAxisAngle(axis, angle) on the .quaternion.

Parameters

axis

Vector3 

A normalized vector in object space.

angle

number

Angle in radians. Expects a Float

Returns

void

Inherited from

Group.setRotationFromAxisAngle

---

setRotationFromEuler()

setRotationFromEuler(euler): void

Defined in: three.js/core/Object3D:setRotationFromEuler 

Calls THREE.Quaternion.setFromEuler | setFromEuler(euler) on the .quaternion.

Parameters

euler

Euler 

Euler angle specifying rotation amount.

Returns

void

Inherited from

Group.setRotationFromEuler

---

setRotationFromMatrix()

setRotationFromMatrix(m): void

Defined in: three.js/core/Object3D:setRotationFromMatrix 

Calls THREE.Quaternion.setFromRotationMatrix | setFromRotationMatrix(m) on the .quaternion.

Parameters

m

Matrix4 

Rotate the quaternion by the rotation component of the matrix.

Returns

void

Remarks

Note that this assumes that the upper 3x3 of m is a pure rotation matrix (i.e, unscaled).

Inherited from

Group.setRotationFromMatrix

---

setRotationFromQuaternion()

setRotationFromQuaternion(q): void

Defined in: three.js/core/Object3D:setRotationFromQuaternion 

Copy the given THREE.Quaternion | Quaternion into .quaternion.

Parameters

q

Quaternion 

Normalized Quaternion.

Returns

void

Inherited from

Group.setRotationFromQuaternion

---

sortLayer()

sortLayer(name): SortLayerConfig

Defined in: packages/three-flatland/src/Flatland.ts:304

Resolve a declared sort layer’s config — the hook for placing foreign objects relative to a layer:

skiaText.renderOrder = flatland.sortLayer('ui').renderOrder - 1

Parameters

name

SortLayerName

Returns

SortLayerConfig

---

toJSON()

toJSON(meta?): Object3DJSON 

Defined in: three.js/core/Object3D:toJSON 

Convert the object to three.js JSON Object/Scene format .

Parameters

meta?

JSONMeta 

Object containing metadata such as materials, textures or images for the object.

Returns

Object3DJSON 

Inherited from

Group.toJSON

---

translateOnAxis()

translateOnAxis(axis, distance): this

Defined in: three.js/core/Object3D:translateOnAxis 

Translate an object by distance along an axis in object space

Parameters

axis

Vector3 

A normalized vector in object space.

distance

number

The distance to translate. Expects a Float

Returns

this

Remarks

The axis is assumed to be normalized.

Inherited from

Group.translateOnAxis

---

translateX()

translateX(distance): this

Defined in: three.js/core/Object3D:translateX 

Translates object along x axis in object space by distance units.

Parameters

distance

number

Expects a Float

Returns

this

Inherited from

Group.translateX

---

translateY()

translateY(distance): this

Defined in: three.js/core/Object3D:translateY 

Translates object along y axis in object space by distance units.

Parameters

distance

number

Expects a Float

Returns

this

Inherited from

Group.translateY

---

translateZ()

translateZ(distance): this

Defined in: three.js/core/Object3D:translateZ 

Translates object along z axis in object space by distance units.

Parameters

distance

number

Expects a Float

Returns

this

Inherited from

Group.translateZ

---

traverse()

traverse(callback): void

Defined in: three.js/core/Object3D:traverse 

Executes the callback on this object and all descendants.

Parameters

callback

(object) => any

A function with as first argument an Object3D  object.

Returns

void

Remarks

Note: Modifying the scene graph inside the callback is discouraged.

Inherited from

Group.traverse

---

traverseAncestors()

traverseAncestors(callback): void

Defined in: three.js/core/Object3D:traverseAncestors 

Executes the callback on all ancestors.

Parameters

callback

(object) => any

A function with as first argument an Object3D  object.

Returns

void

Remarks

Note: Modifying the scene graph inside the callback is discouraged.

Inherited from

Group.traverseAncestors

---

traverseVisible()

traverseVisible(callback): void

Defined in: three.js/core/Object3D:traverseVisible 

Like traverse, but the callback will only be executed for visible objects

Parameters

callback

(object) => any

A function with as first argument an Object3D  object.

Returns

void

Remarks

Descendants of invisible objects are not traversed. Note: Modifying the scene graph inside the callback is discouraged.

Inherited from

Group.traverseVisible

---

updateMatrix()

updateMatrix(): void

Defined in: three.js/core/Object3D:updateMatrix 

Updates local transform.

Returns

void

Inherited from

Group.updateMatrix

---

updateMatrixWorld()

updateMatrixWorld(force?): void

Defined in: three.js/core/Object3D:updateMatrixWorld 

Updates the global transform of the object. And will update the object descendants if .matrixWorldNeedsUpdate is set to true or if the force parameter is set to true.

Parameters

force?

boolean

A boolean that can be used to bypass .matrixWorldAutoUpdate, to recalculate the world matrix of the object and descendants on the current frame. Useful if you cannot wait for the renderer to update it on the next frame, assuming .matrixWorldAutoUpdate set to true.

Returns

void

Inherited from

Group.updateMatrixWorld

---

updateWorldMatrix()

updateWorldMatrix(updateParents?, updateChildren?, force?): void

Defined in: three.js/core/Object3D:updateWorldMatrix 

An alternative version of Object3D#updateMatrixWorld  with more control over the update of ancestor and descendant nodes.

Parameters

updateParents?

boolean

Whether ancestor nodes should be updated or not.

updateChildren?

boolean

Whether descendant nodes should be updated or not.

force?

boolean

When set to true, a recomputation of world matrices is forced even when Object3D#matrixWorldNeedsUpdate is false.

Returns

void

Inherited from

Group.updateWorldMatrix

---

worldToLocal()

worldToLocal(vector): Vector3 

Defined in: three.js/core/Object3D:worldToLocal 

Converts the vector from world space to this object’s local space.

Parameters

vector

Vector3 

A vector representing a position in world space.

Returns

Vector3 

Inherited from

Group.worldToLocal