three-base 1.129.1 → 1.129.4

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.d.ts

@@ -0,0 +1,25 @@
+import { Event, EventDispatcher, Vector3 } from "three";
+/**
+ * 键盘 使用 ↑↓←→ 控制 x z 方向, 小键盘 1 0 控制 y 方向
+ *
+ * @class KeyContorls
+ * @extends {EventDispatcher}
+ */
+declare class KeyContorls extends EventDispatcher {
+    constructor();
+    uuid: string;
+    direction: Vector3;
+    add(e: any): void;
+    delete(e: any): void;
+    enter(e: any): void;
+    keyDown: (e: any) => void;
+    _listeners?: {
+        [key: string]: Array<any>;
+    };
+    removeEvent: import("lodash").DebouncedFunc<(type: string) => void>;
+    addEventListener(type: string, listener: (event: Event) => void): void;
+    addEvent(): void;
+    dispose(): void;
+}
+declare const keyContorls: KeyContorls;
+export default keyContorls;

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/planeModal1/PlaneModal1.d.ts

@@ -0,0 +1,32 @@
+import { MeshBasicMaterial, Mesh, CanvasTexture, PlaneGeometry } from "three";
+export type PlaneModal1Config = {
+    size?: number;
+    title?: string;
+    titleColor?: string;
+    texts?: Array<{
+        text?: string;
+        color?: string;
+        size?: number;
+    }>;
+};
+export default class PlaneModal1 extends Mesh {
+    constructor(config?: PlaneModal1Config);
+    renderOrder: number;
+    geometry: PlaneGeometry;
+    material: MeshBasicMaterial;
+    static img: HTMLImageElement;
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    texture: CanvasTexture;
+    _config: {
+        size: number;
+        title: string;
+        titleColor: string;
+        texts: Array<{
+            text: string;
+            color: string;
+            size: number;
+        }>;
+    };
+    updata(config: PlaneModal1Config): Promise<void>;
+}

package/lib/planeModal1/{PlaneModal1.ts → PlaneModal1.js}

@@ -1,129 +1,89 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2023-03-09 18:51:11 
+ * @Author: xiaosihan
+ * @Date: 2023-03-09 18:51:11
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-03-09 19:15:35
  */
-
-import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, BufferGeometry, PlaneGeometry } from "three";
+import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, PlaneGeometry } from "three";
 import planeModalPNG from "./planeModal.png";
-
-
-export type PlaneModal1Config = {
-    size?: number,
-    title?: string,
-    titleColor?: string,
-    texts?: Array<{
-        text?: string,
-        color?: string,
-        size?: number
-    }>
-}
-
 // 平面模型弹窗
 export default class PlaneModal1 extends Mesh {
-
-    constructor(config: PlaneModal1Config = {}) {
+    constructor(config = {}) {
         super();
         this.updata(config);
         this.material.map = this.texture;
         this.scale.set(10, 10, 10);
     }
-
+    renderOrder = 99;
     geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
-
     material = new MeshBasicMaterial({
         side: DoubleSide,
-        transparent: true
+        transparent: true,
+        alphaTest: 0.01
     });
-
     // 背景图
     static img = (() => {
         const img = new Image();
         img.src = planeModalPNG;
         return img;
     })();
-
     canvas = (() => {
         const canvas = document.createElement("canvas");
         canvas.width = 660;
         canvas.height = 481;
         return canvas;
     })();
-
-    context = this.canvas.getContext("2d")!;
-
+    context = this.canvas.getContext("2d");
     texture = new CanvasTexture(this.canvas);
-
     // 配置
-    _config: {
-        size: number,
-        title: string,
-        titleColor: string,
-        texts: Array<{
-            text: string,
-            color: string,
-            size: number
-        }>
-    } = {
-            size: 10,
-            title: "PlaneModal1",
-            titleColor: "#ffffff",
-            texts: []
-            // [
-            //     {
-            //         text: "1",
-            //         color: "#ffff00",
-            //         size: 40
-            //     },
-            //     {
-            //         text: "2",
-            //         color: "#ff00ff",
-            //         size: 40
-            //     },
-            // ]
-        }
-
-    async updata(config: PlaneModal1Config) {
-
-        Object.assign(this._config, config)
-
+    _config = {
+        size: 10,
+        title: "PlaneModal1",
+        titleColor: "#ffffff",
+        texts: []
+        // [
+        //     {
+        //         text: "1",
+        //         color: "#ffff00",
+        //         size: 40
+        //     },
+        //     {
+        //         text: "2",
+        //         color: "#ff00ff",
+        //         size: 40
+        //     },
+        // ]
+    };
+    async updata(config) {
+        Object.assign(this._config, config);
         //绘制背景
         this.context.clearRect(0, 0, 660, 481);
-
         while (!PlaneModal1.img.complete) {
             await new Promise(resolve => setTimeout(resolve, 100));
         }
-
         // 设置大小
         this.scale.set(this._config.size, this._config.size, this._config.size);
-
         // this.context.fillStyle = "#00000088";
         // this.context.fillRect(0, 0, 660, 481);
-
         //绘制背景
         this.context.drawImage(PlaneModal1.img, 0, 0);
-
         // 绘制标题
         this.context.fillStyle = this._config.titleColor;
-        this.context.font = '40px serif';// 设置字体大小
+        this.context.font = '40px serif'; // 设置字体大小
         this.context.textAlign = "left";
         this.context.textBaseline = "top";
         this.context.fillText(this._config.title, 60, 72);
-
         let textPos = new Vector2(60, 150);
         let maxWidth = 530;
         // 绘制内容
         this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
             this.context.fillStyle = color;
-            this.context.font = `${size}px serif`;// 设置字体大小
+            this.context.font = `${size}px serif`; // 设置字体大小
             this.context.textAlign = "left";
             this.context.textBaseline = "top";
-
             // 字符分隔为数组
             var arrText = text.split('');
             var line = '';
-
             for (var n = 0; n < arrText.length; n++) {
                 var metrics = this.context.measureText(line + arrText[n]);
                 var testWidth = metrics.width;
@@ -131,18 +91,14 @@ export default class PlaneModal1 extends Mesh {
                     this.context.fillText(line, textPos.x, textPos.y);
                     line = "";
                     textPos.y += size;
-                } else {
+                }
+                else {
                     line += arrText[n];
                 }
             }
-
             this.context.fillText(line, textPos.x, textPos.y);
             textPos.y += size;
         });
-
         this.texture.needsUpdate = true;
-
     }
-
-
-}
+}