the-world-engine/dist/esm/engine/script/controller/EditorCameraController.js

three.js based, unity like game engine for browser

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

import { Component } from "../../hierarchy_object/Component";

import { Camera } from "../render/Camera";

export class EditorCameraController extends Component {
    disallowMultipleComponent=true;
    requiredComponents=[ Camera ];
    th=null;
    ih=false;
    eh=1;
    sh=new Vector2;
    hh=1;
    oh=10;
    rh=5;
    nh=5;
    ah=new Vector3;
    awake() {
        this.th = this.gameObject.getComponent(Camera);
        this.rh = this.th.viewSize;
        this.ah.copy(this.transform.localPosition);
        this.nh = this.rh;
        this.th.viewSize = this.nh;
    }
    onEnable() {
        const t = this.engine.input;
        t.onKeyDown.addListener(this._h);
        t.onWheel.addListener(this.mh);
        t.onPointerDown.addListener(this.Tr);
        t.onPointerUp.addListener(this.ph);
        t.onPointerMove.addListener(this.uh);
        t.onPointerLeave.addListener(this.fh);
    }
    onDisable() {
        const t = this.engine.input;
        t.onKeyDown.removeListener(this._h);
        t.onWheel.removeListener(this.mh);
        t.onPointerDown.removeListener(this.Tr);
        t.onPointerUp.removeListener(this.ph);
        t.onPointerMove.removeListener(this.uh);
        t.onPointerLeave.removeListener(this.fh);
    }
    _h=t => {
        if (t.key === " ") {
            this.nh = this.rh;
            this.lh();
            this.transform.localPosition.copy(this.ah);
        }
    };
    mh=t => {
        this.nh += t.deltaY * .01;
        if (this.nh < this.hh) {
            this.nh = this.hh;
        } else if (this.nh > this.oh) {
            this.nh = this.oh;
        }
        this.lh();
    };
    Tr=t => {
        this.sh.set(t.clientX / this.engine.screen.width, t.clientY / this.engine.screen.height);
        if (t.button === this.eh) {
            this.ih = true;
        }
    };
    ph=t => {
        if (t.button === this.eh) {
            this.ih = false;
        }
    };
    uh=t => {
        if (!this.ih) return;
        const i = t.clientX / this.engine.screen.width;
        const e = t.clientY / this.engine.screen.height;
        const s = i - this.sh.x;
        const h = e - this.sh.y;
        const o = this.engine.screen.width / this.engine.screen.height;
        this.transform.localPosition.x -= s * this.th.viewSize * 2 * o;
        this.transform.localPosition.y += h * this.th.viewSize * 2;
        this.sh.set(i, e);
    };
    fh=t => {
        this.ih = false;
    };
    lh() {
        if (this.th) {
            this.th.viewSize = this.nh;
        }
    }
    get minViewSize() {
        return this.hh;
    }
    set minViewSize(t) {
        this.hh = t;
        if (this.nh < this.hh) {
            this.nh = this.hh;
            this.lh();
        }
    }
    get maxViewSize() {
        return this.oh;
    }
    set maxViewSize(t) {
        this.oh = t;
        if (this.nh > this.oh) {
            this.nh = this.oh;
            this.lh();
        }
    }
    get mouseMoveButton() {
        return this.eh;
    }
    set mouseMoveButton(t) {
        this.eh = t;
    }
}