@needle-tools/engine/lib/engine/xr/SceneTransition.js

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry } from "three";
import { Mathf } from "../engine_math.js";
export class SceneTransition {
    _fadeToColorQuad;
    _fadeToColorMaterial;
    constructor() {
        this._fadeToColorMaterial = new MeshBasicMaterial({
            color: 0x000000,
            transparent: true,
            depthTest: false,
            fog: false,
            side: DoubleSide,
        });
        this._fadeToColorQuad = new Mesh(new PlaneGeometry(10, 10), this._fadeToColorMaterial);
    }
    dispose() {
        this._fadeToColorQuad.geometry.dispose();
        this._fadeToColorMaterial.dispose();
    }
    update(camera, dt) {
        const quad = this._fadeToColorQuad;
        const mat = this._fadeToColorMaterial;
        // make sure the quad is in the scene
        if (quad.parent !== camera && mat.opacity > 0) {
            camera.add(quad);
        }
        else if (mat.opacity === 0) {
            quad.removeFromParent();
        }
        quad.layers.set(2);
        quad.material = this._fadeToColorMaterial;
        quad.position.z = -1;
        // because of TMUI
        quad.renderOrder = Infinity;
        // perform the fade
        const fadeValue = this._requestedFadeValue;
        mat.opacity = Mathf.lerp(mat.opacity, fadeValue, dt / .03);
        // check if we're close enough to the desired value:
        if (Math.abs(mat.opacity - fadeValue) <= .01) {
            if (this._transitionResolve) {
                this._transitionResolve();
                this._transitionResolve = null;
                this._transitionPromise = null;
                this._requestedFadeValue = 0;
            }
        }
    }
    remove() {
        this._fadeToColorQuad.removeFromParent();
    }
    /** Call to fade rendering to black for a short moment (the returned promise will be resolved when fully black)
     * This can be used to mask scene transitions or teleportation
     * @returns a promise that is resolved when the screen is fully black
     * @example `fadeTransition().then(() => { <fully_black> })`
    */
    fadeTransition() {
        if (this._transitionPromise)
            return this._transitionPromise;
        this._requestedFadeValue = 1;
        const promise = new Promise(resolve => {
            this._transitionResolve = resolve;
        });
        this._transitionPromise = promise;
        return promise;
    }
    _requestedFadeValue = 0;
    _transitionPromise = null;
    _transitionResolve = null;
}
//# sourceMappingURL=SceneTransition.js.map