three-base 2.0.137 → 2.0.145

package/Text3D/Text3D.js

@@ -6,52 +6,48 @@
  */
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
 import { Mesh, MeshStandardMaterial } from "three";
-import fontContorller from "./fontController";
-// 3D文字模型
+import fontController from "./fontController";
 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
+        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, //斜角分段
+        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({
+            fontController.loadText({
                 fontBasePath: Text3D.path,
                 text: this._config.text,
                 fontType: this._config.fontType,
-                callback: THREEFont => {
+                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, //斜角分段
+                        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,13 +1,13 @@
 import Dexie, { Table } from "dexie";
-import { Font } from "three/examples/jsm/loaders/FontLoader.js";
+import { Font } from "three/examples/jsm/loaders/FontLoader";
 export type saveFontParam = {
     fontType?: string;
     fontName: string;
-    fontJson: any;
+    fontJson: Record<string, unknown>;
 };
 export type addFontFamilyParam = {
     fontType?: string;
-    fontFamilyJson: any;
+    fontFamilyJson: Record<string, unknown>;
 };
 export type getFontParam = {
     fontType?: string;
@@ -23,23 +23,23 @@ declare class indexBD extends Dexie {
     constructor(dbName: string);
     threeFont: Table;
 }
-declare class fontContorl {
+declare class fontControl {
     constructor();
     THREEFontMap: Map<string, Font>;
     fontBD: indexBD;
     /**
      * 保存 字体json到本地数据库中
      * @param {saveFontParam} { fontType = "simhei", fontName, fontJson }
-     * @memberof fontContorl
+     * @memberof fontControl
      */
     saveFont({ fontType, fontName, fontJson }: saveFontParam): Promise<void>;
     /**
      * 通过 fontType 和 fontName 查询 fontJson
      * @param {getFontParam} { fontType = "simhei", fontName }
      * @returns
-     * @memberof fontContorl
+     * @memberof fontControl
      */
-    getFont({ fontType, fontName }: getFontParam): Promise<any>;
+    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>;
@@ -55,5 +55,6 @@ declare class fontContorl {
     addFont({ fontType, fontName, fontJson }: saveFontParam): void;
     addFontFamily({ fontType, fontFamilyJson }: addFontFamilyParam): void;
 }
-declare const fontContorller: fontContorl;
-export default fontContorller;
+declare const fontController: fontControl;
+export default fontController;
+export { fontController };

package/Text3D/fontController.js

@@ -6,7 +6,7 @@
  */
 import Dexie from "dexie";
 import { filter, first, isEmpty } from "lodash";
-import { Font } from "three/examples/jsm/loaders/FontLoader.js";
+import { Font } from "three/examples/jsm/loaders/FontLoader";
 import threeUtils from "../threeUtils";
 import gentilisJSON from "./gentilis.json";
 class indexBD extends Dexie {
@@ -15,11 +15,9 @@ class indexBD extends Dexie {
     }
     threeFont;
 }
-// 字体加载器
-class fontContorl {
+class fontControl {
     constructor() { }
     THREEFontMap = new Map();
-    // 专门存储字体的数据库
     fontBD = (() => {
         let fontDB = new indexBD("three-base-font");
         fontDB.version(1).stores({ threeFont: "++KeyPath,fontType,fontName,fontJson" });
@@ -28,9 +26,9 @@ class fontContorl {
     /**
      * 保存 字体json到本地数据库中
      * @param {saveFontParam} { fontType = "simhei", fontName, fontJson }
-     * @memberof fontContorl
+     * @memberof fontControl
      */
-    async saveFont({ fontType = "simhei", fontName, fontJson = "" }) {
+    async saveFont({ fontType = "simhei", fontName, fontJson = {} }) {
         let findResult = await this.getFont({ fontType, fontName });
         if (isEmpty(findResult)) {
             await this.fontBD.threeFont.add({ fontType, fontName, fontJson });
@@ -40,11 +38,11 @@ class fontContorl {
      * 通过 fontType 和 fontName 查询 fontJson
      * @param {getFontParam} { fontType = "simhei", fontName }
      * @returns
-     * @memberof fontContorl
+     * @memberof fontControl
      */
     async getFont({ fontType = "simhei", fontName }) {
         let fondResult = await this.fontBD.threeFont
-            .filter(d => (d.fontType === fontType && d.fontName === fontName))
+            .filter((d) => (d.fontType === fontType && d.fontName === fontName))
             .toArray();
         if (isEmpty(fondResult)) {
             return undefined;
@@ -53,11 +51,8 @@ class fontContorl {
             return first(fondResult).fontJson;
         }
     }
-    // 加载字体的回调函数们
     _loadTextCall = new Map();
-    // 加载文字 提供给需要创建字体模型的方法使用 以节流的形式调用 回调函数
     async loadText({ fontType = "simhei", text = "", fontBasePath, callback }) {
-        // 加载字体容器
         await this._loadFontIndexJson({ fontType, fontBasePath });
         let newCallback = () => {
             let fontFamily = this.THREEFontMap.get(fontType);
@@ -65,34 +60,24 @@ class fontContorl {
                 callback(fontFamily);
             }
         };
-        // 遍历文本
-        filter(text).map(fontName => {
-            // 没有的就去加载
+        filter(text).map((fontName) => {
             if (!this.hasFont({ fontType, fontName })) {
-                // 添加文字的默认模型 避免报错
                 let fontFamily = this.THREEFontMap.get(fontType);
-                // 创建 three 字体对象
                 if (fontFamily) {
-                    //@ts-ignore
                     fontFamily.data.glyphs[fontName] = { "ha": 1389, "x_min": 477, "x_max": 949, "o": "m 700 901 q 906 770 830 906 q 770 477 949 618 q 711 288 711 412 l 613 288 q 781 608 613 494 q 819 722 825 651 q 700 808 808 803 l 684 808 q 581 673 575 803 l 477 673 q 613 884 477 836 q 700 901 629 901 m 732 184 l 732 71 l 591 71 l 591 184 l 732 184 z " };
                 }
                 this._loadFontJson({ fontType, fontName, fontBasePath });
             }
-            // 加入待执行的回调
             let origin_callbacks = this._loadTextCall.get(`${fontType}_${fontName}`) || [];
             if (newCallback) {
                 this._loadTextCall.set(`${fontType}_${fontName}`, [...origin_callbacks, newCallback]);
             }
         });
-        // 执行任务队列
         threeUtils.addWork(newCallback);
     }
-    // 加载字体
     async _loadFontIndexJson({ fontType = "simhei", fontBasePath }) {
         let fontFamily = this.THREEFontMap.get(fontType);
-        // 创建 three 字体对象
         if (!fontFamily) {
-            // 初始字体结构
             fontFamily = new Font({
                 "underlineThickness": 69,
                 "underlinePosition": -174,
@@ -110,23 +95,18 @@ class fontContorl {
                 "glyphs": {}
             });
             this.THREEFontMap.set(fontType, fontFamily);
-            // 读取本地数据库中的字体初始结构文件
             let fontFamilyIndexJson = await this.getFont({ fontType, fontName: "index" });
-            // 加载外部字体初始结构文件
             if (!fontFamilyIndexJson) {
                 this._loadFontJson({ fontType, fontName: "index", fontBasePath });
             }
         }
     }
-    // 加载外部字体.js
     async _loadFontJson({ fontType = "simhei", fontName, fontBasePath }) {
         let fontJson = await this.getFont({ fontType, fontName });
         if (!fontJson) {
             fontJson = gentilisJSON.glyphs[fontName];
         }
-        // 数据库中没有 就去加载字体js
         if (!fontJson) {
-            // 加载字体js 
             await new Promise(resolve => {
                 let script = document.createElement("script");
                 Object.assign(script, {
@@ -144,56 +124,43 @@ class fontContorl {
             });
         }
         else {
-            // 数据库或者默认字体中 有就加入字体文件中
             let fontFamily = this.THREEFontMap.get(fontType);
-            // 创建 three 字体对象
             if (fontFamily) {
-                //@ts-ignore
                 fontFamily.data.glyphs[fontName] = fontJson;
             }
         }
-        // 执行相应的回调函数
         let origin_callbacks = this._loadTextCall.get(`${fontType}_${fontName}`) || [];
-        // // 删除待执行的回调
         this._loadTextCall.delete(`${fontType}_${fontName}`);
         origin_callbacks.map(callback => {
-            // 执行任务队列
             threeUtils.addWork(callback);
         });
     }
-    // 判断是否有这个文字
     hasFont({ fontType, fontName }) {
         return !isEmpty(this.THREEFontMap.get(fontType) &&
-            //@ts-ignore
             this.THREEFontMap.get(fontType).data.glyphs[fontName]);
     }
-    // 这个方法是提供给外部字体文件调用的
     addFont({ fontType = "simhei", fontName, fontJson }) {
-        // 保存字体json到本地数据中
         this.saveFont({ fontType, fontName, fontJson });
         let fontFamily = this.THREEFontMap.get(fontType);
-        // 创建 three 字体对象
         if (fontFamily) {
-            //@ts-ignore
             fontFamily.data.glyphs[fontName] = fontJson;
         }
     }
-    // 这个方法是提供给外部字体文件调用的
     addFontFamily({ fontType = "simhei", fontFamilyJson }) {
-        // 保存字体初始结构到数据库中
         this.saveFont({ fontType, fontName: "index", fontJson: fontFamilyJson });
         let fontFamily = this.THREEFontMap.get(fontType);
-        // 创建 three 字体对象
         if (fontFamily) {
-            //@ts-ignore
-            fontFamily.data = {
-                ...fontFamilyJson,
-                //@ts-ignore
+            fontFamily.data = Object.assign({}, fontFamilyJson, {
                 glyphs: fontFamily.data.glyphs
-            };
+            });
         }
     }
 }
-const fontContorller = new fontContorl();
-Object.assign(window, { fontContorller });
-export default fontContorller;
+const fontController = new fontControl();
+// 将 fontController 实例挂载到 window 上，供浏览器控制台全局访问
+window.fontController = fontController;
+// 兼容旧代码中对 fontContorller (多了一个 l) 的错误拼写引用
+// 保持向后兼容，避免旧示例代码或浏览器控制台输入报错
+window.fontContorller = fontController;
+export default fontController;
+export { fontController };

package/Text3D/fontController.ts

@@ -0,0 +1,209 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2021-04-15 00:34:44
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-08 14:33:45
+ */
+import Dexie, { Table } from "dexie";
+import { filter, first, isEmpty } from "lodash";
+import { Font, FontData } from "three/examples/jsm/loaders/FontLoader";
+import threeUtils from "../threeUtils";
+import gentilisJSON from "./gentilis.json";
+
+// 字体字形数据结构（对齐 three FontLoader 的 FontData.glyphs 元素）
+type FontGlyph = { ha: number; x_min: number; x_max: number; o?: string };
+
+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;
+};
+
+class indexBD extends Dexie {
+    constructor(dbName: string) {
+        super(dbName);
+    }
+    threeFont!: Table;
+}
+
+class fontControl {
+    constructor() { }
+
+    THREEFontMap: Map<string, Font> = new Map();
+
+    fontBD: indexBD = (() => {
+        let fontDB = new indexBD("three-base-font");
+        fontDB.version(1).stores({ threeFont: "++KeyPath,fontType,fontName,fontJson" });
+        return fontDB;
+    })();
+
+    /**
+     * 保存 字体json到本地数据库中
+     * @param {saveFontParam} { fontType = "simhei", fontName, fontJson }
+     * @memberof fontControl
+     */
+    async saveFont({ fontType = "simhei", fontName, fontJson = {} }: saveFontParam): Promise<void> {
+        let findResult = await this.getFont({ fontType, fontName });
+        if (isEmpty(findResult)) {
+            await this.fontBD.threeFont.add({ fontType, fontName, fontJson });
+        }
+    }
+
+    /**
+     * 通过 fontType 和 fontName 查询 fontJson
+     * @param {getFontParam} { fontType = "simhei", fontName }
+     * @returns
+     * @memberof fontControl
+     */
+    async getFont({ fontType = "simhei", fontName }: getFontParam): Promise<Record<string, unknown> | undefined> {
+        let fondResult = await this.fontBD.threeFont
+            .filter((d: { fontType: string; fontName: string }) => (d.fontType === fontType && d.fontName === fontName))
+            .toArray();
+        if (isEmpty(fondResult)) {
+            return undefined;
+        }
+        else {
+            return first(fondResult)!.fontJson;
+        }
+    }
+
+    _loadTextCall: Map<string, Array<() => void>> = new Map();
+
+    async loadText({ fontType = "simhei", text = "", fontBasePath, callback }: loadTextParam): Promise<void> {
+        await this._loadFontIndexJson({ fontType, fontBasePath });
+        let newCallback = () => {
+            let fontFamily = this.THREEFontMap.get(fontType);
+            if (callback && fontFamily) {
+                callback(fontFamily);
+            }
+        };
+        filter(text).map((fontName: string) => {
+            if (!this.hasFont({ fontType, fontName })) {
+                let fontFamily = this.THREEFontMap.get(fontType);
+                if (fontFamily) {
+                    fontFamily.data.glyphs[fontName] = { "ha": 1389, "x_min": 477, "x_max": 949, "o": "m 700 901 q 906 770 830 906 q 770 477 949 618 q 711 288 711 412 l 613 288 q 781 608 613 494 q 819 722 825 651 q 700 808 808 803 l 684 808 q 581 673 575 803 l 477 673 q 613 884 477 836 q 700 901 629 901 m 732 184 l 732 71 l 591 71 l 591 184 l 732 184 z " };
+                }
+                this._loadFontJson({ fontType, fontName, fontBasePath });
+            }
+            let origin_callbacks = this._loadTextCall.get(`${fontType}_${fontName}`) || [];
+            if (newCallback) {
+                this._loadTextCall.set(`${fontType}_${fontName}`, [...origin_callbacks, newCallback]);
+            }
+        });
+        threeUtils.addWork(newCallback);
+    }
+
+    async _loadFontIndexJson({ fontType = "simhei", fontBasePath }: loadTextParam): Promise<void> {
+        let fontFamily = this.THREEFontMap.get(fontType);
+        if (!fontFamily) {
+            fontFamily = new Font({
+                "underlineThickness": 69,
+                "underlinePosition": -174,
+                "resolution": 1000,
+                "original_font_information": {},
+                "familyName": "Source Han Sans CN Normal",
+                "descender": -167,
+                "ascender": 0,
+                "boundingBox": {
+                    "yMin": -700,
+                    "xMin": -1389,
+                    "yMax": 700,
+                    "xMax": 4067
+                },
+                "glyphs": {}
+            });
+            this.THREEFontMap.set(fontType, fontFamily);
+            let fontFamilyIndexJson = await this.getFont({ fontType, fontName: "index" });
+            if (!fontFamilyIndexJson) {
+                this._loadFontJson({ fontType, fontName: "index", fontBasePath });
+            }
+        }
+    }
+
+    async _loadFontJson({ fontType = "simhei", fontName, fontBasePath }: { fontType: string; fontName: string; fontBasePath: string }): Promise<void> {
+        let fontJson = await this.getFont({ fontType, fontName });
+        if (!fontJson) {
+            fontJson = (gentilisJSON as unknown as FontData).glyphs[fontName];
+        }
+        if (!fontJson) {
+                await new Promise<void>(resolve => {
+                let script = document.createElement("script");
+                Object.assign(script, {
+                    type: "text/javascript",
+                    src: `${fontBasePath}${fontType}/${fontName}.js`,
+                    async: true,
+                    onload: () => {
+                        script.remove();
+                        resolve();
+                    },
+                    onerror: () => {
+                    }
+                });
+                document.head.appendChild(script);
+            });
+        }
+        else {
+            let fontFamily = this.THREEFontMap.get(fontType);
+            if (fontFamily) {
+                fontFamily.data.glyphs[fontName] = fontJson as unknown as FontGlyph;
+            }
+        }
+        let origin_callbacks = this._loadTextCall.get(`${fontType}_${fontName}`) || [];
+        this._loadTextCall.delete(`${fontType}_${fontName}`);
+        origin_callbacks.map(callback => {
+            threeUtils.addWork(callback);
+        });
+    }
+
+    hasFont({ fontType, fontName }: { fontType: string; fontName: string }): boolean {
+        return !isEmpty(this.THREEFontMap.get(fontType) &&
+            this.THREEFontMap.get(fontType)!.data.glyphs[fontName]);
+    }
+
+    addFont({ fontType = "simhei", fontName, fontJson }: saveFontParam): void {
+        this.saveFont({ fontType, fontName, fontJson });
+        let fontFamily = this.THREEFontMap.get(fontType);
+        if (fontFamily) {
+            (fontFamily.data as FontData).glyphs[fontName] = fontJson as unknown as FontGlyph;
+        }
+    }
+
+    addFontFamily({ fontType = "simhei", fontFamilyJson }: addFontFamilyParam): void {
+        this.saveFont({ fontType, fontName: "index", fontJson: fontFamilyJson });
+        let fontFamily = this.THREEFontMap.get(fontType);
+        if (fontFamily) {
+            fontFamily.data = Object.assign({}, fontFamilyJson, {
+                glyphs: fontFamily.data.glyphs
+                }) as unknown as FontData;
+        }
+    }
+}
+
+const fontController = new fontControl();
+
+// 将 fontController 实例挂载到 window 上，供浏览器控制台全局访问
+(window as unknown as Record<string, unknown>).fontController = fontController;
+
+// 兼容旧代码中对 fontContorller (多了一个 l) 的错误拼写引用
+// 保持向后兼容，避免旧示例代码或浏览器控制台输入报错
+(window as unknown as Record<string, unknown>).fontContorller = fontController;
+
+export default fontController;
+export { fontController };

package/Text3D/index.ts

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