ShadowEditor/ShadowEditor.Web/src/controls/OrthographicCameraControls.js

/**
 * 正交相机控制器
 * @author tengge / https://github.com/tengge1
 * @param {THREE.OrthographicCamera} camera 正交相机
 * @param {HTMLElement} domElement DOM
 */
function OrthographicCameraControls(camera, domElement) {
    this.camera = camera;
    this.domElement = domElement;

    this.enabled = false;
    this.isDown = false;
    this.offsetXY = new THREE.Vector2();

    this.onMouseDown = this.onMouseDown.bind(this);
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onMouseUp = this.onMouseUp.bind(this);
    this.onMouseWheel = this.onMouseWheel.bind(this);
}

OrthographicCameraControls.prototype.enable = function () {
    if (this.enabled) {
        return;
    }

    this.enabled = true;

    this.domElement.addEventListener('mousedown', this.onMouseDown);
    this.domElement.addEventListener('mousemove', this.onMouseMove);
    this.domElement.addEventListener('mouseup', this.onMouseUp);
    this.domElement.addEventListener('mousewheel', this.onMouseWheel);
};

OrthographicCameraControls.prototype.disable = function () {
    if (!this.enabled) {
        return;
    }

    this.enabled = false;

    this.domElement.removeEventListener('mousedown', this.onMouseDown);
    this.domElement.removeEventListener('mousemove', this.onMouseMove);
    this.domElement.removeEventListener('mouseup', this.onMouseUp);
    this.domElement.removeEventListener('mousewheel', this.onMouseWheel);
};

OrthographicCameraControls.prototype.onMouseDown = function (event) {
    this.isDown = true;

    this.offsetXY.set(event.offsetX, event.offsetY);
};

OrthographicCameraControls.prototype.onMouseMove = function (event) {
    if (!this.isDown) {
        return;
    }

    let camera = this.camera;

    let width = this.domElement.clientWidth;
    let height = this.domElement.clientHeight;

    let dx = (event.offsetX - this.offsetXY.x) * (this.camera.right - this.camera.left) / width;
    let dy = (event.offsetY - this.offsetXY.y) * (this.camera.top - this.camera.bottom) / height;

    this.camera.left -= dx;
    this.camera.right -= dx;
    this.camera.top += dy;
    this.camera.bottom += dy;

    this.camera.updateProjectionMatrix();

    this.offsetXY.set(event.offsetX, event.offsetY);
};

OrthographicCameraControls.prototype.onMouseUp = function (event) {
    this.isDown = false;
};

OrthographicCameraControls.prototype.onMouseWheel = function (event) {
    const delta = -event.wheelDelta / 1000;

    let camera = this.camera;

    let width = this.domElement.clientWidth;
    let height = this.domElement.clientHeight;

    let pointerX = camera.left + (camera.right - camera.left) * event.offsetX / width;
    let pointerY = camera.top - (camera.top - camera.bottom) * event.offsetY / height;

    camera.left = camera.left - Math.abs(pointerX - camera.left) * delta;
    camera.right = camera.right + Math.abs(camera.right - pointerX) * delta;
    camera.top = camera.top + Math.abs(camera.top - pointerY) * delta;
    camera.bottom = camera.bottom - Math.abs(pointerY - camera.bottom) * delta;

    camera.updateProjectionMatrix();
};

export default OrthographicCameraControls;