three-base 2.0.134 → 2.0.142

package/SpriteModal1/SpriteModal1.js

@@ -1,110 +1,116 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-03-08 00:01:34
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-08 02:05:25
- */
-import { Sprite, Vector2 } from "three";
-import spriteModal1PNG from "./spriteModal1.png";
-import threeLoader from "../threeLoader";
-// sprit弹窗1
-export default class SpritModal1 extends Sprite {
-    constructor(config = {}) {
-        super();
-        this.updata(config);
-        this.material.map = this.texture;
-        this.material.transparent = true;
-        this.material.alphaTest = 0.01;
-    }
-    // 背景图
-    static img = (() => {
-        const img = new Image();
-        img.src = spriteModal1PNG;
-        return img;
-    })();
-    canvas = (() => {
-        const canvas = document.createElement("canvas");
-        canvas.width = 1024;
-        canvas.height = 1024;
-        return canvas;
-    })();
-    context = this.canvas.getContext("2d");
-    texture = threeLoader.getTexture(this.canvas);
-    // 配置
-    _config = {
-        size: 10,
-        title: "SpritModal1",
-        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, 1024, 1024);
-        while (!SpritModal1.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, 1024, 1024);
-        //绘制背景
-        this.context.drawImage(SpritModal1.img, 186, 0);
-        // 绘制标题
-        this.context.fillStyle = this._config.titleColor;
-        this.context.font = '40px serif'; // 设置字体大小
-        this.context.textAlign = "left";
-        this.context.textBaseline = "top";
-        this.context.fillText(this._config.title, 250, 72);
-        let textPos = new Vector2(250, 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.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;
-                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
-                    this.context.fillText(line, textPos.x, textPos.y);
-                    line = "";
-                    textPos.y += size;
-                }
-                else {
-                    line += arrText[n];
-                }
-            }
-            this.context.fillText(line, textPos.x, textPos.y);
-            textPos.y += size;
-        });
-        this.texture.needsUpdate = true;
-        this.dispatchEvent({ type: "loaded" });
-    }
-    //鼠标拾取计算
-    raycast(raycaster, intersects) {
-        let intersect = [];
-        super.raycast(raycaster, intersect);
-        let inte = intersect[0];
-        if (inte && (inte.uv.x > 0.22 && inte.uv.x < 0.78) && (inte.uv.y > 0.54 && inte.uv.y < 0.94)) {
-            intersects.push(inte);
-        }
-    }
-}
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-08 00:01:34
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-08 02:05:25
+ */
+import { Sprite, Vector2 } from "three";
+import spriteModal1PNG from "./spriteModal1.png";
+import threeLoader from "../threeLoader";
+import { dispatchCustomEvent } from "../EventMap";
+// sprit弹窗1
+export default class SpritModal1 extends Sprite {
+    constructor(config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        this.material.transparent = true;
+        this.material.alphaTest = 0.01;
+    }
+    // dispatchEvent 已从 Sprite 继承，不需要重写
+    // 背景图
+    static img = (() => {
+        const img = new Image();
+        img.src = spriteModal1PNG;
+        return img;
+    })();
+    canvas = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1024;
+        canvas.height = 1024;
+        return canvas;
+    })();
+    context = this.canvas.getContext("2d");
+    texture = threeLoader.getTexture(this.canvas);
+    // 配置
+    _config = {
+        size: 10,
+        title: "SpritModal1",
+        titleColor: "#ffffff",
+        texts: []
+        // [
+        //     {
+        //         text: "1",
+        //         color: "#ffff00",
+        //         size: 40
+        //     },
+        //     {
+        //         text: "2",
+        //         color: "#ff00ff",
+        //         size: 40
+        //     },
+        // ]
+    };
+    async updata(config) {
+        Object.assign(this._config, config);
+        //绘制背景
+        if (!this.context)
+            return;
+        this.context.clearRect(0, 0, 1024, 1024);
+        while (!SpritModal1.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, 1024, 1024);
+        //绘制背景
+        this.context.drawImage(SpritModal1.img, 186, 0);
+        // 绘制标题
+        this.context.fillStyle = this._config.titleColor;
+        this.context.font = '40px serif'; // 设置字体大小
+        this.context.textAlign = "left";
+        this.context.textBaseline = "top";
+        this.context.fillText(this._config.title, 250, 72);
+        let textPos = new Vector2(250, 150);
+        let maxWidth = 530;
+        // 绘制内容
+        this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
+            if (!this.context)
+                return;
+            this.context.fillStyle = color;
+            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;
+                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
+                    this.context.fillText(line, textPos.x, textPos.y);
+                    line = "";
+                    textPos.y += size;
+                }
+                else {
+                    line += arrText[n];
+                }
+            }
+            this.context.fillText(line, textPos.x, textPos.y);
+            textPos.y += size;
+        });
+        this.texture.needsUpdate = true;
+        dispatchCustomEvent(this, { type: "loaded" });
+    }
+    //鼠标拾取计算
+    raycast(raycaster, intersects) {
+        let intersect = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && inte.uv && (inte.uv.x > 0.22 && inte.uv.x < 0.78) && (inte.uv.y > 0.54 && inte.uv.y < 0.94)) {
+            intersects.push(inte);
+        }
+    }
+}

package/SpriteModal1/SpriteModal1.ts

@@ -0,0 +1,146 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-08 00:01:34
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-08 02:05:25
+ */
+import { Sprite, Vector2, Texture, Raycaster, Intersection } from "three";
+import spriteModal1PNG from "./spriteModal1.png";
+import threeLoader from "../threeLoader";
+import { dispatchCustomEvent } from "../EventMap";
+
+export type SpritModal1Config = {
+    size?: number;
+    title?: string;
+    titleColor?: string;
+    texts?: Array<{
+        text?: string;
+        color?: string;
+        size?: number;
+    }>;
+};
+
+type TextItem = {
+    text: string;
+    color: string;
+    size: number;
+};
+
+type ConfigType = {
+    size: number;
+    title: string;
+    titleColor: string;
+    texts: TextItem[];
+};
+
+// sprit弹窗1
+export default class SpritModal1 extends Sprite {
+    constructor(config: SpritModal1Config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        this.material.transparent = true;
+        this.material.alphaTest = 0.01;
+    }
+
+    // dispatchEvent 已从 Sprite 继承，不需要重写
+
+    // 背景图
+    static img: HTMLImageElement = (() => {
+        const img = new Image();
+        img.src = spriteModal1PNG;
+        return img;
+    })();
+
+    canvas: HTMLCanvasElement = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1024;
+        canvas.height = 1024;
+        return canvas;
+    })();
+
+    context: CanvasRenderingContext2D | null = this.canvas.getContext("2d");
+    texture: Texture = threeLoader.getTexture(this.canvas);
+
+    // 配置
+    _config: ConfigType = {
+        size: 10,
+        title: "SpritModal1",
+        titleColor: "#ffffff",
+        texts: []
+        // [
+        //     {
+        //         text: "1",
+        //         color: "#ffff00",
+        //         size: 40
+        //     },
+        //     {
+        //         text: "2",
+        //         color: "#ff00ff",
+        //         size: 40
+        //     },
+        // ]
+    };
+
+    async updata(config: SpritModal1Config): Promise<void> {
+        Object.assign(this._config, config);
+        //绘制背景
+        if (!this.context) return;
+        this.context.clearRect(0, 0, 1024, 1024);
+        while (!SpritModal1.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, 1024, 1024);
+        //绘制背景
+        this.context.drawImage(SpritModal1.img, 186, 0);
+        // 绘制标题
+        this.context.fillStyle = this._config.titleColor;
+        this.context.font = '40px serif'; // 设置字体大小
+        this.context.textAlign = "left";
+        this.context.textBaseline = "top";
+        this.context.fillText(this._config.title, 250, 72);
+        let textPos = new Vector2(250, 150);
+        let maxWidth = 530;
+        // 绘制内容
+        this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
+            if (!this.context) return;
+            this.context.fillStyle = color;
+            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;
+                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
+                    this.context.fillText(line, textPos.x, textPos.y);
+                    line = "";
+                    textPos.y += size;
+                }
+                else {
+                    line += arrText[n];
+                }
+            }
+            this.context.fillText(line, textPos.x, textPos.y);
+            textPos.y += size;
+        });
+        this.texture.needsUpdate = true;
+        dispatchCustomEvent(this, { type: "loaded" });
+    }
+
+    //鼠标拾取计算
+    raycast(raycaster: Raycaster, intersects: Intersection[]): void {
+        let intersect: Intersection[] = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && inte.uv && (inte.uv.x > 0.22 && inte.uv.x < 0.78) && (inte.uv.y > 0.54 && inte.uv.y < 0.94)) {
+            intersects.push(inte);
+        }
+    }
+}

package/SpriteModal1/index.d.ts

@@ -1 +1 @@
-export { default } from "./SpriteModal1";
+export { default } from "./SpriteModal1";

package/SpriteModal1/index.js

@@ -1 +1 @@
-export { default } from "./SpriteModal1";
+export { default } from "./SpriteModal1";

package/SpriteModal1/index.ts

@@ -0,0 +1 @@
+export { default } from "./SpriteModal1";

package/SpriteText.d.ts

@@ -1,45 +1,46 @@
-import { Sprite } from "three";
-export default class SpriteText extends Sprite {
-    constructor(text?: string, textHeight?: number, color?: `#${string}` | `rgba(${string})`);
-    _text: string;
-    _textHeight: number;
-    _color: `#${string}` | `rgba(${string})`;
-    _backgroundColor: boolean | `#${string}` | `rgba(${string})`;
-    _padding: number;
-    _borderWidth: number;
-    _borderRadius: number;
-    _borderColor: `#${string}` | `rgba(${string})`;
-    _strokeWidth: number;
-    _strokeColor: `#${string}` | `rgba(${string})`;
-    _fontFace: string;
-    _fontSize: number;
-    _fontWeight: string;
-    _canvas: HTMLCanvasElement;
-    get text(): string;
-    set text(text: string);
-    get textHeight(): number;
-    set textHeight(textHeight: number);
-    get color(): `#${string}` | `rgba(${string})`;
-    set color(color: `#${string}` | `rgba(${string})`);
-    get backgroundColor(): boolean | `#${string}` | `rgba(${string})`;
-    set backgroundColor(color: boolean | `#${string}` | `rgba(${string})`);
-    get padding(): number;
-    set padding(padding: number);
-    get borderWidth(): number;
-    set borderWidth(borderWidth: number);
-    get borderRadius(): number;
-    set borderRadius(borderRadius: number);
-    get borderColor(): `#${string}` | `rgba(${string})`;
-    set borderColor(borderColor: `#${string}` | `rgba(${string})`);
-    get fontFace(): string;
-    set fontFace(fontFace: string);
-    get fontSize(): number;
-    set fontSize(fontSize: number);
-    get fontWeight(): string;
-    set fontWeight(fontWeight: string);
-    get strokeWidth(): number;
-    set strokeWidth(strokeWidth: number);
-    get strokeColor(): `#${string}` | `rgba(${string})`;
-    set strokeColor(strokeColor: `#${string}` | `rgba(${string})`);
-    _genCanvas(): void;
-}
+import { Sprite } from "three";
+import type { ColorString } from "./types";
+export default class SpriteText extends Sprite {
+    constructor(text?: string, textHeight?: number, color?: ColorString);
+    _text: string;
+    _textHeight: number;
+    _color: ColorString;
+    _backgroundColor: boolean | ColorString;
+    _padding: number;
+    _borderWidth: number;
+    _borderRadius: number;
+    _borderColor: ColorString;
+    _strokeWidth: number;
+    _strokeColor: ColorString;
+    _fontFace: string;
+    _fontSize: number;
+    _fontWeight: string;
+    _canvas: HTMLCanvasElement;
+    get text(): string;
+    set text(text: string);
+    get textHeight(): number;
+    set textHeight(textHeight: number);
+    get color(): ColorString;
+    set color(color: ColorString);
+    get backgroundColor(): boolean | ColorString;
+    set backgroundColor(color: boolean | ColorString);
+    get padding(): number;
+    set padding(padding: number);
+    get borderWidth(): number;
+    set borderWidth(borderWidth: number);
+    get borderRadius(): number;
+    set borderRadius(borderRadius: number);
+    get borderColor(): ColorString;
+    set borderColor(borderColor: ColorString);
+    get fontFace(): string;
+    set fontFace(fontFace: string);
+    get fontSize(): number;
+    set fontSize(fontSize: number);
+    get fontWeight(): string;
+    set fontWeight(fontWeight: string);
+    get strokeWidth(): number;
+    set strokeWidth(strokeWidth: number);
+    get strokeColor(): ColorString;
+    set strokeColor(strokeColor: ColorString);
+    _genCanvas(): void;
+}