SimpleRenderer

A basic renderer capable of rendering Objec3Ds.

Extends

• BaseRenderer

Constructors

new SimpleRenderer()

new SimpleRenderer(components, container, parameters?): SimpleRenderer

Constructor for the SimpleRenderer class.

Parameters

Parameter	Type	Description
components	Components	The components instance.
container	HTMLElement	The HTML container where the THREE.js canvas will be rendered.
parameters?	Partial<WebGLRendererParameters>	Optional parameters for the THREE.js WebGLRenderer.

Returns

SimpleRenderer

Overrides

BaseRenderer.constructor

Properties

clippingPlanes

clippingPlanes: Plane[] = []

The list of clipping planes used by this instance of the renderer.

Inherited from

BaseRenderer . clippingPlanes

---

container

container: HTMLElement

The HTML container of the THREE.js canvas where the scene is rendered.

---

enabled

enabled: boolean = true

Indicates whether the renderer is enabled. If it's not, it won't be updated. Default is true.

---

localClippingPlanes

localClippingPlanes: boolean = false

The default isLocal value used by setPlane when the caller doesn't pass one. When true, planes added without an explicit isLocal stay out of the global three.clippingPlanes list and are clipped per-material instead. The Clipper sets this to mirror its own localClippingPlanes flag, so consumers like Views that add their own planes automatically inherit the active clipping mode.

Inherited from

BaseRenderer . localClippingPlanes

---

mode

mode: RendererMode = RendererMode.AUTO

The mode of the renderer. If MANUAL, the renderer will be updated manually. If AUTO, the renderer will render on every update tick.

---

needsUpdate

needsUpdate: boolean = false

Whether the renderer needs to be updated. If true, the renderer will be updated on the next frame.

---

onAfterUpdate

onAfterUpdate: Event<unknown>

Updateable.onBeforeUpdate

Inherited from

BaseRenderer . onAfterUpdate

---

onBeforeUpdate

onBeforeUpdate: Event<unknown>

Updateable.onAfterUpdate

Inherited from

BaseRenderer . onBeforeUpdate

---

onClippingPlanesUpdated

readonly onClippingPlanesUpdated: Event<unknown>

Event that fires when there has been a change to the list of clipping planes used by the active renderer.

Inherited from

BaseRenderer . onClippingPlanesUpdated

---

onDisposed

readonly onDisposed: Event<undefined>

Disposable.onDisposed

Inherited from

BaseRenderer . onDisposed

---

onResize

readonly onResize: Event<Vector2>

Resizeable.onResize

Inherited from

BaseRenderer . onResize

---

onWorldChanged

readonly onWorldChanged: Event<object>

Event that is triggered when a world is added or removed from the worlds map. The event payload contains the world instance and the action ("added" or "removed").

Type declaration

action

action: "added" | "removed"

world

world: World

Inherited from

BaseRenderer . onWorldChanged

---

three

three: WebGLRenderer

The THREE.js WebGLRenderer instance.

Overrides

BaseRenderer . three

Accessors

currentWorld

set currentWorld(value): void

The current world this item is associated with. It can be null if no world is currently active.

Parameters

Parameter	Type
value	null | World

---

logo

get logo(): null | HTMLElement

The DOM element rendering the That Open Company wordmark, or null before the renderer is set up. Mutate its style to restyle or move the overlay without forking the source. Common adjustments:

const logo = world.renderer.logo;
if (logo) {
  logo.style.left = "auto";
  logo.style.right = "0.75rem";   // move to bottom-right
  logo.style.bottom = "auto";
  logo.style.top = "0.75rem";     // or to the top edge
}

The element also carries a data-thatopen-logo attribute, so app-wide CSS can target it ([data-thatopen-logo] { ... }). External rules need !important (or higher specificity) to win against the inline defaults.

Returns

null | HTMLElement

---

showLogo

get showLogo(): boolean

Whether the That Open Company logo is shown as a small overlay in the bottom-left corner of the renderer container. Defaults to true.

The logo is how people discover that the libraries powering this app come from That Open Company, the team that keeps @thatopen/components, @thatopen/fragments, and the rest of the stack free and open source. If the logo fits your design, please consider leaving it on; every visible mark helps us reach more developers and keep investing in the libraries you're building on. Thank you.

If your app needs a clean viewport (full-bleed print view, white-label embed, customer-branded surface), set it to false:

world.renderer.showLogo = false;

Returns

boolean

Methods

dispose()

dispose(): void

Disposable.dispose

Returns

void

Overrides

BaseRenderer . dispose

---

getSize()

getSize(): Vector2

Resizeable.getSize.

Returns

Vector2

Overrides

BaseRenderer . getSize

---

isConfigurable()

isConfigurable(): this is Configurable<any, any>

Whether is component is Configurable.

Returns

this is Configurable<any, any>

Inherited from

BaseRenderer . isConfigurable

---

isDisposeable()

isDisposeable(): this is Disposable

Whether is component is Disposable.

Returns

this is Disposable

Inherited from

BaseRenderer . isDisposeable

---

isHideable()

isHideable(): this is Hideable

Whether is component is Hideable.

Returns

this is Hideable

Inherited from

BaseRenderer . isHideable

---

isResizeable()

isResizeable(): this is Resizeable

Whether is component is Resizeable.

Returns

this is Resizeable

Inherited from

BaseRenderer . isResizeable

---

isSerializable()

isSerializable(): this is Serializable<any, Record<string, any>>

Whether is component is Serializable.

Returns

this is Serializable<any, Record<string, any>>

Inherited from

BaseRenderer . isSerializable

---

isUpdateable()

isUpdateable(): this is Updateable

Whether is component is Updateable.

Returns

this is Updateable

Inherited from

BaseRenderer . isUpdateable

---

resize()

resize(size?): void

Resizeable.resize

Parameters

Parameter	Type
size?	Vector2

Returns

void

Overrides

BaseRenderer . resize

---

setPlane()

setPlane(active, plane, isLocal): void

Sets or removes a clipping plane from the renderer.

Parameters

Parameter	Type	Description
active	boolean	A boolean indicating whether the clipping plane should be active or not.
plane	Plane	The clipping plane to be added or removed.
isLocal	boolean	An optional boolean indicating whether the clipping plane is local to the object. If not provided, it defaults to false.

Returns

void

Inherited from

BaseRenderer . setPlane

Remarks

This method adds or removes a clipping plane from the clippingPlanes array. If active is true and the plane is not already in the array, it is added. If active is false and the plane is in the array, it is removed. The three.clippingPlanes property is then updated to reflect the current state of the clippingPlanes array, excluding any planes marked as local.

---

setupEvents()

setupEvents(active): void

Sets up and manages the event listeners for the renderer.

Parameters

Parameter	Type	Description
active	boolean	A boolean indicating whether to activate or deactivate the event listeners.

Returns

void

Throws

Will throw an error if the renderer does not have an HTML container.

---

update()

update(): void

Updateable.update

Returns

void

Overrides

BaseRenderer . update

---

updateClippingPlanes()

updateClippingPlanes(): void

Updates the clipping planes and triggers the onClippingPlanesUpdated event.

Returns

void

Inherited from

BaseRenderer . updateClippingPlanes

Remarks

This method is typically called when there is a change to the list of clipping planes used by the active renderer.