@vladkrutenyuk/three-kvy-core/dist/esm/core/ThreeContext.d.ts

Everything you need to create any-complexity 3D apps with Three.js. Empower Three.js with a modular, lifecycle-managed context that seamlessly propagates through objects via reusable features providing structured logic.

import { EventEmitter } from "eventemitter3";
import type * as THREE from "three";
export type ThreeContextParams = {
    renderer?: THREE.WebGLRendererParameters;
};
/**
 * A utility for initializing core [Three.js](https://threejs.org) entities, managing their setup, and handling rendering.
 * @see {@link https://three-kvy-core.vladkrutenyuk.ru/docs/api/three-context | Official Documentation}
 * @see {@link https://github.com/vladkrutenyuk/three-kvy-core/blob/main/src/core/ThreeContext.ts | Source}
 */
export declare class ThreeContext extends EventEmitter<ThreeContextEventMap, ThreeContext> {
    /**
     * Shortcut to create an instance of ThreeContext.
     * @param {typeof import("three")} Three - Three.js `THREE` imported module, object containing class constructors `WebGLRenderer`, `PerspectiveCamera`, `Scene`, `Clock`, `Raycaster`.
     * @param {{renderer: THREE.WebGLRendererParameters}} params - (optional) Object parameters
     * @returns {ThreeContext} An instance of ThreeContext
     * @example
     * ```js
        import * as THREE from "three";
        import * as KVY from "@vladkrutenyuk/three-kvy-core";

        const three = new KVY.ThreeContext.create(THREE, { renderer: { antialias: true } });
        ```
     */
    static create(Three: {
        WebGLRenderer: typeof THREE.WebGLRenderer;
        PerspectiveCamera: typeof THREE.PerspectiveCamera;
        Scene: typeof THREE.Scene;
        Clock: typeof THREE.Clock;
        Raycaster: typeof THREE.Raycaster;
    }, params?: ThreeContextParams): ThreeContext;
    /**
     * (readonly) flag to mark that it is an instance of ThreeContext.
     * @type {true}
     */
    readonly isThreeContext: true;
    /**
     * (readonly) instance of Three.js `WebGLRenderer` used for rendering your awesome scene.
     * @type {THREE.WebGLRenderer}
     */
    readonly renderer: THREE.WebGLRenderer;
    /**
     * An instance of Three.js `PerspectiveCamera` camera which is used in rendering. Fires event `camerachanged` on set.
     */
    get camera(): THREE.PerspectiveCamera;
    set camera(value: THREE.PerspectiveCamera);
    /** (readonly) instance of Three.js `Scene` that contains all objects to be rendered. */
    readonly scene: THREE.Scene;
    /** (readonly) instance of Three.js `Clock` */
    readonly clock: THREE.Clock;
    /** (readonly) instance of Three.js `Raycaster`. */
    readonly raycaster: THREE.Raycaster;
    /** (readonly) HTML element where the renderer canvas is appended on mount. */
    get container(): HTMLDivElement | null;
    /**
     * (readonly) flag to check if the renderer canvas is currently mounted.
     * @type {boolean}
     */
    get isMounted(): boolean;
    /**
     * (readonly) flag to check whether this instance has been destroyed.
     */
    get isDestroyed(): boolean;
    private _camera;
    private _container;
    private _resizeObserver;
    private _isMounted;
    private _isDestroyed;
    private _srcRenderFn;
    private _renderFn;
    /**
     * This creates a new {@link ThreeContext} instance.
     * @param {THREE.WebGLRenderer} renderer - An instance of Three.js `WebGLRenderer`
     * @param {THREE.PerspectiveCamera} camera - An instance of Three.js `PerspectiveCamera`
     * @param {THREE.Scene} scene - An instance of Three.js `Scene`
     * @param {THREE.Clock} clock - An instance of Three.js `Clock`
     * @param {THREE.Raycaster} raycaster - An instance of Three.js `Raycaster`
     */
    constructor(renderer: THREE.WebGLRenderer, camera: THREE.PerspectiveCamera, scene: THREE.Scene, clock: THREE.Clock, raycaster: THREE.Raycaster);
    /**
     * Renders the scene using the current render function. Fires `renderbefore` and `renderafter` events.
     */
    render(): void;
    /**
     * Overrides the render function with a custom implementation.
     * @param {Function} fn
     * @returns
     */
    overrideRender(fn: () => void): this;
    /**
     * Resets the render function to its default implementation.
     */
    resetRender(): this;
    /**
     * Append the renderer canvas to the given HTML container, initializes event listeners and resize observer.
     * Fires `mount` event.
     * @param {HTMLDivElement} container -  The HTML container element where to mount (append) renderer canvas.
     */
    mount(container: HTMLDivElement): this | undefined;
    /**
     * Remove the renderer canvas from DOM it was mounted, removes event listeners, disconnect resize observer.
     * Fires `"unmount"` event.
     */
    unmount(): this | undefined;
    /**
     * Destroys this instance, releasing resources and preventing further rendering.
     * Fires `"destroy"` event.
     */
    destroy(): void;
    private resizeHandler;
    private cameraChanged;
}
declare const ev: Readonly<{
    RenderBefore: "renderbefore";
    RenderAfter: "renderafter";
    Mount: "mount";
    Unmount: "unmount";
    Destroy: "destroy";
    CameraChanged: "camerachanged";
    Resize: "resize";
}>;
export type ThreeContextEventMap = {
    [ev.RenderBefore]: [];
    [ev.RenderAfter]: [];
    [ev.Mount]: [root: HTMLDivElement];
    [ev.Unmount]: [];
    [ev.Destroy]: [];
    [ev.Resize]: [width: number, height: number];
    [ev.CameraChanged]: [
        newCamera: THREE.PerspectiveCamera,
        prevCamera: THREE.PerspectiveCamera
    ];
};
export {};