@rings-webgpu/core 1.0.0 → 1.0.2

package/dist/src/components/controller/HoverCameraController.js

@@ -0,0 +1,183 @@
+import { Engine3D } from "../../Engine3D";
+import { Camera3D } from "../../core/Camera3D";
+import { Object3D } from "../../core/entities/Object3D";
+import { PointerEvent3D } from "../../event/eventConst/PointerEvent3D";
+import { clamp } from "../../math/MathUtil";
+import { Quaternion } from "../../math/Quaternion";
+import { Vector3 } from "../../math/Vector3";
+import { BoundUtil } from "../../util/BoundUtil";
+import { Time } from "../../util/Time";
+import { Vector3Ex } from "../../util/Vector3Ex";
+import { ComponentBase } from "../ComponentBase";
+export class HoverCameraController extends ComponentBase {
+    get bottomClamp() {
+        return this._bottomClamp;
+    }
+    set bottomClamp(value) {
+        this._bottomClamp = value > 89.99 ? 89.99 : value;
+    }
+    get topClamp() {
+        return this._topClamp;
+    }
+    set topClamp(value) {
+        this._topClamp = value < -89.99 ? -89.99 : value;
+    }
+    constructor() {
+        super();
+        this.minDistance = 0.1;
+        this.maxDistance = 500;
+        this.rollSmooth = 15.0;
+        this.dragSmooth = 20;
+        this.wheelSmooth = 10;
+        this.wheelStep = 0.002;
+        this.mouseRightFactor = 0.25;
+        this.mouseLeftFactor = 20;
+        this.smooth = true;
+        this._wheelStep = 0.002;
+        this._distance = 0;
+        this.distance = 10;
+        this._roll = 0;
+        this.roll = 0;
+        this._pitch = 0;
+        this.pitch = 0;
+        this._mouseLeftDown = false;
+        this._mouseRightDown = false;
+        this._bottomClamp = 89.99;
+        this._topClamp = -89.99;
+        this._tempDir = new Vector3();
+        this._tempPos = new Vector3();
+        this._currentPos = new Object3D();
+        this._targetPos = new Object3D();
+    }
+    start() {
+        this.camera = this.object3D.getOrAddComponent(Camera3D);
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_DOWN, this.onMouseDown, this);
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_MOVE, this.onMouseMove, this, null, 10);
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_UP, this.onMouseUp, this, null, 10);
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_WHEEL, this.onMouseWheel, this);
+    }
+    flowTarget(target, offset = Vector3.ZERO) {
+        this._flowTarget = target;
+        this._flowOffset ||= new Vector3();
+        this._flowOffset.copyFrom(offset);
+    }
+    getFlowTarget() {
+        return this._flowTarget;
+    }
+    setCamera(roll, pitch, distance, target) {
+        this.roll = roll;
+        this.pitch = pitch;
+        this.distance = distance;
+        if (this.maxDistance < distance * 1.5) {
+            this.maxDistance = distance * 1.5;
+        }
+        if (target) {
+            this._targetPos.transform.localPosition.copy(target);
+        }
+    }
+    focusByBounds(obj) {
+        let bounds = BoundUtil.genMeshBounds(obj);
+        this.target = bounds.center;
+    }
+    set target(target) {
+        this._targetPos.transform.localPosition.copy(target);
+    }
+    get target() {
+        return this._targetPos.transform.localPosition;
+    }
+    onMouseWheel(e) {
+        if (!this.enable)
+            return;
+        this._wheelStep =
+            (this.wheelStep *
+                Vector3Ex.distance(this._currentPos.transform.worldPosition, this.camera.transform.worldPosition)) /
+                10;
+        this.distance -= Engine3D.inputSystem.wheelDelta * this._wheelStep;
+        this.distance = clamp(this.distance, this.minDistance, this.maxDistance);
+    }
+    onMouseDown(e) {
+        if (!this.enable)
+            return;
+        switch (e.mouseCode) {
+            case 0:
+                this._mouseLeftDown = true;
+                break;
+            case 1:
+                break;
+            case 2:
+                this._mouseRightDown = true;
+                break;
+            default:
+                break;
+        }
+    }
+    onMouseUp(e) {
+        this._mouseLeftDown = false;
+        this._mouseRightDown = false;
+    }
+    onMouseMove(e) {
+        if (!this.enable)
+            return;
+        if (this._mouseRightDown) {
+            Vector3.HELP_1.x =
+                -1 * e.movementX * Math.cos((this._roll * Math.PI) / 180) -
+                    e.movementY * Math.sin((this._roll * Math.PI) / 180);
+            Vector3.HELP_1.z =
+                -1 * e.movementY * Math.cos((this._roll * Math.PI) / 180) +
+                    e.movementX * Math.sin((this._roll * Math.PI) / 180);
+            this._targetPos.x += Vector3.HELP_1.x * this.mouseRightFactor;
+            this._targetPos.z += Vector3.HELP_1.z * this.mouseRightFactor;
+        }
+        if (this._mouseLeftDown) {
+            this.roll -= e.movementX * Time.delta * 0.001 * this.mouseLeftFactor;
+            this.pitch -= e.movementY * Time.delta * 0.001 * this.mouseLeftFactor;
+            this.pitch = clamp(this.pitch, this._topClamp, this._bottomClamp);
+        }
+    }
+    onBeforeUpdate(view) {
+        if (!this.enable)
+            return;
+        if (this._flowTarget) {
+            Vector3.HELP_0.copyFrom(this._flowTarget.transform.worldPosition);
+            Vector3.HELP_0.add(this._flowOffset, Vector3.HELP_0);
+            this.target = Vector3.HELP_0;
+        }
+        let dt = clamp(Time.delta, 0.0, 0.016);
+        if (this.smooth) {
+            this._currentPos.x +=
+                (this._targetPos.x - this._currentPos.x) * dt * this.dragSmooth;
+            this._currentPos.y +=
+                (this._targetPos.y - this._currentPos.y) * dt * this.dragSmooth;
+            this._currentPos.z +=
+                (this._targetPos.z - this._currentPos.z) * dt * this.dragSmooth;
+            this._distance +=
+                (this.distance - this._distance) * dt * this.wheelSmooth;
+            this._roll += (this.roll - this._roll) * dt * this.rollSmooth;
+            this._pitch += (this.pitch - this._pitch) * dt * this.rollSmooth;
+        }
+        else {
+            this._currentPos.x = this._targetPos.x;
+            this._currentPos.y = this._targetPos.y;
+            this._currentPos.z = this._targetPos.z;
+            this._distance = this.distance;
+            this._roll = this.roll;
+            this._pitch = this.pitch;
+        }
+        this._tempDir.set(0, 0, 1);
+        let q = Quaternion.HELP_0;
+        q.fromEulerAngles(this._pitch, this._roll, 0.0);
+        this._tempDir.applyQuaternion(q);
+        this._tempPos = Vector3Ex.mulScale(this._tempDir, this._distance, this._tempPos);
+        this._tempPos.add(this._currentPos.transform.localPosition, this._tempPos);
+        this.camera.lookAt(this._tempPos, this._currentPos.transform.localPosition, Vector3.UP);
+    }
+    destroy(force) {
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_DOWN, this.onMouseDown, this);
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_MOVE, this.onMouseMove, this);
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_UP, this.onMouseUp, this);
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_WHEEL, this.onMouseWheel, this);
+        super.destroy(force);
+        this.camera = null;
+        this._flowTarget = null;
+    }
+}

package/dist/src/components/controller/OrbitController.d.ts

@@ -0,0 +1,170 @@
+import { ComponentBase } from "../ComponentBase";
+import { Vector3 } from "../../math/Vector3";
+/**
+ * 围绕目标点进行轨道运动
+ */
+export declare class OrbitController extends ComponentBase {
+    /**
+     * internal camera
+     */
+    private _camera;
+    /**
+     * Whether to enable automatic rotation
+     */
+    autoRotate: boolean;
+    /**
+     * Automatic rotation speed coefficient
+     */
+    autoRotateSpeed: number;
+    /**
+     * Rotation speed coefficient
+     */
+    rotateFactor: number;
+    /**
+     * Scale speed coefficient
+     */
+    zoomFactor: number;
+    /**
+     * Angle translation velocity coefficient
+     */
+    panFactor: number;
+    private _smooth;
+    private _minDistance;
+    private _maxDistance;
+    private _maxPolarAngle;
+    private _minPolarAngle;
+    private _target;
+    private _cTarget;
+    private _position;
+    private _cPosition;
+    private _spherical;
+    private _isMouseDown;
+    private _lastMouseX;
+    private _lastMouseY;
+    private _isPanning;
+    /**
+     * @constructor
+     */
+    constructor();
+    /**
+     * Get the target position
+     */
+    get target(): Vector3;
+    /**
+     * Set the target position
+     */
+    set target(v: Vector3);
+    /**
+     * Set smoothing coefficient of controller
+     */
+    get smooth(): number;
+    /**
+     * Get smoothing coefficient of controller
+     */
+    set smooth(v: number);
+    /**
+     * Get the minimum distance between the camera and the target coordinate
+     * @defaultValue 1
+     */
+    get minDistance(): number;
+    /**
+     * Set the minimum distance between the camera and the target position
+     * min value: 0.000002
+     * max value: `this._maxDistance` {@link maxDistance}
+     */
+    set minDistance(v: number);
+    /**
+     * Get the max distance between the camera and the target position
+     * @defaultValue 100000
+     */
+    get maxDistance(): number;
+    /**
+     * Set the max distance between the camera and the target position
+     * min - `this._maxDistance`
+     * max - Infinity
+     */
+    set maxDistance(v: number);
+    /**
+     * Get the lower elevation limit of the camera from the xz plane
+     * @defaultValue -90
+     */
+    get minPolarAngle(): number;
+    /**
+     * Set the lower elevation limit of the camera from the xz plane
+     * min - -90
+     * max - {@link maxPolarAngle}
+     */
+    set minPolarAngle(v: number);
+    /**
+     * Get the upper elevation limit of the camera from the xz plane
+     * @defaultValue 90
+     */
+    get maxPolarAngle(): number;
+    /**
+     * Set the upper elevation limit of the camera to the xz plane
+     * min - less than {@link minPolarAngle}
+     * max - 90
+     */
+    set maxPolarAngle(v: number);
+    get spherical(): Spherical;
+    /**
+     * @internal
+     */
+    start(): void;
+    /**
+     * @internal
+     */
+    onEnable(): void;
+    /**
+     * @internal
+     */
+    onDisable(): void;
+    /**
+     * @internal
+     */
+    onUpdate(): void;
+    /**
+     * @internal
+     */
+    private onWheel;
+    /**
+     * @internal
+     */
+    private onPointerDown;
+    /**
+     * @internal
+     */
+    private onPointerMove;
+    /**
+     * @internal
+     */
+    private onPointerUp;
+    /**
+     * @internal
+     */
+    updateCamera(): void;
+    /**
+     * @internal
+     */
+    private addEventListener;
+    /**
+     * @internal
+     */
+    private removeEventListener;
+}
+/**
+ * @internal
+ */
+declare class Spherical {
+    radius: number;
+    phi: number;
+    theta: number;
+    coords: Vector3;
+    constructor(radius?: number, phi?: number, theta?: number);
+    set(radius: number, phi: number, theta: number): this;
+    makeSafe(): this;
+    setFromVector3(v: Vector3): this;
+    setCoords(x: number, y: number, z: number): this;
+    getCoords(): Vector3;
+}
+export {};

package/dist/src/components/controller/OrbitController.js

@@ -0,0 +1,339 @@
+import { Engine3D } from "../../Engine3D";
+import { Camera3D } from "../../core/Camera3D";
+import { ComponentBase } from "../ComponentBase";
+import { Vector3 } from "../../math/Vector3";
+import { Vector3Ex } from "../../util/Vector3Ex";
+import { clamp } from "../../math/MathUtil";
+import { PointerEvent3D } from "../../event/eventConst/PointerEvent3D";
+/**
+ * 围绕目标点进行轨道运动
+ */
+export class OrbitController extends ComponentBase {
+    /**
+     * @constructor
+     */
+    constructor() {
+        super();
+        /**
+         * Whether to enable automatic rotation
+         */
+        this.autoRotate = false;
+        /**
+         * Automatic rotation speed coefficient
+         */
+        this.autoRotateSpeed = 0.1;
+        /**
+         * Rotation speed coefficient
+         */
+        this.rotateFactor = 0.5;
+        /**
+         * Scale speed coefficient
+         */
+        this.zoomFactor = 0.1;
+        /**
+         * Angle translation velocity coefficient
+         */
+        this.panFactor = 0.25;
+        this._smooth = 5;
+        this._minDistance = 1;
+        this._maxDistance = 100000;
+        this._maxPolarAngle = 90;
+        this._minPolarAngle = -90;
+        this._target = new Vector3(0, 0, 0);
+        this._cTarget = new Vector3(0, 0, 0);
+        this._position = new Vector3(0, 0, 0);
+        this._cPosition = new Vector3(0, 0, 0);
+        this._spherical = new Spherical();
+        this._isMouseDown = false;
+        this._lastMouseX = -1;
+        this._lastMouseY = -1;
+        this._isPanning = false;
+    }
+    /**
+     * Get the target position
+     */
+    get target() {
+        return this._target;
+    }
+    /**
+     * Set the target position
+     */
+    set target(v) {
+        this._target = v;
+    }
+    /**
+     * Set smoothing coefficient of controller
+     */
+    get smooth() {
+        return this._smooth;
+    }
+    /**
+     * Get smoothing coefficient of controller
+     */
+    set smooth(v) {
+        this._smooth = Math.max(v, 1);
+    }
+    /**
+     * Get the minimum distance between the camera and the target coordinate
+     * @defaultValue 1
+     */
+    get minDistance() {
+        return this._minDistance;
+    }
+    /**
+     * Set the minimum distance between the camera and the target position
+     * min value: 0.000002
+     * max value: `this._maxDistance` {@link maxDistance}
+     */
+    set minDistance(v) {
+        this._minDistance = clamp(v, 0.000002, this._maxDistance);
+    }
+    /**
+     * Get the max distance between the camera and the target position
+     * @defaultValue 100000
+     */
+    get maxDistance() {
+        return this._maxDistance;
+    }
+    /**
+     * Set the max distance between the camera and the target position
+     * min - `this._maxDistance`
+     * max - Infinity
+     */
+    set maxDistance(v) {
+        this._maxDistance = clamp(v, this._minDistance, Infinity);
+    }
+    /**
+     * Get the lower elevation limit of the camera from the xz plane
+     * @defaultValue -90
+     */
+    get minPolarAngle() {
+        return this._minPolarAngle;
+    }
+    /**
+     * Set the lower elevation limit of the camera from the xz plane
+     * min - -90
+     * max - {@link maxPolarAngle}
+     */
+    set minPolarAngle(v) {
+        this._minPolarAngle = clamp(v, -90, this._maxPolarAngle);
+    }
+    /**
+     * Get the upper elevation limit of the camera from the xz plane
+     * @defaultValue 90
+     */
+    get maxPolarAngle() {
+        return this._maxPolarAngle;
+    }
+    /**
+     * Set the upper elevation limit of the camera to the xz plane
+     * min - less than {@link minPolarAngle}
+     * max - 90
+     */
+    set maxPolarAngle(v) {
+        this._maxPolarAngle = clamp(v, this._minPolarAngle, 90);
+    }
+    get spherical() {
+        return this._spherical;
+    }
+    /**
+     * @internal
+     */
+    start() {
+        this._camera = this.object3D.getComponent(Camera3D);
+        this._position = this.object3D.transform.localPosition.clone();
+        this._cPosition = this._position.clone();
+        this._target = this._camera.lookTarget.clone();
+        this._cTarget = this._target.clone();
+        this._spherical.setCoords(this._position.x - this._target.x, this._position.y - this._target.y, this._position.z - this._target.z);
+        this._camera.lookAt(this._cPosition, this._cTarget, Vector3.UP);
+        this.addEventListener();
+    }
+    /**
+     * @internal
+     */
+    onEnable() {
+        this.addEventListener();
+    }
+    /**
+     * @internal
+     */
+    onDisable() {
+        this.removeEventListener();
+    }
+    /**
+     * @internal
+     */
+    onUpdate() {
+        let step = this._isPanning ? 1 : this.smooth;
+        let changed = false;
+        if (!this._cPosition.equals(this.object3D.transform.localPosition)) {
+            this._position.copyFrom(this.object3D.transform.localPosition);
+            step = 1;
+            changed = true;
+        }
+        if (!this._cTarget.equals(this._target)) {
+            this._cTarget.copyFrom(this._target);
+            step = 1;
+            changed = true;
+        }
+        if (changed) {
+            this._spherical.setCoords(this._position.x - this._target.x, this._position.y - this._target.y, this._position.z - this._target.z);
+        }
+        else if (!this._isMouseDown && this.autoRotate) {
+            this._spherical.theta -= (this.autoRotateSpeed * Math.PI) / 180;
+            this.updateCamera();
+        }
+        // lerp _cPosition to _position
+        let x = (this._position.x - this._cPosition.x) / step;
+        let y = (this._position.y - this._cPosition.y) / step;
+        let z = (this._position.z - this._cPosition.z) / step;
+        this._cPosition.x =
+            Math.abs(x) > 1e-10 ? this._cPosition.x + x : this._position.x;
+        this._cPosition.y =
+            Math.abs(y) > 1e-10 ? this._cPosition.y + y : this._position.y;
+        this._cPosition.z =
+            Math.abs(z) > 1e-10 ? this._cPosition.z + z : this._position.z;
+        this._camera.lookAt(this._cPosition, this._cTarget, Vector3.UP);
+    }
+    /**
+     * @internal
+     */
+    onWheel(e) {
+        e.deltaY = clamp(e.deltaY, -this._spherical.radius, this._spherical.radius);
+        this._spherical.radius += e.deltaY * this.zoomFactor;
+        this._spherical.radius = clamp(this._spherical.radius, this.minDistance, this.maxDistance);
+        this.updateCamera();
+    }
+    /**
+     * @internal
+     */
+    onPointerDown(e) {
+        this._isMouseDown = true;
+        this._lastMouseX = e.mouseX;
+        this._lastMouseY = e.mouseY;
+        if (e.mouseCode === 2)
+            this._isPanning = true;
+    }
+    /**
+     * @internal
+     */
+    onPointerMove(e) {
+        if (!this._isMouseDown || !this.enable)
+            return;
+        let mousex = e.mouseX;
+        let mousey = e.mouseY;
+        // rotate
+        if (e.mouseCode === 0 && this._lastMouseX > 0 && this._lastMouseY > 0) {
+            const ra = -(mousex - this._lastMouseX) * this.rotateFactor;
+            const rb = (mousey - this._lastMouseY) * this.rotateFactor;
+            this._spherical.theta += (ra * Math.PI) / 180;
+            this._spherical.phi -= (rb * Math.PI) / 180;
+            this._spherical.phi = clamp(this._spherical.phi, this.minPolarAngle, this.maxPolarAngle);
+            this.updateCamera();
+            // pan
+        }
+        else if (e.mouseCode === 2) {
+            Vector3Ex.mulScale(this.object3D.transform.up, e.movementY * this.panFactor * this._camera.aspect, Vector3.HELP_1);
+            if (e.ctrlKey || e.metaKey) {
+                this._target.y += Vector3.HELP_1.y;
+            }
+            else {
+                this._target.x += Vector3.HELP_1.x;
+                this._target.z += Vector3.HELP_1.z;
+            }
+            Vector3Ex.mulScale(this.object3D.transform.right, -e.movementX * this.panFactor, Vector3.HELP_1);
+            this._target.x -= Vector3.HELP_1.x;
+            this._target.z -= Vector3.HELP_1.z;
+            this._cTarget.copyFrom(this._target);
+            this.updateCamera();
+        }
+        this._lastMouseX = mousex;
+        this._lastMouseY = mousey;
+    }
+    /**
+     * @internal
+     */
+    onPointerUp(e) {
+        this._isMouseDown = false;
+        if (e.mouseCode === 2) {
+            this._isPanning = false;
+        }
+    }
+    /**
+     * @internal
+     */
+    updateCamera() {
+        this._spherical.makeSafe();
+        let pos = this._spherical.getCoords();
+        this._position.set(pos.x + this._target.x, pos.y + this._target.y, pos.z + this._target.z);
+    }
+    /**
+     * @internal
+     */
+    addEventListener() {
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_WHEEL, this.onWheel, this);
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_DOWN, this.onPointerDown, this);
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_MOVE, this.onPointerMove, this);
+        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_UP, this.onPointerUp, this);
+    }
+    /**
+     * @internal
+     */
+    removeEventListener() {
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_WHEEL, this.onWheel, this);
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_DOWN, this.onPointerDown, this);
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_MOVE, this.onPointerMove, this);
+        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_UP, this.onPointerUp, this);
+    }
+}
+/**
+ * @internal
+ * Epsilon to test whether numbers are close enough to be considered equal.
+ */
+const EPS = Math.PI / 180 / 100;
+/**
+ * @internal
+ */
+class Spherical {
+    constructor(radius = 1, phi = 0, theta = 0) {
+        this.radius = radius;
+        this.phi = phi; // polar angle
+        this.theta = theta; // azimuthal angle
+        this.coords = new Vector3();
+        return this;
+    }
+    set(radius, phi, theta) {
+        this.radius = radius;
+        this.phi = phi;
+        this.theta = theta;
+        return this;
+    }
+    // restrict phi to be between EPS and PI-EPS
+    makeSafe() {
+        this.phi = Math.max(EPS, Math.min(Math.PI - EPS, this.phi));
+        return this;
+    }
+    setFromVector3(v) {
+        return this.setCoords(v.x, v.y, v.z);
+    }
+    setCoords(x, y, z) {
+        this.radius = Math.sqrt(x * x + y * y + z * z);
+        if (this.radius === 0) {
+            this.theta = 0;
+            this.phi = 0;
+        }
+        else {
+            this.theta = Math.atan2(x, z);
+            this.phi = Math.acos(clamp(y / this.radius, -1, 1));
+        }
+        return this;
+    }
+    getCoords() {
+        const sinPhiRadius = Math.sin(this.phi) * this.radius;
+        this.coords.x = sinPhiRadius * Math.sin(this.theta);
+        this.coords.y = Math.cos(this.phi) * this.radius;
+        this.coords.z = sinPhiRadius * Math.cos(this.theta);
+        return this.coords;
+    }
+}

package/dist/src/components/controller/ThirdPersonCameraController.d.ts

@@ -0,0 +1,16 @@
+import { Object3D } from "../../core/entities/Object3D";
+import { ComponentBase } from "../ComponentBase";
+export declare class ThirdPersonCameraController extends ComponentBase {
+    focus: Object3D;
+    private _rotation;
+    distance: number;
+    private _camera;
+    constructor();
+    start(): void;
+    private mouseDown;
+    private mouseUp;
+    private mouseMove;
+    private mouseWheel;
+    onUpdate(): void;
+    destroy(force?: boolean): void;
+}