three-base 1.129.1 → 1.129.2

package/lib/{Transition.ts → Transition.js}

@@ -4,21 +4,15 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-06-22 19:44:23
  */
-
 import threeUtils from "./threeUtils";
-
-function bezier(arr: [number, number, number, number], t: number) {
+function bezier(arr, t) {
     const ut = 1 - t;
     const a1 = arr[1] * ut + arr[2] * t;
     const result = ((arr[0] * ut + arr[1] * t) * ut + a1 * t) * ut + (a1 * ut + (arr[2] * ut + arr[3] * t) * t) * t;
     return result;
 }
-
-interface TParam { [key: string]: number }
-
 // 过渡动画插件
 export default class Transition {
-
     /**
      *Creates an instance of transition.
      * @param {{ [key: string]: number }} // 初始值
@@ -26,100 +20,71 @@ export default class Transition {
      * @param {number} [duration=1000]  // 过渡时间
      * @memberof transition
      */
-    constructor(
-        param: TParam = {},
-        bezier: [number, number, number, number] = [0.8, 0, 0.2, 1],
-        duration = 500
-    ) {
-
+    constructor(param = {}, bezier = [0.8, 0, 0.2, 1], duration = 500) {
         this.setDuration(duration);
-
         this.setBezier(bezier);
-
         this.set(param);
     }
-
     // 所有的 key 的枚举
-    _keys: Array<string> = [];
-
+    _keys = [];
     // 贝塞尔曲线
-    _bezier: [number, number, number, number] = [0.8, 0, 0.2, 1];
-
+    _bezier = [0.8, 0, 0.2, 1];
     // x轴贝塞尔
-    _Xbezier: [number, number, number, number] = [0, 0.8, 0.2, 1];
-
+    _Xbezier = [0, 0.8, 0.2, 1];
     // y轴贝塞尔
-    _Ybezier: [number, number, number, number] = [0, 0, 1, 1];
-
-    setBezier(bezier: [number, number, number, number] = [0.8, 0, 0.2, 1]): this {
+    _Ybezier = [0, 0, 1, 1];
+    setBezier(bezier = [0.8, 0, 0.2, 1]) {
         this._bezier = [...bezier];
         this._Xbezier = [0, bezier[0], bezier[2], 1];
         this._Ybezier = [0, bezier[1], bezier[3], 1];
         return this;
     }
-
     // 当前时间戳
     timeTemp = performance.now();
-
     // 过渡时间
     _duration = 0;
-
     //延时
     _delay = 0;
-
     // 设置过渡时间
-    setDuration(duration = 500): this {
+    setDuration(duration = 500) {
         this._duration = duration;
         return this;
     }
-
     // 设置延时
     setDelay(delay = 0) {
         this._delay = delay;
         return this;
     }
-
     // 存储 每个参数的 起始位置 起始时间 终止位置  终止时间
-    _: { [key: string]: number } = {};
-
-    onChangeCall?: (josn: { [key: string]: number }) => void;
-
+    _ = {};
+    onChangeCall;
     // 执行过度动画
-    run({ timeTemp }: any) {
+    run({ timeTemp }) {
         this.timeTemp = timeTemp;
         if (!this.onChangeCall || this.isDone()) {
             threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
-        } else {
+        }
+        else {
             this.onChangeCall(this.getJson());
         }
         return this;
     }
-
     runbindThis = this.run.bind(this);
-
     // 设置动画对象的回调事件
-    onChange(onChangeCall: (josn: { [key: string]: number }) => void): this {
+    onChange(onChangeCall) {
         this.onChangeCall = onChangeCall;
         threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
         return this;
     }
-
     // 计算当前 key 的值
-    get(key: string | number): number {
-
+    get(key) {
         key = String(key);
-
         if (this._keys.includes(key) && this.timeTemp < (this._[key + "_startTime"] + this._duration)) {
-
             let start = this._[key + "_start"];
-
             let end = this._[key + "_end"];
-
             let timeProgress = Math.min(1, Math.max(0, (this.timeTemp - this._[key + "_startTime"]) / this._duration));
-
             // 斜率
             let t = 0;
-
             // 微分法 求斜率t
             while (bezier(this._Xbezier, t + 0.1) < timeProgress) {
                 t += 0.1;
@@ -130,135 +95,99 @@ export default class Transition {
             while (bezier(this._Xbezier, t + 0.001) < timeProgress) {
                 t += 0.001;
             }
-
-            t = Math.min(1, Math.max(0, t))  // 斜率最大为1
-
+            t = Math.min(1, Math.max(0, t)); // 斜率最大为1
             // 通过斜率求y值
             return (bezier(this._Ybezier, t) * (end - start)) + start;
-
-        } else if (this._keys.includes(key) && this.timeTemp >= (this._[key + "_startTime"] + this._duration)) {
-
+        }
+        else if (this._keys.includes(key) && this.timeTemp >= (this._[key + "_startTime"] + this._duration)) {
             return this._[key + "_end"];
         }
-
         // `没有 ${key} 的值`;
         return 0;
     }
-
-    async set(param: TParam): Promise<this> {
-
-        let timetemp = performance.now() + this._delay;;
-
+    async set(param) {
+        let timetemp = performance.now() + this._delay;
+        ;
         for (let key in param) {
-
             // 有就赋值
             if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.001) {
-
                 this._[key + "_start"] = this.get(key);
-
                 this._[key + "_end"] = param[key];
                 // 起始时间
                 this._[key + "_startTime"] = timetemp;
-
                 // 执行状态未完成
                 this._isDone = false;
-
                 // 没有就添加一个
-            } else if (!this._keys.includes(key)) {
-
+            }
+            else if (!this._keys.includes(key)) {
                 this._[key + "_start"] = param[key];
-
                 this._[key + "_end"] = param[key];
                 // 起始时间
                 this._[key + "_startTime"] = timetemp - this._duration;
-
                 // 执行状态未完成
                 this._isDone = false;
             }
-
             if (!this._keys.includes(key)) {
                 this._keys.push(key);
             }
-
             // // 执行状态未完成
             // this._isDone = false;
-
         }
-
         threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
         threeUtils.addEventListener("requestAnimationFrame", this.runbindThis);
-
         if (!this._isDone) {
             await new Promise(resolve => setTimeout(resolve, this._duration + 50));
         }
-
         return this;
     }
     // 重置起始和终止位置
-    reset(param: TParam): this {
-
+    reset(param) {
         for (let key in param) {
             this._[key + "_start"] = param[key];
             this._[key + "_end"] = param[key];
             this._[key + "_startTime"] = -this._duration;
         }
-
         if (this.onChangeCall) {
             this.onChangeCall(this.getJson());
         }
-
         this._isDone = true;
         return this;
     }
-
     // 获取过渡对象上面的key
-    getKeys(): string[] {
+    getKeys() {
         return [...this._keys];
     }
-
     // 判断是否有这个参数
-    hasKey(key: string): boolean {
+    hasKey(key) {
         return this._keys.includes(key);
     }
-
     // 获取全部参数
-    getJson(): { [key: string]: number } {
+    getJson() {
         let keys = this.getKeys();
-
-        let json: { [key: string]: number } = {};
-
+        let json = {};
         keys.map(key => {
             json[key] = this.get(key);
         });
         return json;
     }
-
     _isDone = false;
-
     // 是否执行完成了
-    isDone(): boolean {
-
+    isDone() {
         if (this._isDone) {
             return true;
         }
-
         let isisDone = false;
-
         for (let i in this._keys) {
-
             isisDone = this._[this._keys[i] + "_startTime"] + this._duration < this.timeTemp;
-
             // 只要有一个没有完成 都算没有完成 过渡
             if (!isisDone) {
                 return false;
             }
         }
-
         if (!this._isDone) {
             this._isDone = true;
             return false;
         }
-
         return true;
     }
-}
+}

package/lib/index.d.ts

@@ -0,0 +1,22 @@
+export { default } from "./lib/ThreeBase";
+export { default as EventMesh } from "./lib/EventMesh";
+export { default as ExtrudeMesh } from "./lib/ExtrudeMesh";
+export type { ExtrudePath } from "./lib/ExtrudeMesh";
+export type { ExtrudeMeshProps } from "./lib/ExtrudeMesh";
+export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
+export type { KeyframeAnimationProps } from "./lib/KeyFrameAnimation";
+export type { Keyframe } from "./lib/KeyFrameAnimation";
+export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
+export { default as PointLight } from "./lib/PointLight";
+export { default as Sky } from "./lib/Sky/Sky";
+export { default as keyContorls } from "./lib/keyContorls";
+export { default as Transition } from "./lib/Transition";
+export { default as threeUtils } from "./lib/threeUtils";
+export { default as threeLoader } from "./lib/threeLoader";
+export { default as FPScontrol } from "./lib/FPScontrol";
+export { default as PlaneText } from "./lib/PlaneText";
+export { default as SpriteText } from "three-spritetext";
+export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
+export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
+export { default as Text3D } from "./lib/Text3D/Text3D";
+export type { Text3DProps } from "./lib/Text3D/Text3D";

package/lib/{keyContorls.ts → keyContorls.js}

@@ -1,15 +1,12 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2022-03-20 14:48:33 
+ * @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 { Event, EventDispatcher, Vector3 } from "three";
+import { EventDispatcher, Vector3 } from "three";
 import { generateUUID } from "three/src/math/MathUtils";
-
-
 /**
  * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
  *
@@ -17,57 +14,44 @@ import { generateUUID } from "three/src/math/MathUtils";
  * @extends {EventDispatcher}
  */
 class KeyContorls extends EventDispatcher {
-
     constructor() {
         super();
         this.addEvent();
     }
-
     uuid = generateUUID();
-
     direction = new Vector3(0, 0, 0);
-
     // 添加事件需要由外部实现
-    add(e: any) {
+    add(e) {
         this.dispatchEvent({ ...e, type: "add" });
     }
-
     // 删除事件
-    delete(e: any) {
+    delete(e) {
         this.dispatchEvent({ ...e, type: "delete" });
     }
-
     // 回车按钮
-    enter(e: any) {
+    enter(e) {
         this.dispatchEvent({ ...e, type: "enter" });
     }
-
-    keyDown = (e: any) => {
-
+    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;
@@ -80,48 +64,35 @@ class KeyContorls extends EventDispatcher {
             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
         });
-
-    }
-
-    _listeners?: { [key: string]: Array<any> };
-
+    };
+    _listeners;
     // 节流 删除事件监听
-    removeEvent = throttle((type: string) => {
+    removeEvent = throttle((type) => {
         this._listeners = undefined;
     }, 1000, { trailing: false });
-
-    addEventListener(type: string, listener: (event: Event) => void): void {
+    addEventListener(type, listener) {
         this.removeEvent(type);
         super.addEventListener(type, listener);
     }
-
     addEvent() {
         document.addEventListener("keydown", this.keyDown);
     }
-
     dispose() {
         document.removeEventListener("keydown", this.keyDown);
     }
-
 }
-
 const keyContorls = new KeyContorls();
-
 export default keyContorls;

package/lib/lib/ApngTexture.d.ts

@@ -0,0 +1,13 @@
+import { APNG } from "apng-js";
+import Player from "apng-js/types/library/player";
+import { CanvasTexture } from "three";
+export default class ApngTexture extends CanvasTexture {
+    constructor(url: string);
+    static TimeTemp: number;
+    preUpdate: number;
+    player?: Player;
+    apng?: APNG;
+    onUpdate: () => void;
+    getUuid(): number | "";
+    loadApng(url: string): Promise<void>;
+}

package/lib/lib/ApngTextureManage.d.ts

@@ -0,0 +1,18 @@
+import { Texture, TextureLoader } from "three";
+/**
+ * apng 纹理管理对象
+ */
+declare class apngTextureManage {
+    constructor();
+    static TextureLoader: TextureLoader;
+    static isInit: boolean;
+    static TimeTemp: number;
+    playTimes: Map<any, any>;
+    anpgTextList: {
+        [key: string]: Texture[];
+    };
+    getTexture(path: string): Texture;
+    loadApng(url: string): Promise<void>;
+}
+declare const ApngTextureManage: apngTextureManage;
+export default ApngTextureManage;

package/lib/lib/EventMesh.d.ts

@@ -0,0 +1,18 @@
+import { BoxGeometry, BufferGeometry, CylinderGeometry, Material, Mesh, MeshNormalMaterial } from "three";
+export declare enum CollisionShaere {
+    cube = "cube",
+    cylinder = "cylinder"
+}
+/**
+ * 碰撞检测用的模型
+ */
+export default class EventMesh extends Mesh<BufferGeometry, Material> {
+    constructor(type?: CollisionShaere);
+    static type: typeof CollisionShaere;
+    static material: MeshNormalMaterial;
+    renderOrder: number;
+    static cubeGeo: BoxGeometry;
+    static cylinderGeo: CylinderGeometry;
+    isEventMesh: boolean;
+    setType(type: CollisionShaere): void;
+}

package/lib/lib/ExtrudeMesh.d.ts

@@ -0,0 +1,111 @@
+import { BufferGeometry, Material, Matrix4, Mesh, Vector2, Vector3 } from "three";
+export type ExtrudePath = {
+    vector3: [number, number, number];
+    radius: number;
+    segments: number;
+    scale: {
+        x: number;
+        y: number;
+    };
+    name: string;
+};
+export interface ExtrudeMeshProps {
+    paths: Array<ExtrudePath>;
+    shapePath: Array<[number, number]>;
+    closed: boolean;
+}
+/**
+ * 挤出模型
+ * 此组件适合自动生成 公路 河流山川等 2d 平面上的模型
+ *
+ * @export
+ * @class ExtrudeMesh
+ * @extends {Mesh<BufferGeometry, Material>}
+ */
+export default class ExtrudeMesh extends Mesh<BufferGeometry, Material> {
+    static temp1Vector2: Vector2;
+    static temp2Vector2: Vector2;
+    static temp3Vector2: Vector2;
+    static tempVector3: Vector3;
+    static temp1Vector3: Vector3;
+    static temp2Vector3: Vector3;
+    static temp3Vector3: Vector3;
+    static temp1Matrix4: Matrix4;
+    static temp2Matrix4: Matrix4;
+    static temp3Matrix4: Matrix4;
+    constructor(props: ExtrudeMeshProps, material?: Material);
+    pointerWidthRadius: Array<{
+        vector3: [number, number, number];
+        matrix: [
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number,
+            number
+        ];
+    }>;
+    computerMatrix(vector1: [number, number, number], vector2: [number, number, number], scale: [number, number, number]): import("three").Matrix4Tuple;
+    /**
+     * @计算渐变值 computerGradient([3,2,4], 0.3);
+     * @渐变区间 values:number[]
+     * @百分比 percentage:number
+     */
+    computerGradient(values: number[], percentage: number): number;
+    computerPointerWidthRadius(paths: Array<ExtrudePath>, closed: boolean): void;
+    computerPathLength(points: [number, number, number][]): number;
+    setExtrudeMesh(startP: [number, number, number], // 起点位置
+    startMatrix4: [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number
+    ], // 起点位置的矩阵
+    endP: [number, number, number], // 终点位置
+    endMatrix4: [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number
+    ], // 终点位置的矩阵
+    uvx: number, // uv.x 的起始位置
+    shapePath: Array<[number, number]>): {
+        geometryPoint: number[];
+        uvPoint: number[];
+    };
+    updateGeometry(props: ExtrudeMeshProps): void;
+}

package/lib/lib/FPScontrol.d.ts

@@ -0,0 +1,44 @@
+import { Camera, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Capsule } from "three/examples/jsm/math/Capsule";
+import { Octree } from "three/examples/jsm/math/Octree";
+/**
+ * 第一人称控制器
+ *
+ * @export
+ * @class FPScontrol
+ * @extends {EventDispatcher}
+ */
+export default class FPScontrol extends EventDispatcher {
+    canvas: HTMLCanvasElement;
+    constructor(camera: Camera, canvas: HTMLCanvasElement);
+    enable: boolean;
+    GRAVITY: number;
+    STEPS_PER_FRAME: number;
+    camera: Camera;
+    worldOctree: Octree;
+    playerCollider: Capsule;
+    clock: Clock;
+    playerVelocity: Vector3;
+    playerDirection: Vector3;
+    playerOnFloor: boolean;
+    mouseTime: number;
+    isMousedown: boolean;
+    keyStates: {
+        [key: string]: boolean;
+    };
+    init(canvas: HTMLCanvasElement): void;
+    keydown: (event: KeyboardEvent) => void;
+    keyup: (event: KeyboardEvent) => void;
+    mousedown: () => void;
+    mouseup: () => void;
+    mousemove: (event: MouseEvent) => void;
+    fromGraphNode(object3d: Object3D): void;
+    getForwardVector: () => Vector3;
+    getSideVector: () => Vector3;
+    controls: (deltaTime: number) => void;
+    updatePlayer: (deltaTime: number) => void;
+    playerCollisions(): void;
+    teleportPlayerIfOob: () => void;
+    update(): void;
+    disposer(): void;
+}

package/lib/lib/InstancedGroupMesh.d.ts

@@ -0,0 +1,10 @@
+import * as THREE from 'three';
+export default class InstancedGroupMesh extends THREE.Mesh {
+    isInstancedGroupMesh: boolean;
+    count: number;
+    meshCollect: Record<string, THREE.Mesh[]>;
+    instanceCollect: Record<string, THREE.InstancedMesh>;
+    static matrix: THREE.Matrix4;
+    constructor(group: THREE.Group, count: number);
+    setMatrixAt(index: number, matrix: THREE.Matrix4): void;
+}

package/lib/lib/KeyFrameAnimation.d.ts

@@ -0,0 +1,25 @@
+import { Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
+export type Keyframe = {
+    position: Vector3;
+    scale: Vector3;
+    rotation: Euler;
+    timeTemp: number;
+};
+export type KeyframeAnimationProps = {
+    speedScale?: number;
+    object3d: Object3D;
+    keyframes: Array<Keyframe>;
+};
+export default class KeyframeAnimation extends Object3D {
+    constructor(props: KeyframeAnimationProps);
+    speedScale: number;
+    object3d: Object3D;
+    halperLine: Line<any, LineBasicMaterial>;
+    keyframes: Array<Keyframe>;
+    setObject3D(object3d: Object3D): void;
+    getKeyframe(i: number): Keyframe;
+    setKeyframe(i: number, keyframe: Keyframe): void;
+    setKeyframes(keyframes: Array<Keyframe>): void;
+    update(): void;
+    updateMatrix(): void;
+}