@spearwolf/twopoint5d/lib/map2d/CameraBasedVisibilityHelpers.js

Create 2.5D realtime graphics and pixelart with WebGL and three.js

import { Box3Helper, BoxGeometry, Color, Mesh, MeshBasicMaterial, PlaneHelper, Vector2, Vector3, } from 'three/webgpu';
import { HelpersManager } from './HelpersManager.js';
import {} from './Map2DTileCoordsUtil.js';
export class CameraBasedVisibilityHelpers {
    #show;
    #helpers;
    constructor(cammeraBasedVisibility) {
        this.cammeraBasedVisibility = cammeraBasedVisibility;
        this.#show = false;
        this.maxDebugHelpers = 9;
        this.tileBoxHelperExpand = -0.01;
        this.frustumBoxHelperExpand = 0;
        this.frustumBoxHelperColor = new Color(0x777777);
        this.frustumBoxPrimaryHelperColor = new Color(0xffffff);
        this.tileBoxHelperColor = new Color(0x772222);
        this.tileBoxPrimaryHelperColor = new Color(0xff0066);
        this.#helpers = new HelpersManager();
    }
    get show() {
        return this.#show;
    }
    set show(showHelpers) {
        if (this.#show && !showHelpers) {
            this.#helpers.remove();
        }
        if (!this.#show && showHelpers) {
            this.createHelpers();
        }
        this.#show = showHelpers;
    }
    createHelpers() {
        this.createPlaneHelpers();
        this.createTileHelpers(this.cammeraBasedVisibility.visibles);
        const el = document.querySelector('.map2dCoords');
        if (el) {
            el.textContent = this.cammeraBasedVisibility.planeCoords2D.toArray().map(Math.round).join(', ');
        }
    }
    createPlaneHelpers() {
        this.#helpers.add(new PlaneHelper(this.cammeraBasedVisibility.planeWorld, 100, 0x20f040), true);
        if (this.cammeraBasedVisibility.pointOnPlane) {
            this.addPointHelper(this.cammeraBasedVisibility.pointOnPlane, true, 10, 0xc0c0c0);
        }
        this.addPointHelper(this.cammeraBasedVisibility.planeOrigin, true, 5, 0x406090);
        const uOrigin = this.makePointOnPlane(new Vector2());
        const u0 = this.cammeraBasedVisibility.planeOrigin.clone().sub(uOrigin);
        const ux = this.makePointOnPlane(new Vector2(50, 0)).add(u0);
        const uy = this.makePointOnPlane(new Vector2(0, 50)).add(u0);
        this.addPointHelper(ux, true, 5, 0xff0000);
        this.addPointHelper(uy, true, 5, 0x00ff00);
    }
    createTileHelpers(visibles) {
        const primaries = visibles.filter((v) => v.primary);
        primaries.forEach((tile) => {
            this.addBoxHelper(tile.frustumBox, this.frustumBoxHelperExpand, this.frustumBoxPrimaryHelperColor, true);
        });
        for (let i = 0; i < visibles.length; ++i) {
            const tile = visibles[i];
            if (!tile.primary && i < this.maxDebugHelpers) {
                this.addBoxHelper(tile.frustumBox, this.frustumBoxHelperExpand, this.frustumBoxHelperColor, true);
            }
            this.addBoxHelper(tile.box, this.tileBoxHelperExpand, tile.primary ? this.tileBoxPrimaryHelperColor : this.tileBoxHelperColor, false);
        }
    }
    addPointHelper(point, addToRoot = true, size = 10, color = 0x20f040) {
        const poiBox = new Mesh(new BoxGeometry(size, size, size), new MeshBasicMaterial({ color }));
        poiBox.position.copy(point);
        this.#helpers.add(poiBox, addToRoot);
    }
    addBoxHelper(box, expand, color, addToRoot) {
        box = box.clone();
        const boxSize = box.getSize(new Vector3());
        box.expandByVector(boxSize.multiplyScalar(expand));
        const helper = new Box3Helper(box, color);
        this.#helpers.add(helper, addToRoot);
    }
    makePointOnPlane(point) {
        return new Vector3(this.cammeraBasedVisibility.map2dTileCoords.xOffset + (point?.x ?? 0), 0, this.cammeraBasedVisibility.map2dTileCoords.yOffset + (point?.y ?? 0)).applyMatrix4(this.cammeraBasedVisibility.matrixWorld);
    }
    add(scene) {
        this.#helpers.scene = scene;
    }
    remove(scene) {
        this.#helpers.removeFromScene(scene);
    }
    update() {
        this.#helpers.remove();
        if (this.show) {
            this.createHelpers();
        }
    }
}
//# sourceMappingURL=CameraBasedVisibilityHelpers.js.map