the-world-engine/dist/esm/engine/render/OptimizedCSS3DRenderer.js

three.js based, unity like game engine for browser

import { Matrix4, Quaternion, Vector3 } from "three/src/Three";

const tempPosition = new Vector3;

const tempQuaternion = new Quaternion;

const tempScale = new Vector3;

const tempMatrix = new Matrix4;

const tempMatrix2 = new Matrix4;

export class OptimizedCSS3DRenderer {
    domElement;
    Qe=0;
    Ve=0;
    ze=0;
    Re=0;
    Ze={
        camera: {
            fov: 0,
            style: ""
        }
    };
    Ae;
    constructor() {
        const t = document.createElement("div");
        t.style.overflow = "hidden";
        this.domElement = t;
        this.Ae = document.createElement("div");
        this.Ae.style.transformStyle = "preserve-3d";
        this.Ae.style.pointerEvents = "none";
        this.domElement.appendChild(this.Ae);
    }
    getSize() {
        return {
            width: this.Qe,
            height: this.Ve
        };
    }
    render(t, e, i) {
        const s = i.projectionMatrix.elements[5] * this.Re;
        if (this.Ze.camera.fov !== s) {
            this.domElement.style.perspective = i.isPerspectiveCamera ? s + "px" : "";
            this.Ze.camera.fov = s;
        }
        if (e.matrixAutoUpdate === true) e.updateMatrixWorld();
        if (i.parent === null) i.updateMatrixWorld();
        let r, a;
        if (i.isOrthographicCamera) {
            r = -(i.right + i.left) / 2;
            a = (i.top + i.bottom) / 2;
        } else {
            r = 1;
            a = 1;
        }
        const n = i.isOrthographicCamera ? "scale(" + s + ")" + "translate(" + this.Be(r) + "px," + this.Be(a) + "px)" + this.Ge(i.matrixWorldInverse) : "translateZ(" + s + "px)" + this.Ge(i.matrixWorldInverse);
        const h = n + "translate(" + this.ze + "px," + this.Re + "px)";
        if (this.Ze.camera.style !== h) {
            this.Ae.style.transform = h;
            this.Ze.camera.style = h;
        }
        for (const s of t) {
            this.Je(s, e, i);
        }
    }
    setSize(t, e) {
        this.Qe = t;
        this.Ve = e;
        this.ze = this.Qe / 2;
        this.Re = this.Ve / 2;
        this.domElement.style.width = t + "px";
        this.domElement.style.height = e + "px";
        this.Ae.style.width = t + "px";
        this.Ae.style.height = e + "px";
    }
    Be(t) {
        return Math.abs(t) < 1e-10 ? 0 : t;
    }
    Ge(t) {
        const e = t.elements;
        const i = this.Be;
        return "matrix3d(" + i(e[0]) + "," + i(-e[1]) + "," + i(e[2]) + "," + i(e[3]) + "," + i(e[4]) + "," + i(-e[5]) + "," + i(e[6]) + "," + i(e[7]) + "," + i(e[8]) + "," + i(-e[9]) + "," + i(e[10]) + "," + i(e[11]) + "," + i(e[12]) + "," + i(-e[13]) + "," + i(e[14]) + "," + i(e[15]) + ")";
    }
    Ne(t) {
        const e = t.elements;
        const i = this.Be;
        const s = "matrix3d(" + i(e[0]) + "," + i(e[1]) + "," + i(e[2]) + "," + i(e[3]) + "," + i(-e[4]) + "," + i(-e[5]) + "," + i(-e[6]) + "," + i(-e[7]) + "," + i(e[8]) + "," + i(e[9]) + "," + i(e[10]) + "," + i(e[11]) + "," + i(e[12]) + "," + i(e[13]) + "," + i(e[14]) + "," + i(e[15]) + ")";
        return "translate(-50%,-50%)" + s;
    }
    Je(t, e, i) {
        if (t.isCSS3DObject) {
            t.onBeforeRender(this, e, i);
            let s;
            if (t.isCSS3DSprite) {
                tempMatrix.copy(i.matrixWorldInverse);
                tempMatrix.transpose();
                if (t.rotation2D !== 0) tempMatrix.multiply(tempMatrix2.makeRotationZ(t.rotation2D));
                t.matrixWorld.decompose(tempPosition, tempQuaternion, tempScale);
                tempMatrix.setPosition(tempPosition);
                tempMatrix.scale(tempScale);
                tempMatrix.elements[3] = 0;
                tempMatrix.elements[7] = 0;
                tempMatrix.elements[11] = 0;
                tempMatrix.elements[15] = 1;
                s = this.Ne(tempMatrix);
            } else {
                s = this.Ne(t.matrixWorld);
            }
            const r = t.element;
            r.style.transform = s;
            r.style.display = t.visible ? "" : "none";
            if (r.parentNode !== this.Ae) {
                this.Ae.appendChild(r);
            }
            t.onAfterRender(this, e, i);
        }
    }
}