RenderAPI

Defined in: packages/threeplay/src/plugins/render/types.ts:79

API of the render plugin.

Methods

center()

center(): Vector2

Defined in: packages/threeplay/src/plugins/render/types.ts:89

Logical center (width/2, height/2).

Returns

Vector2

---

dirLight()

dirLight(opts?): Comp & object

Defined in: packages/threeplay/src/plugins/render/types.ts:140

Component: a directional light placed at the object.

Parameters

opts?

LightOpts

Returns

Comp & object

---

getBackground()

getBackground(): Color | null

Defined in: packages/threeplay/src/plugins/render/types.ts:92

Returns

Color | null

---

height()

height(): number

Defined in: packages/threeplay/src/plugins/render/types.ts:87

Logical height.

Returns

number

---

onResize()

onResize(fn): EventController

Defined in: packages/threeplay/src/plugins/render/types.ts:127

Called after the logical size or the scale changes.

Parameters

fn

() => void

Returns

EventController

---

overlay()

overlay(): HTMLElement | null

Defined in: packages/threeplay/src/plugins/render/types.ts:107

A DOM layer exactly on top of the drawn area, in logical units: a child positioned at left: x px; top: y px lands on logical (x, y). Used by the HUD; null when headless.

Returns

HTMLElement | null

---

pointLight()

pointLight(opts?): Comp & object

Defined in: packages/threeplay/src/plugins/render/types.ts:130

Component: a point light attached to the object.

Parameters

opts?

LightOpts & object

Returns

Comp & object

---

screenRay()

screenRay(screen): Ray

Defined in: packages/threeplay/src/plugins/render/types.ts:123

Ray from the camera through a logical screen point.

Parameters

screen

Vector2

Returns

Ray

---

screenshot()

screenshot(): string

Defined in: packages/threeplay/src/plugins/render/types.ts:125

PNG data URL of the last frame ("" when headless).

Returns

string

---

setBackground()

setBackground(color): void

Defined in: packages/threeplay/src/plugins/render/types.ts:91

Sets the clear color; null for transparent.

Parameters

color

ColorLike | null

Returns

void

---

setFog()

setFog(fog): void

Defined in: packages/threeplay/src/plugins/render/types.ts:94

Sets fog, or removes it with null.

Parameters

fog

FogOpts | null

Returns

void

---

setSunDirection()

setSunDirection(dir): void

Defined in: packages/threeplay/src/plugins/render/types.ts:113

Re-aims the default sun: dir is the direction the light travels ({ x: -1, y: -2, z: -1 } lights from above, from the +X/+Z side). The shadow box keeps following the camera. Does nothing with lighting: "none"; throws on a zero vector.

Parameters

dir

Vec3Like

Returns

void

---

spotLight()

spotLight(opts?): Comp & object

Defined in: packages/threeplay/src/plugins/render/types.ts:135

Component: a spot light attached to the object, pointing at target.

Parameters

opts?

LightOpts & object

Returns

Comp & object

---

toScreen()

toScreen(world): Vector2 | null

Defined in: packages/threeplay/src/plugins/render/types.ts:121

Projects a world point to logical screen coordinates (null if behind the camera).

Parameters

world

Vector3

Returns

Vector2 | null

---

viewScale()

viewScale(): number

Defined in: packages/threeplay/src/plugins/render/types.ts:119

CSS pixels per logical unit, horizontally. With letterbox: false (stretched view) X and Y scales differ and this is the X one; derive Y as canvas.getBoundingClientRect().height / height(). Otherwise (letterboxed, or no fixed size) both axes are equal.

Returns

number

---

width()

width(): number

Defined in: packages/threeplay/src/plugins/render/types.ts:85

Logical width (see RenderOpts.width).

Returns

number

Properties

ambient

readonly ambient: HemisphereLight | null

Defined in: packages/threeplay/src/plugins/render/types.ts:101

---

canvas

readonly canvas: HTMLCanvasElement | null

Defined in: packages/threeplay/src/plugins/render/types.ts:83

The game canvas (null when headless).

---

renderer

readonly renderer: RendererBackend

Defined in: packages/threeplay/src/plugins/render/types.ts:81

The renderer backend (escape hatch: renderer.three).

---

sun

readonly sun: DirectionalLight | null

Defined in: packages/threeplay/src/plugins/render/types.ts:100

The default sun (null with lighting: "none"). Its position and target are rewritten every frame to follow the camera (so shadows stay sharp where you look): re-aim it with setSunDirection instead of moving it. Color, intensity and shadow settings can be changed freely.