ThreeContext

A utility for initializing core Three.js entities, managing their setup, and handling rendering. It provides essential events like "mount", "unmount", "renderbefore", "renderafter", "resize", "camerachanged", and "destroy", powered by EventEmitter from eventemitter3.

It is included inside CoreContext as three, but it can also be used independently.

import * as THREE from 'three';

const three = ThreeContext.create(THREE, { renderer: { antialias: true } });
three.mount(document.querySelector("#canvas-container"));

const { scene, camera } = three;

const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
scene.add(cube);

camera.position.z = 5;

three.on("renderbefore", () => {
    cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
})

three.renderer.setAnimationLoop(() => three.render());

API

Extends EventEmitter.

Constructor

new ThreeContext(renderer: WebGLRenderer, camera: PerspectiveCamera, scene: Scene, scene: Clock, raycaster: Raycaster)

  • renderer - An instance of Three.js WebGLRenderer
  • camera - An instance of Three.js PerspectiveCamera
  • scene - An instance of Three.js Scene
  • clock - An instance of Three.js Clock
  • raycaster - An instance of Three.js Raycaster
const three = new KVY.ThreeContext(
    new THREE.WebGLRenderer({ renderer: { antialias: true } }), 
    new THREE.PerspectiveCamera(), 
    new THREE.Scene(),
    new THREE.Clock(), 
    new THREE.Raycaster()
);

Static Methods

create(Three: Module, params?: Object)

Shortcut to create an instance of ThreeContext.

  • Three- Three.js THREE imported module, object containing class constructors WebGLRenderer, PerspectiveCamera, Scene, Clock, Raycaster.
  • params - (optional) Object parameters
  • params.renderer - (optional) Object parametrs for WebGLRenderer
import * as THREE from "three";
import * as KVY from "@vladkrutenyuk/three-kvy-core";

const three = KVY.ThreeContext.create(THREE, { renderer: { antialias: true } });

Properties

isThreeContext: Boolean

(readonly) flag to mark that it is an instance of ThreeContext.

renderer: WebGLRenderer

(readonly) instance of Three.js WebGLRenderer used for rendering your awesome scene.

camera: PerspectiveCamera

Current active camera which is used in rendering. An instance of Three.js PerspectiveCamera. When setting the new one camera, it triggers event "camerachanged".

scene: Scene

(readonly) Instance of Three.js Scene that contains all objects to be rendered.

clock: Clock

(readonly) Instance of Three.js Clock

raycaster: Raycaster

(readonly) Instance of Three.js Raycaster.

container: HTMLDivElement | null

(readonly) HTML element where the renderer canvas is appended on mount.

isMounted: boolean

(readonly) Flag to check if the renderer canvas is currently mounted.

isDestroyed: boolean

(readonly) Flag to check whether this ThreeContext has been destroyed.

Methods

render(): undefined

Renders the scene using the current render function. Fires renderbefore and renderafter events.

overrideRender(render: Function): this

Overrides the render function with a custom implementation.

  • render - The new render function.

resetRender(): this

Resets the render function to its default implementation.

mount(container: HTMLElement): this

Appends the renderer canvas to the given HTML container, initializes event listeners and resize observer. Fires mount event.

  • container - HTML element where the renderer canvas will be added.

unmount(): this

Remove the renderer canvas from DOM it was mounted, removes event listeners, disconnect resize observer. Fires "unmount" event.

destroy(): void

Destroys this instance, releasing resources and preventing further rendering. Fires "destroy" event.

Events

mount

Fires when the renderer is mounted.

unmount

Fires when the renderer is unmounted.

renderbefore

Fires before rendering.

renderafter

Fires after rendering.

resize

Fires when the HTML container where the renderer is mounted is resized.

camerachanged

Fires when the camera has been set.

destroy

Fires when the context is destroyed.

Source

src/core/ThreeContext.ts

three-kvy-core ...