three-base 2.0.134 → 2.0.142

package/SpriteWithHtml.js

@@ -1,44 +1,44 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-04-15 11:26:32
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-04-15 12:38:09
- */
-import { snapdom } from "@zumer/snapdom";
-import { Texture, Sprite } from "three";
-import threeLoader from "./threeLoader";
-// html 文本面板
-export default class SpriteWithHtml extends Sprite {
-    constructor(html = "", backgroundColor = "#00000000") {
-        super();
-        this.setHtml(html, backgroundColor);
-    }
-    visible = false;
-    div = (() => {
-        const div = document.createElement("div");
-        div.style.position = "fixed";
-        div.style.top = "100%";
-        div.style.left = "100%";
-        div.style.pointerEvents = "none";
-        div.style.userSelect = "none";
-        div.style.lineHeight = "1";
-        div.style.whiteSpace = "nowrap";
-        return div;
-    })();
-    async setHtml(html = "", backgroundColor = "#00000000") {
-        this.div.innerHTML = html;
-        document.body.appendChild(this.div);
-        const img = await snapdom.toPng(this.div, { backgroundColor });
-        this.scale.set(img.naturalWidth, img.naturalHeight, 1);
-        const texture = new Texture(img);
-        texture.needsUpdate = true;
-        this.material.map = texture;
-        this.material.map.anisotropy = threeLoader.anisotropy;
-        this.material.alphaTest = 0.1;
-        this.material.needsUpdate = true;
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        this.visible = true;
-        this.div.remove();
-        this.dispatchEvent({ type: "loaded" });
-    }
-}
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-04-15 11:26:32
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-15 12:38:09
+ */
+import { snapdom } from "@zumer/snapdom";
+import { Texture, Sprite } from "three";
+import threeLoader from "./threeLoader";
+// html 文本面板
+export default class SpriteWithHtml extends Sprite {
+    constructor(html = "", backgroundColor = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
+    }
+    visible = false;
+    div = (() => {
+        const div = document.createElement("div");
+        div.style.position = "fixed";
+        div.style.top = "100%";
+        div.style.left = "100%";
+        div.style.pointerEvents = "none";
+        div.style.userSelect = "none";
+        div.style.lineHeight = "1";
+        div.style.whiteSpace = "nowrap";
+        return div;
+    })();
+    async setHtml(html = "", backgroundColor = "#00000000") {
+        this.div.innerHTML = html;
+        document.body.appendChild(this.div);
+        const img = await snapdom.toPng(this.div, { backgroundColor });
+        this.scale.set(img.naturalWidth, img.naturalHeight, 1);
+        const texture = new Texture(img);
+        texture.needsUpdate = true;
+        this.material.map = texture;
+        this.material.map.anisotropy = threeLoader.anisotropy;
+        this.material.alphaTest = 0.1;
+        this.material.needsUpdate = true;
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        this.visible = true;
+        this.div.remove();
+        this.dispatchEvent({ type: "loaded" });
+    }
+}

package/SpriteWithHtml.ts

@@ -0,0 +1,50 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-04-15 11:26:32
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-15 12:38:09
+ */
+import { snapdom } from "@zumer/snapdom";
+import { Texture, Sprite } from "three";
+import threeLoader from "./threeLoader";
+import type { SpriteWithHtmlEventMap } from "./EventMap";
+
+type HexColorString = `#${string}`;
+
+// html 文本面板
+export default class SpriteWithHtml extends Sprite {
+    constructor(html: string = "", backgroundColor: HexColorString = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
+    }
+
+    visible: boolean = false;
+    div: HTMLDivElement = (() => {
+        const div = document.createElement("div");
+        div.style.position = "fixed";
+        div.style.top = "100%";
+        div.style.left = "100%";
+        div.style.pointerEvents = "none";
+        div.style.userSelect = "none";
+        div.style.lineHeight = "1";
+        div.style.whiteSpace = "nowrap";
+        return div;
+    })();
+
+    async setHtml(html: string = "", backgroundColor: HexColorString = "#00000000"): Promise<void> {
+        this.div.innerHTML = html;
+        document.body.appendChild(this.div);
+        const img = await snapdom.toPng(this.div, { backgroundColor });
+        this.scale.set(img.naturalWidth, img.naturalHeight, 1);
+        const texture = new Texture(img);
+        texture.needsUpdate = true;
+        this.material.map = texture;
+        this.material.map.anisotropy = threeLoader.anisotropy;
+        this.material.alphaTest = 0.1;
+        this.material.needsUpdate = true;
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        this.visible = true;
+        this.div.remove();
+        this.dispatchEvent({ type: "loaded" } as never);
+    }
+}

package/Text3D/Text3D.d.ts

@@ -1,20 +1,20 @@
-import { Mesh, MeshBasicMaterial, MeshLambertMaterial, MeshPhysicalMaterial, MeshStandardMaterial } from "three";
-export type Text3DProps = {
-    text?: string;
-    fontType?: string;
-    size?: number | undefined;
-    depth?: number | undefined;
-    curveSegments?: number | undefined;
-    bevelEnabled?: boolean | undefined;
-    bevelThickness?: number | undefined;
-    bevelSize?: number | undefined;
-    bevelOffset?: number | undefined;
-    bevelSegments?: number | undefined;
-};
-export default class Text3D extends Mesh {
-    constructor(text?: string);
-    static path: string;
-    material: MeshStandardMaterial | MeshBasicMaterial | MeshPhysicalMaterial | MeshLambertMaterial;
-    _config: Text3DProps;
-    setText(text3DProps: Text3DProps): void;
-}
+import { Mesh, MeshBasicMaterial, MeshLambertMaterial, MeshPhysicalMaterial, MeshStandardMaterial } from "three";
+export type Text3DProps = {
+    text?: string;
+    fontType?: string;
+    size?: number | undefined;
+    depth?: number | undefined;
+    curveSegments?: number | undefined;
+    bevelEnabled?: boolean | undefined;
+    bevelThickness?: number | undefined;
+    bevelSize?: number | undefined;
+    bevelOffset?: number | undefined;
+    bevelSegments?: number | undefined;
+};
+export default class Text3D extends Mesh {
+    constructor(text?: string);
+    static path: string;
+    material: MeshStandardMaterial | MeshBasicMaterial | MeshPhysicalMaterial | MeshLambertMaterial;
+    _config: Text3DProps;
+    setText(text3DProps: Text3DProps): void;
+}

package/Text3D/Text3D.js

@@ -1,62 +1,58 @@
-/*
- * @Author: xiaosihan
- * @Date: 2022-06-14 09:48:00
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-04-07 21:52:03
- */
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
-import { Mesh, MeshStandardMaterial } from "three";
-import fontContorller from "./fontController";
-// 3D文字模型
-export default class Text3D extends Mesh {
-    constructor(text = "new Text3D()") {
-        super();
-        this.setText({ text });
-    }
-    // 字体的存储路径 例如 : "http://drm.gitee.io/three-base-font/simhei/字.js"
-    static path = "//www.3dkeshihua.com/three-base-font/";
-    material = new MeshStandardMaterial({
-        metalness: 1, // 金属度，值为0到1
-        roughness: 0.5, // 粗糙度，值为0到1
-    });
-    // 配置
-    _config = {
-        text: "",
-        fontType: "simhei",
-        size: 1,
-        curveSegments: 10,
-        depth: 0.1, // 文字的厚度
-        bevelEnabled: true, // 斜角开启
-        bevelThickness: 0.02, // 斜角厚度
-        bevelSize: 0.015, // 斜角大小
-        bevelOffset: 0, // 斜角偏移
-        bevelSegments: 3, //斜角分段
-    };
-    // 设置文字
-    setText(text3DProps) {
-        if (Object.keys(text3DProps).some(key => text3DProps[key] !== this._config[key])) {
-            Object.assign(this._config, text3DProps);
-            fontContorller.loadText({
-                fontBasePath: Text3D.path,
-                text: this._config.text,
-                fontType: this._config.fontType,
-                callback: THREEFont => {
-                    this.geometry.dispose();
-                    this.geometry = new TextGeometry(this._config.text || "", {
-                        font: THREEFont,
-                        size: this._config.size,
-                        curveSegments: this._config.curveSegments,
-                        depth: this._config.depth, // 文字的厚度
-                        bevelEnabled: this._config.bevelEnabled, // 斜角开启
-                        bevelThickness: this._config.bevelThickness, // 斜角厚度
-                        bevelSize: this._config.bevelSize, // 斜角大小
-                        bevelOffset: this._config.bevelOffset, // 斜角偏移
-                        bevelSegments: this._config.bevelSegments, //斜角分段
-                    });
-                    this.geometry.center();
-                    this.dispatchEvent({ type: "loaded" });
-                }
-            });
-        }
-    }
-}
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-06-14 09:48:00
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-07 21:52:03
+ */
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
+import { Mesh, MeshStandardMaterial } from "three";
+import fontController from "./fontController";
+export default class Text3D extends Mesh {
+    constructor(text = "new Text3D()") {
+        super();
+        this.setText({ text });
+    }
+    static path = "//www.3dkeshihua.com/three-base-font/";
+    material = new MeshStandardMaterial({
+        metalness: 1,
+        roughness: 0.5,
+    });
+    _config = {
+        text: "",
+        fontType: "simhei",
+        size: 1,
+        curveSegments: 10,
+        depth: 0.1,
+        bevelEnabled: true,
+        bevelThickness: 0.02,
+        bevelSize: 0.015,
+        bevelOffset: 0,
+        bevelSegments: 3,
+    };
+    setText(text3DProps) {
+        if (Object.keys(text3DProps).some(key => text3DProps[key] !== this._config[key])) {
+            Object.assign(this._config, text3DProps);
+            fontController.loadText({
+                fontBasePath: Text3D.path,
+                text: this._config.text,
+                fontType: this._config.fontType,
+                callback: (THREEFont) => {
+                    this.geometry.dispose();
+                    this.geometry = new TextGeometry(this._config.text || "", {
+                        font: THREEFont,
+                        size: this._config.size,
+                        curveSegments: this._config.curveSegments,
+                        depth: this._config.depth,
+                        bevelEnabled: this._config.bevelEnabled,
+                        bevelThickness: this._config.bevelThickness,
+                        bevelSize: this._config.bevelSize,
+                        bevelOffset: this._config.bevelOffset,
+                        bevelSegments: this._config.bevelSegments,
+                    });
+                    this.geometry.center();
+                    this.dispatchEvent({ type: "loaded" });
+                }
+            });
+        }
+    }
+}

package/Text3D/Text3D.ts

@@ -0,0 +1,77 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-06-14 09:48:00
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-07 21:52:03
+ */
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
+import { Font } from 'three/examples/jsm/loaders/FontLoader.js';
+import { Mesh, MeshBasicMaterial, MeshLambertMaterial, MeshPhysicalMaterial, MeshStandardMaterial } from "three";
+import fontController from "./fontController";
+
+export type Text3DProps = {
+    text?: string;
+    fontType?: string;
+    size?: number | undefined;
+    depth?: number | undefined;
+    curveSegments?: number | undefined;
+    bevelEnabled?: boolean | undefined;
+    bevelThickness?: number | undefined;
+    bevelSize?: number | undefined;
+    bevelOffset?: number | undefined;
+    bevelSegments?: number | undefined;
+};
+
+export default class Text3D extends Mesh {
+    constructor(text: string = "new Text3D()") {
+        super();
+        this.setText({ text });
+    }
+
+    static path: string = "//www.3dkeshihua.com/three-base-font/";
+
+    material: MeshStandardMaterial | MeshBasicMaterial | MeshPhysicalMaterial | MeshLambertMaterial = new MeshStandardMaterial({
+        metalness: 1,
+        roughness: 0.5,
+    });
+
+    _config: Text3DProps = {
+        text: "",
+        fontType: "simhei",
+        size: 1,
+        curveSegments: 10,
+        depth: 0.1,
+        bevelEnabled: true,
+        bevelThickness: 0.02,
+        bevelSize: 0.015,
+        bevelOffset: 0,
+        bevelSegments: 3,
+    };
+
+    setText(text3DProps: Text3DProps): void {
+        if (Object.keys(text3DProps).some(key => text3DProps[key as keyof Text3DProps] !== this._config[key as keyof Text3DProps])) {
+            Object.assign(this._config, text3DProps);
+            fontController.loadText({
+                fontBasePath: Text3D.path,
+                text: this._config.text,
+                fontType: this._config.fontType,
+                callback: (THREEFont: Font) => {
+                    this.geometry.dispose();
+                    this.geometry = new TextGeometry(this._config.text || "", {
+                        font: THREEFont,
+                        size: this._config.size,
+                        curveSegments: this._config.curveSegments,
+                        depth: this._config.depth,
+                        bevelEnabled: this._config.bevelEnabled,
+                        bevelThickness: this._config.bevelThickness,
+                        bevelSize: this._config.bevelSize,
+                        bevelOffset: this._config.bevelOffset,
+                        bevelSegments: this._config.bevelSegments,
+                    });
+                    this.geometry.center();
+                    this.dispatchEvent({ type: "loaded" } as never);
+                }
+            });
+        }
+    }
+}

package/Text3D/fontController.d.ts

@@ -1,59 +1,60 @@
-import Dexie, { Table } from "dexie";
-import { Font } from "three/examples/jsm/loaders/FontLoader.js";
-export type saveFontParam = {
-    fontType?: string;
-    fontName: string;
-    fontJson: any;
-};
-export type addFontFamilyParam = {
-    fontType?: string;
-    fontFamilyJson: any;
-};
-export type getFontParam = {
-    fontType?: string;
-    fontName: string;
-};
-export type loadTextParam = {
-    fontBasePath: string;
-    fontType?: string;
-    text?: string;
-    callback?: (font: Font) => void;
-};
-declare class indexBD extends Dexie {
-    constructor(dbName: string);
-    threeFont: Table;
-}
-declare class fontContorl {
-    constructor();
-    THREEFontMap: Map<string, Font>;
-    fontBD: indexBD;
-    /**
-     * 保存 字体json到本地数据库中
-     * @param {saveFontParam} { fontType = "simhei", fontName, fontJson }
-     * @memberof fontContorl
-     */
-    saveFont({ fontType, fontName, fontJson }: saveFontParam): Promise<void>;
-    /**
-     * 通过 fontType 和 fontName 查询 fontJson
-     * @param {getFontParam} { fontType = "simhei", fontName }
-     * @returns
-     * @memberof fontContorl
-     */
-    getFont({ fontType, fontName }: getFontParam): Promise<any>;
-    _loadTextCall: Map<string, Array<() => void>>;
-    loadText({ fontType, text, fontBasePath, callback }: loadTextParam): Promise<void>;
-    _loadFontIndexJson({ fontType, fontBasePath }: loadTextParam): Promise<void>;
-    _loadFontJson({ fontType, fontName, fontBasePath }: {
-        fontType: string;
-        fontName: string;
-        fontBasePath: string;
-    }): Promise<void>;
-    hasFont({ fontType, fontName }: {
-        fontType: string;
-        fontName: string;
-    }): boolean;
-    addFont({ fontType, fontName, fontJson }: saveFontParam): void;
-    addFontFamily({ fontType, fontFamilyJson }: addFontFamilyParam): void;
-}
-declare const fontContorller: fontContorl;
-export default fontContorller;
+import Dexie, { Table } from "dexie";
+import { Font } from "three/examples/jsm/loaders/FontLoader";
+export type saveFontParam = {
+    fontType?: string;
+    fontName: string;
+    fontJson: Record<string, unknown>;
+};
+export type addFontFamilyParam = {
+    fontType?: string;
+    fontFamilyJson: Record<string, unknown>;
+};
+export type getFontParam = {
+    fontType?: string;
+    fontName: string;
+};
+export type loadTextParam = {
+    fontBasePath: string;
+    fontType?: string;
+    text?: string;
+    callback?: (font: Font) => void;
+};
+declare class indexBD extends Dexie {
+    constructor(dbName: string);
+    threeFont: Table;
+}
+declare class fontControl {
+    constructor();
+    THREEFontMap: Map<string, Font>;
+    fontBD: indexBD;
+    /**
+     * 保存 字体json到本地数据库中
+     * @param {saveFontParam} { fontType = "simhei", fontName, fontJson }
+     * @memberof fontControl
+     */
+    saveFont({ fontType, fontName, fontJson }: saveFontParam): Promise<void>;
+    /**
+     * 通过 fontType 和 fontName 查询 fontJson
+     * @param {getFontParam} { fontType = "simhei", fontName }
+     * @returns
+     * @memberof fontControl
+     */
+    getFont({ fontType, fontName }: getFontParam): Promise<Record<string, unknown> | undefined>;
+    _loadTextCall: Map<string, Array<() => void>>;
+    loadText({ fontType, text, fontBasePath, callback }: loadTextParam): Promise<void>;
+    _loadFontIndexJson({ fontType, fontBasePath }: loadTextParam): Promise<void>;
+    _loadFontJson({ fontType, fontName, fontBasePath }: {
+        fontType: string;
+        fontName: string;
+        fontBasePath: string;
+    }): Promise<void>;
+    hasFont({ fontType, fontName }: {
+        fontType: string;
+        fontName: string;
+    }): boolean;
+    addFont({ fontType, fontName, fontJson }: saveFontParam): void;
+    addFontFamily({ fontType, fontFamilyJson }: addFontFamilyParam): void;
+}
+declare const fontController: fontControl;
+export default fontController;
+export { fontController };