three-base 2.0.142 → 2.0.166

package/instanced/InstancedTemplate.d.ts

@@ -1,46 +1,46 @@
-import { AnimationClip, BufferGeometry, Material, Matrix4, Object3D, Skeleton } from "three";
-import InstancedChild from "./InstancedChild";
-/** 一个 submesh 的描述：几何 + 材质 + 是否骨骼网格 */
-export interface InstancedSubmesh {
-    geometry: BufferGeometry;
-    material: Material;
-    skinned: boolean;
-    /** 非骨骼动画：拥有该几何的节点（取世界变换烘焙进几何） */
-    node?: Object3D;
-    /** 非骨骼动画：原始局部几何副本（每帧重新变换的源，避免累积误差） */
-    localGeometry?: BufferGeometry;
-    /**
-     * 该 submesh 在 GLB 场景图里的世界变换（加载时快照）。
-     * GLTF 常把模型整体包在一层带缩放/位移的根节点里（如 Soldier.glb 根节点 scale=0.01），
-     * 只克隆几何会丢掉这层变换导致模型大小/位置错乱。写实例矩阵时把它乘到 child.matrixWorld 上，
-     * 使实例化渲染与"把整棵 GLB 场景图加进场景"的效果一致（对齐 MeshBase 行为）。
-     */
-    nodeWorldMatrix?: Matrix4;
-}
-/**
- * 模板：描述"一类实例"的渲染数据。
- * - 内置几何：submeshes 含一份几何+材质；
- * - GLB：submeshes 按 geometry/material uuid 分组（多 submesh），并可能带 skeleton/animations。
- */
-export interface InstancedTemplate {
-    submeshes: InstancedSubmesh[];
-    skeleton?: Skeleton;
-    animations: AnimationClip[];
-    /** 含骨骼时：每帧把骨骼姿态烘焙进 sharedGeometry，所有实例复用（共享姿态） */
-    sharedGeometry?: BufferGeometry;
-    /**
-     * 含骨骼时：原始 bind-pose 几何（只读，永不修改）。
-     * bakeSkinning 必须每帧从这里读"绑定姿态顶点"，再写到 sharedGeometry，
-     * 绝不能原地读改写 sharedGeometry（否则上一帧的烘焙结果被当成 bind-pose 再烤一遍 → 蒙皮累积错位、越动越乱）。
-     */
-    sourceGeometry?: BufferGeometry;
-    /** 含骨骼时：动画驱动用根对象（含 skeleton 层级，不渲染，仅用于 mixer 更新骨骼） */
-    animRoot?: Object3D;
-    /** 含骨骼时：SkinnedMesh 的 bindMatrix / bindMatrixInverse，烘焙蒙皮用 */
-    bindMatrix?: Matrix4;
-    bindMatrixInverse?: Matrix4;
-}
-/**
- * 解析某实例的模板：内置几何同步返回；GLB 异步加载并按 batchKey 缓存。
- */
-export declare function loadTemplate(child: InstancedChild): Promise<InstancedTemplate>;
+import { AnimationClip, BufferGeometry, Material, Matrix4, Object3D, Skeleton } from "three";
+import InstancedChild from "./InstancedChild";
+/** 一个 submesh 的描述：几何 + 材质 + 是否骨骼网格 */
+export interface InstancedSubmesh {
+    geometry: BufferGeometry;
+    material: Material;
+    skinned: boolean;
+    /** 非骨骼动画：拥有该几何的节点（取世界变换烘焙进几何） */
+    node?: Object3D;
+    /** 非骨骼动画：原始局部几何副本（每帧重新变换的源，避免累积误差） */
+    localGeometry?: BufferGeometry;
+    /**
+     * 该 submesh 在 GLB 场景图里的世界变换（加载时快照）。
+     * GLTF 常把模型整体包在一层带缩放/位移的根节点里（如 Soldier.glb 根节点 scale=0.01），
+     * 只克隆几何会丢掉这层变换导致模型大小/位置错乱。写实例矩阵时把它乘到 child.matrixWorld 上，
+     * 使实例化渲染与"把整棵 GLB 场景图加进场景"的效果一致（对齐 MeshBase 行为）。
+     */
+    nodeWorldMatrix?: Matrix4;
+}
+/**
+ * 模板：描述"一类实例"的渲染数据。
+ * - 内置几何：submeshes 含一份几何+材质；
+ * - GLB：submeshes 按 geometry/material uuid 分组（多 submesh），并可能带 skeleton/animations。
+ */
+export interface InstancedTemplate {
+    submeshes: InstancedSubmesh[];
+    skeleton?: Skeleton;
+    animations: AnimationClip[];
+    /** 含骨骼时：每帧把骨骼姿态烘焙进 sharedGeometry，所有实例复用（共享姿态） */
+    sharedGeometry?: BufferGeometry;
+    /**
+     * 含骨骼时：原始 bind-pose 几何（只读，永不修改）。
+     * bakeSkinning 必须每帧从这里读"绑定姿态顶点"，再写到 sharedGeometry，
+     * 绝不能原地读改写 sharedGeometry（否则上一帧的烘焙结果被当成 bind-pose 再烤一遍 → 蒙皮累积错位、越动越乱）。
+     */
+    sourceGeometry?: BufferGeometry;
+    /** 含骨骼时：动画驱动用根对象（含 skeleton 层级，不渲染，仅用于 mixer 更新骨骼） */
+    animRoot?: Object3D;
+    /** 含骨骼时：SkinnedMesh 的 bindMatrix / bindMatrixInverse，烘焙蒙皮用 */
+    bindMatrix?: Matrix4;
+    bindMatrixInverse?: Matrix4;
+}
+/**
+ * 解析某实例的模板：内置几何同步返回；GLB 异步加载并按 batchKey 缓存。
+ */
+export declare function loadTemplate(child: InstancedChild): Promise<InstancedTemplate>;

package/instanced/InstancedTemplate.js

@@ -1,125 +1,125 @@
-import { Matrix4, } from "three";
-import threeLoader from "../threeLoader";
-/** 按 batchKey 缓存模板加载 Promise，避免同一 GLB 重复加载 */
-const _templateCache = new Map();
-function uuidOf(geometry, material) {
-    return `${geometry.uuid}/${material.uuid}`;
-}
-/**
- * 解析某实例的模板：内置几何同步返回；GLB 异步加载并按 batchKey 缓存。
- */
-export function loadTemplate(child) {
-    const ctor = child.constructor;
-    // 内置几何：同步构造
-    if (ctor.geometry && ctor.material) {
-        return Promise.resolve({
-            submeshes: [
-                { geometry: ctor.geometry, material: ctor.material, skinned: false },
-            ],
-            animations: [],
-        });
-    }
-    // GLB：异步加载 + 按 batchKey 缓存
-    if (ctor.instanceUrl) {
-        const key = child.getBatchKey();
-        const cached = _templateCache.get(key);
-        if (cached) {
-            return cached;
-        }
-        const p = resolveGLB(ctor.instanceUrl);
-        _templateCache.set(key, p);
-        return p;
-    }
-    return Promise.reject(new Error("[loadTemplate] 子类未定义 geometry+material 或 instanceUrl"));
-}
-/** 加载 GLB 并按 geometry/material 分组，提取首个 skeleton 与动画剪辑 */
-function resolveGLB(url) {
-    return threeLoader.loadModel(url).then((root) => {
-        if (!root) {
-            throw new Error(`[resolveGLB] 加载失败: ${url}`);
-        }
-        // 确保场景图世界矩阵已就绪，下面快照每个 submesh 的 nodeWorldMatrix 才准确
-        root.updateMatrixWorld(true);
-        const geometryMap = new Map();
-        let skeleton;
-        let firstSkinned;
-        let animations = [];
-        root.traverse((obj) => {
-            const mesh = obj;
-            const isMesh = mesh.isMesh === true;
-            if (!isMesh) {
-                return;
-            }
-            const geom = mesh.geometry;
-            const rawMat = mesh.material;
-            const mat = Array.isArray(rawMat) ? rawMat[0] : rawMat;
-            const skinned = mesh.isSkinnedMesh === true;
-            const key = uuidOf(geom, mat);
-            if (!geometryMap.has(key)) {
-                geometryMap.set(key, {
-                    geometry: geom,
-                    material: mat,
-                    skinned,
-                    node: mesh,
-                    // nodeWorldMatrix 先留空，下方按 骨骼/节点动画 类型统一确定
-                });
-            }
-            if (skinned && !firstSkinned) {
-                firstSkinned = mesh;
-                skeleton = mesh.skeleton;
-            }
-        });
-        // GLTF 加载器把 animations 挂在 scene 上（threeLoader 已 res.scene.animations = res.animations）
-        const rootAnims = root.animations;
-        if (rootAnims && rootAnims.length) {
-            animations = rootAnims;
-        }
-        const template = {
-            submeshes: Array.from(geometryMap.values()),
-            skeleton,
-            animations,
-        };
-        // 含骨骼：保留原始 bind-pose 几何（sourceGeometry，只读） + 一份渲染用几何（sharedGeometry，每帧被烘焙覆盖）。
-        // 二者必须分开：bakeSkinning 从 sourceGeometry 读、写 sharedGeometry，避免原地累积烘焙导致动画越动越乱。
-        if (firstSkinned && skeleton) {
-            const src = firstSkinned.geometry;
-            template.sourceGeometry = src;
-            template.sharedGeometry = src.clone();
-            template.animRoot = root;
-            template.bindMatrix = firstSkinned.bindMatrix;
-            template.bindMatrixInverse = firstSkinned.bindMatrixInverse;
-        }
-        // 非骨骼动画（节点变换动画，如 point1.glb）：克隆几何，每帧把节点相对根的世界变换烘焙进几何。
-        // 与骨骼 LBS 同理 —— 把"节点层级动画"降级为每帧 CPU 几何变换，所有实例复用一份变换后的几何，
-        // 天然兼容项目所有材质与后处理。
-        if (!skeleton && animations.length > 0) {
-            template.animRoot = root;
-            for (const sub of template.submeshes) {
-                sub.localGeometry = sub.geometry.clone();
-                sub.geometry = sub.geometry.clone();
-            }
-        }
-        // 统一确定每个 submesh 的 nodeWorldMatrix：
-        // - 骨骼 / 静态：用 submesh 节点(mesh) 自身的完整世界变换（含祖先）。
-        //   bakeSkinning 输出在 skinned mesh 局部空间、静态几何即 GLTF 原始局部空间，都需完整世界变换才能落到位；
-        //   Soldier.glb 根节点 scale=0.01 这类"整模型套一层缩放根"的情形，靠这里补回
-        //   （对齐 MeshBase 把整棵 GLB 场景图加进场景的行为）。
-        // - 非骨骼节点动画（如 point1.glb）：bakeNodeTransform 已把"节点相对根的世界变换"
-        //   烘焙进几何（抵消了 animRoot），所以只需补 animRoot 的世界变换即可，
-        //   绝不能再用 mesh.matrixWorld（否则节点自身变换被重复应用 → 多节点模型整体扭曲）。
-        const animRootWorld = template.animRoot
-            ? template.animRoot.matrixWorld.clone()
-            : new Matrix4();
-        for (const sub of template.submeshes) {
-            if (!skeleton && animations.length > 0) {
-                sub.nodeWorldMatrix = animRootWorld;
-            }
-            else {
-                sub.nodeWorldMatrix = sub.node
-                    ? sub.node.matrixWorld.clone()
-                    : new Matrix4();
-            }
-        }
-        return template;
-    });
-}
+import { Matrix4, } from "three";
+import threeLoader from "../threeLoader";
+/** 按 batchKey 缓存模板加载 Promise，避免同一 GLB 重复加载 */
+const _templateCache = new Map();
+function uuidOf(geometry, material) {
+    return `${geometry.uuid}/${material.uuid}`;
+}
+/**
+ * 解析某实例的模板：内置几何同步返回；GLB 异步加载并按 batchKey 缓存。
+ */
+export function loadTemplate(child) {
+    const ctor = child.constructor;
+    // 内置几何：同步构造
+    if (ctor.geometry && ctor.material) {
+        return Promise.resolve({
+            submeshes: [
+                { geometry: ctor.geometry, material: ctor.material, skinned: false },
+            ],
+            animations: [],
+        });
+    }
+    // GLB：异步加载 + 按 batchKey 缓存
+    if (ctor.instanceUrl) {
+        const key = child.getBatchKey();
+        const cached = _templateCache.get(key);
+        if (cached) {
+            return cached;
+        }
+        const p = resolveGLB(ctor.instanceUrl);
+        _templateCache.set(key, p);
+        return p;
+    }
+    return Promise.reject(new Error("[loadTemplate] 子类未定义 geometry+material 或 instanceUrl"));
+}
+/** 加载 GLB 并按 geometry/material 分组，提取首个 skeleton 与动画剪辑 */
+function resolveGLB(url) {
+    return threeLoader.loadModel(url).then((root) => {
+        if (!root) {
+            throw new Error(`[resolveGLB] 加载失败: ${url}`);
+        }
+        // 确保场景图世界矩阵已就绪，下面快照每个 submesh 的 nodeWorldMatrix 才准确
+        root.updateMatrixWorld(true);
+        const geometryMap = new Map();
+        let skeleton;
+        let firstSkinned;
+        let animations = [];
+        root.traverse((obj) => {
+            const mesh = obj;
+            const isMesh = mesh.isMesh === true;
+            if (!isMesh) {
+                return;
+            }
+            const geom = mesh.geometry;
+            const rawMat = mesh.material;
+            const mat = Array.isArray(rawMat) ? rawMat[0] : rawMat;
+            const skinned = mesh.isSkinnedMesh === true;
+            const key = uuidOf(geom, mat);
+            if (!geometryMap.has(key)) {
+                geometryMap.set(key, {
+                    geometry: geom,
+                    material: mat,
+                    skinned,
+                    node: mesh,
+                    // nodeWorldMatrix 先留空，下方按 骨骼/节点动画 类型统一确定
+                });
+            }
+            if (skinned && !firstSkinned) {
+                firstSkinned = mesh;
+                skeleton = mesh.skeleton;
+            }
+        });
+        // GLTF 加载器把 animations 挂在 scene 上（threeLoader 已 res.scene.animations = res.animations）
+        const rootAnims = root.animations;
+        if (rootAnims && rootAnims.length) {
+            animations = rootAnims;
+        }
+        const template = {
+            submeshes: Array.from(geometryMap.values()),
+            skeleton,
+            animations,
+        };
+        // 含骨骼：保留原始 bind-pose 几何（sourceGeometry，只读） + 一份渲染用几何（sharedGeometry，每帧被烘焙覆盖）。
+        // 二者必须分开：bakeSkinning 从 sourceGeometry 读、写 sharedGeometry，避免原地累积烘焙导致动画越动越乱。
+        if (firstSkinned && skeleton) {
+            const src = firstSkinned.geometry;
+            template.sourceGeometry = src;
+            template.sharedGeometry = src.clone();
+            template.animRoot = root;
+            template.bindMatrix = firstSkinned.bindMatrix;
+            template.bindMatrixInverse = firstSkinned.bindMatrixInverse;
+        }
+        // 非骨骼动画（节点变换动画，如 point1.glb）：克隆几何，每帧把节点相对根的世界变换烘焙进几何。
+        // 与骨骼 LBS 同理 —— 把"节点层级动画"降级为每帧 CPU 几何变换，所有实例复用一份变换后的几何，
+        // 天然兼容项目所有材质与后处理。
+        if (!skeleton && animations.length > 0) {
+            template.animRoot = root;
+            for (const sub of template.submeshes) {
+                sub.localGeometry = sub.geometry.clone();
+                sub.geometry = sub.geometry.clone();
+            }
+        }
+        // 统一确定每个 submesh 的 nodeWorldMatrix：
+        // - 骨骼 / 静态：用 submesh 节点(mesh) 自身的完整世界变换（含祖先）。
+        //   bakeSkinning 输出在 skinned mesh 局部空间、静态几何即 GLTF 原始局部空间，都需完整世界变换才能落到位；
+        //   Soldier.glb 根节点 scale=0.01 这类"整模型套一层缩放根"的情形，靠这里补回
+        //   （对齐 MeshBase 把整棵 GLB 场景图加进场景的行为）。
+        // - 非骨骼节点动画（如 point1.glb）：bakeNodeTransform 已把"节点相对根的世界变换"
+        //   烘焙进几何（抵消了 animRoot），所以只需补 animRoot 的世界变换即可，
+        //   绝不能再用 mesh.matrixWorld（否则节点自身变换被重复应用 → 多节点模型整体扭曲）。
+        const animRootWorld = template.animRoot
+            ? template.animRoot.matrixWorld.clone()
+            : new Matrix4();
+        for (const sub of template.submeshes) {
+            if (!skeleton && animations.length > 0) {
+                sub.nodeWorldMatrix = animRootWorld;
+            }
+            else {
+                sub.nodeWorldMatrix = sub.node
+                    ? sub.node.matrixWorld.clone()
+                    : new Matrix4();
+            }
+        }
+        return template;
+    });
+}

package/keyControls.d.ts

@@ -1,30 +1,29 @@
-/// <reference types="lodash" />
-import { EventDispatcher, EventListener, Vector3 } from "three";
-import type { KeyControlsEventTypeMap, KeyAddEvent, KeyDeleteEvent, KeyEnterEvent } from "./EventMap";
-/**
- * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
- *
- * @class KeyControls
- * @extends {EventDispatcher<KeyControlsEventTypeMap>}
- */
-declare class KeyControls extends EventDispatcher<KeyControlsEventTypeMap> {
-    constructor();
-    uuid: string;
-    direction: Vector3;
-    _listeners?: {
-        [key: string]: Array<(event: {
-            type: string;
-        }) => void>;
-    };
-    add(e: KeyAddEvent): void;
-    delete(e: KeyboardEvent | KeyDeleteEvent): void;
-    enter(e: KeyboardEvent | KeyEnterEvent): void;
-    keyDown: (e: KeyboardEvent) => void;
-    removeEvent: import("lodash").DebouncedFuncLeading<(type: string) => void>;
-    addEventListener<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
-    addEvent(): void;
-    dispose(): void;
-}
-declare const keyControls: KeyControls;
-export { KeyControls, keyControls };
-export default keyControls;
+import { EventDispatcher, EventListener, Vector3 } from "three";
+import type { KeyControlsEventTypeMap, KeyAddEvent, KeyDeleteEvent, KeyEnterEvent } from "./EventMap";
+/**
+ * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
+ *
+ * @class KeyControls
+ * @extends {EventDispatcher<KeyControlsEventTypeMap>}
+ */
+declare class KeyControls extends EventDispatcher<KeyControlsEventTypeMap> {
+    constructor();
+    uuid: string;
+    direction: Vector3;
+    _listeners?: {
+        [key: string]: Array<(event: {
+            type: string;
+        }) => void>;
+    };
+    add(e: KeyAddEvent): void;
+    delete(e: KeyboardEvent | KeyDeleteEvent): void;
+    enter(e: KeyboardEvent | KeyEnterEvent): void;
+    keyDown: (e: KeyboardEvent) => void;
+    removeEvent: import("lodash").DebouncedFuncLeading<(type: string) => void>;
+    addEventListener<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
+    addEvent(): void;
+    dispose(): void;
+}
+declare const keyControls: KeyControls;
+export { KeyControls, keyControls };
+export default keyControls;

package/keyControls.js

@@ -1,101 +1,101 @@
-/*
- * @Author: xiaosihan
- * @Date: 2022-03-20 14:48:33
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-09-30 00:12:28
- */
-import { throttle } from "lodash";
-import { EventDispatcher, Vector3 } from "three";
-import { MathUtils } from "three";
-const { generateUUID } = MathUtils;
-/**
- * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
- *
- * @class KeyControls
- * @extends {EventDispatcher<KeyControlsEventTypeMap>}
- */
-class KeyControls extends EventDispatcher {
-    constructor() {
-        super();
-        this.addEvent();
-    }
-    uuid = generateUUID();
-    direction = new Vector3(0, 0, 0);
-    _listeners;
-    // 添加事件需要由外部实现
-    add(e) {
-        this.dispatchEvent({ ...e, type: "add" });
-    }
-    // 删除事件
-    delete(e) {
-        this.dispatchEvent({ ...e, type: "delete" });
-    }
-    // 回车按钮
-    enter(e) {
-        this.dispatchEvent({ ...e, type: "enter" });
-    }
-    keyDown = (e) => {
-        switch (e.keyCode) {
-            case 46: // 删除按钮
-                this.delete(e);
-                return;
-            case 13: // 回车按钮
-                this.enter(e);
-                return;
-            case 97: // 小键盘1
-                this.direction.set(0, 1, 0);
-                break;
-            case 96: // 小键盘0
-                this.direction.set(0, -1, 0);
-                break;
-            case 35: // 
-                this.direction.set(0, 0.001, 0);
-                break;
-            case 45:
-                this.direction.set(0, -0.001, 0);
-                break;
-            case 38: // 前
-                this.direction.set(0, 0, -1);
-                break;
-            case 37: // 后
-                this.direction.set(-1, 0, 0);
-                break;
-            case 40: // 左
-                this.direction.set(0, 0, 1);
-                break;
-            case 39: // 右
-                this.direction.set(1, 0, 0);
-                break;
-            default:
-                return;
-        }
-        if (e.shiftKey) {
-            this.direction.multiplyScalar(0.001);
-        }
-        if (e.ctrlKey) {
-            this.direction.multiplyScalar(0.1);
-        }
-        this.dispatchEvent({
-            type: "change",
-            direction: this.direction
-        });
-    };
-    // 节流 删除事件监听
-    removeEvent = throttle((type) => {
-        this._listeners = undefined;
-    }, 1000, { trailing: false });
-    addEventListener(type, listener) {
-        this.removeEvent(type);
-        super.addEventListener(type, listener);
-    }
-    addEvent() {
-        document.addEventListener("keydown", this.keyDown);
-    }
-    dispose() {
-        document.removeEventListener("keydown", this.keyDown);
-    }
-}
-const keyControls = new KeyControls();
-window.keyControls = keyControls;
-export { KeyControls, keyControls };
-export default keyControls;
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-03-20 14:48:33
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-09-30 00:12:28
+ */
+import { throttle } from "lodash";
+import { EventDispatcher, Vector3 } from "three";
+import { MathUtils } from "three";
+const { generateUUID } = MathUtils;
+/**
+ * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
+ *
+ * @class KeyControls
+ * @extends {EventDispatcher<KeyControlsEventTypeMap>}
+ */
+class KeyControls extends EventDispatcher {
+    constructor() {
+        super();
+        this.addEvent();
+    }
+    uuid = generateUUID();
+    direction = new Vector3(0, 0, 0);
+    _listeners;
+    // 添加事件需要由外部实现
+    add(e) {
+        this.dispatchEvent({ ...e, type: "add" });
+    }
+    // 删除事件
+    delete(e) {
+        this.dispatchEvent({ ...e, type: "delete" });
+    }
+    // 回车按钮
+    enter(e) {
+        this.dispatchEvent({ ...e, type: "enter" });
+    }
+    keyDown = (e) => {
+        switch (e.keyCode) {
+            case 46: // 删除按钮
+                this.delete(e);
+                return;
+            case 13: // 回车按钮
+                this.enter(e);
+                return;
+            case 97: // 小键盘1
+                this.direction.set(0, 1, 0);
+                break;
+            case 96: // 小键盘0
+                this.direction.set(0, -1, 0);
+                break;
+            case 35: // 
+                this.direction.set(0, 0.001, 0);
+                break;
+            case 45:
+                this.direction.set(0, -0.001, 0);
+                break;
+            case 38: // 前
+                this.direction.set(0, 0, -1);
+                break;
+            case 37: // 后
+                this.direction.set(-1, 0, 0);
+                break;
+            case 40: // 左
+                this.direction.set(0, 0, 1);
+                break;
+            case 39: // 右
+                this.direction.set(1, 0, 0);
+                break;
+            default:
+                return;
+        }
+        if (e.shiftKey) {
+            this.direction.multiplyScalar(0.001);
+        }
+        if (e.ctrlKey) {
+            this.direction.multiplyScalar(0.1);
+        }
+        this.dispatchEvent({
+            type: "change",
+            direction: this.direction
+        });
+    };
+    // 节流 删除事件监听
+    removeEvent = throttle((type) => {
+        this._listeners = undefined;
+    }, 1000, { trailing: false });
+    addEventListener(type, listener) {
+        this.removeEvent(type);
+        super.addEventListener(type, listener);
+    }
+    addEvent() {
+        document.addEventListener("keydown", this.keyDown);
+    }
+    dispose() {
+        document.removeEventListener("keydown", this.keyDown);
+    }
+}
+const keyControls = new KeyControls();
+window.keyControls = keyControls;
+export { KeyControls, keyControls };
+export default keyControls;