Class: WebGLRenderer

WebGLRenderer is a wrapper around the three.js WebGLRenderer provides a simple API for managing multiple views.

After construction, the domElement property should be added to the dom.

Example usage:

import { WebGLRenderer } from '@rapidajs/three';
import { Scene, PerspectiveCamera } from 'three';

const renderer = new WebGLRenderer();

// add the renderer domElement to the dom before adding views
document.getElementById('app').appendChild(renderer.domElement);

const scene = new Scene();
const camera = new PerspectiveCamera();

const view = renderer.create.view({
  camera,
  scene,
});

renderer.render();

Example usage for a view using an effect composer for post processing effects:

import { WebGLRenderer } from '@rapidajs/three';
import { Scene, PerspectiveCamera } from 'three';

const renderer = new WebGLRenderer();

// add the renderer domElement to the dom before adding views
document.getElementById('app').appendChild(renderer.domElement);

const scene = new Scene();
const camera = new PerspectiveCamera();

const view = renderer.create.view({
  camera,
  scene,
  useEffectComposer: true,
});

// get the time elapsed from your render loop
const timeElapsed = 0.1;

// pass the time elapsed to the render method
renderer.render(timeElapsed);

Table of contents

Constructors

• constructor

Properties

• domElement
• orderedViews
• resizeObserver
• three
• views

Accessors

• create

Methods

• addView
• destroy
• onResize
• removeView
• render
• sortViews

Constructors

constructor

• new WebGLRenderer(params?)

Constructor for a WebGLRenderer

Parameters

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:103

Properties

domElement

• domElement: HTMLElement

The DOM element for the renderer. Should be added to the dom after creating the WebGLRenderer

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:87

orderedViews

• Private orderedViews: WebGLView[] = []

The ordered views according the views zIndex values

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:92

resizeObserver

• Private resizeObserver: ResizeObserver

The resize observer for the renderer dom element

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:97

three

• three: WebGLRenderer

The three js renderer

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:77

views

• views: Map<string, WebGLView>

Views for the webgl renderer

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:82

Accessors

create

• get create(): Object

Retrieves renderer factories

Returns

Object

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:138

Methods

addView

▸ addView(view): void

Adds a view to the renderer

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:160

destroy

▸ destroy(): void

Destroys the renderer and all views

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:171

onResize

▸ Private onResize(): void

Handles resizing

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:226

removeView

▸ removeView(view): void

Removes a view from the renderer

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:184

render

▸ render(timeElapsed?): void

Renders all views

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:196

sortViews

▸ Private sortViews(): void

Sorts the views in the renderer by their z index

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-renderer.ts:240