Class: WebGLView

WebGLView that a WebGLRenderer should render

A WebGLView can either be created directly, or created via a WebGLRenderer:

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

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

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

const view = new WebGLView(renderer, {
  camera,
  scene
})

// OR

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

Hierarchy

• View

  ↳ WebGLView

Table of contents

Constructors

• constructor

Properties

• _renderMethod
• _scissorViewRectangle
• _viewportViewRetangle
• _zIndex
• camera
• clearDepth
• domElement
• domElementListeners
• effectComposer
• effectComposerEnabled
• events
• id
• renderer
• scene
• scissorParams
• scissorSizePx
• viewportParams
• viewportSizePx
• worldViewport

Accessors

• composer
• rendererDomElement
• scissor
• useEffectComposer
• viewport

Methods

• _onResize
• addHandler
• calculateViewRectangle
• destroy
• getRelativeMouse
• getWorldViewport
• on
• removeHandler
• resizeCamera
• setCamera
• setScene
• updateRenderMethod

Constructors

constructor

• new WebGLView(renderer, param1)

Constructor for a WebGLView

Parameters

Overrides

View.constructor

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:277

Properties

_renderMethod

• Private _renderMethod: (timeElapsed: number) => void

Type declaration

▸ Private (timeElapsed): void

The method called used for rendering

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:232

_scissorViewRectangle

• Private _scissorViewRectangle: ViewRectangle

The current size of the scissor for the view. The shape outside of which nothing can be rendered

Defined in

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

_viewportViewRetangle

• Private _viewportViewRetangle: ViewRectangle

The current size of the viewport for the view. Sets how to convert from a shader's clip space to some portion of the canvas's pixel space

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:220

_zIndex

• Private _zIndex: number

The z index for the view. Determines what order the views are rendered in, therefore what layer the view is on.

see WebGLViewParams.zIndex

Overrides

View._zIndex

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:214

camera

• camera: PerspectiveCamera | OrthographicCamera

The views camera

see WebGLView.camera

Overrides

View.camera

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:137

clearDepth

• clearDepth: boolean

Whether the depth buffer should be cleared after rendering this view

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:111

domElement

• domElement: HTMLElement

The dom element for the view

Overrides

View.domElement

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:116

domElementListeners

• Private domElementListeners: Map<string, { handlerIds: Set<string> ; unsubscribe: () => void }>

A map of dom event listener names to data about listeners

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:257

effectComposer

• Private effectComposer: EffectComposer

The effect composer for the view

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:270

effectComposerEnabled

• Private effectComposerEnabled: boolean

Whether the view is using an effect composer

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:265

events

• Private events: EventSystem

The events system for the view which is used for mouse and touch events

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:252

id

• id: string

A unique identifier for the view

Overrides

View.id

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:106

renderer

• Private renderer: WebGLRenderer

The renderer the view belongs to

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:247

scene

• scene: Scene

The views scene

see WebGLView.scene;

Overrides

View.scene

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:143

scissorParams

• Private scissorParams: ViewRectangleParams

Parameters for the scissor that are used to recalculate the scissor on resize

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:242

scissorSizePx

• scissorSizePx: ViewRectangle

The size of the scissor in pixels

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:131

viewportParams

• Private viewportParams: ViewRectangleParams

Parameters for the viewport that are used to recalculate the viewport on resize

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:237

viewportSizePx

• viewportSizePx: ViewRectangle

The size of the view in pixels

Overrides

View.viewportSizePx

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:126

worldViewport

• worldViewport: Object

Bounds of the viewport in 3d units + factor (size/viewport) for the default target ({ x: 0, y: 0, z: 0})

Type declaration

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:121

Accessors

composer

• get composer(): EffectComposer

The effect composer for the webgl view

see WebGLView.effectComposer

Returns

EffectComposer

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:179

rendererDomElement

• get rendererDomElement(): HTMLElement

Gets the dom element used by the renderer

Returns

HTMLElement

Overrides

View.rendererDomElement

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:205

scissor

• get scissor(): ViewRectangleParams

Getter for the scissor params

Returns

ViewRectangleParams

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:163

• set scissor(v): void

Setter for the scissor params. Resizes the view on setting.

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:170

useEffectComposer

• get useEffectComposer(): boolean

Whether the effect composer should be used

Returns

boolean

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:190

• set useEffectComposer(value): void

Sets whether the effect composer should be used

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:197

viewport

• get viewport(): ViewRectangleParams

Getter for the viewport params

Returns

ViewRectangleParams

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:148

• set viewport(v): void

Setter for the viewport params. Resizes the view on setting.

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:155

Methods

_onResize

▸ Private _onResize(): void

Handles resizing

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:400

addHandler

▸ Private addHandler<T>(eventName, handlerId): void

Adds a view event handler and sets up the dom event listener if it does not exist

Type parameters

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:519

calculateViewRectangle

▸ Protected calculateViewRectangle(params): ViewRectangle

Calculates a view rectangle from given view rectangle params

Parameters

Returns

ViewRectangle

a view rectangle of decimal percentages

Inherited from

View.calculateViewRectangle

Defined in

packages/three/src/renderer/view.ts:100

destroy

▸ destroy(): void

Destroys the view and removes it from the renderer

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:392

getRelativeMouse

▸ Private getRelativeMouse(clientX, clientY): Object

Returns the relative mouse position for a view given the client x and y

Parameters

Returns

Object

the relative mouse position for the view

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:475

getWorldViewport

▸ getWorldViewport(target): Object

Gets the world viewport for a given target

Parameters

Returns

Object

the world viewport for a given target

Inherited from

View.getWorldViewport

Defined in

packages/three/src/renderer/view.ts:59

on

▸ on<T>(eventName, eventHandler): ViewInteractionEventSubscription

Adds an event handler for a view mouse or touch event

Type parameters

Parameters

Returns

ViewInteractionEventSubscription

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:370

removeHandler

▸ Private removeHandler<T>(eventName, handlerId): void

Removes a handler for a view event and removes the dom event listener if there are no handlers

Type parameters

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:496

resizeCamera

▸ Private resizeCamera(): void

Resizes the camera based on the latest viewport size

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:446

setCamera

▸ setCamera(c): void

Sets the camera for the view

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:345

setScene

▸ setScene(s): void

Setter for the views scene

Parameters

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:357

updateRenderMethod

▸ Private updateRenderMethod(): void

Sets the render method according to the current state of the WebGL View

Returns

void

Defined in

packages/three/src/renderer/webgl/webgl-view.ts:457