three-base 2.0.1 → 2.0.2

package/SpriteText2.ts

@@ -0,0 +1,236 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-04-24 15:31:02 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-24 16:18:47
+ */
+
+
+import { Intersection, LinearFilter, Raycaster, Sprite, SpriteMaterial, Texture } from 'three';
+
+// 带箭头的精灵文字
+export default class SpriteText2 extends Sprite {
+    constructor(text = '', textHeight = 10, color: `rgb(${string})` | `rgba(${string})` | `#${string}` = 'rgba(255, 255, 255, 1)') {
+        super();
+
+        this._text = `${text}`;
+        this._textHeight = textHeight;
+        this._color = color;
+        this._backgroundColor = false; // no background color
+
+        this._padding = 0;
+        this._borderWidth = 0;
+        this._borderRadius = 0;
+        this._borderColor = 'white';
+
+        this._strokeWidth = 0;
+        this._strokeColor = 'white';
+
+        this._fontFace = 'Arial';
+        this._fontSize = 90; // defines text resolution
+        this._fontWeight = 'normal';
+
+        this._genCanvas();
+    }
+
+    _text = "";
+    _textHeight = 0;
+    _color: `rgb(${string})` | `rgba(${string})` | `#${string}` = "#ffffff";
+    _backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false = false; // no background color
+
+    _padding = 0;
+    _borderWidth = 0;
+    _borderRadius = 0;
+    _borderColor = 'white';
+
+    _strokeWidth = 0;
+    _strokeColor = 'white';
+
+    _fontFace = 'Arial';
+    _fontSize = 90; // defines text resolution
+    _fontWeight = 'normal';
+    _canvas = document.createElement('canvas');
+
+    get text() { return this._text; }
+    set text(text) { this._text = text; this._genCanvas(); }
+    get textHeight() { return this._textHeight; }
+    set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
+    get color() { return this._color; }
+    set color(color) { this._color = color; this._genCanvas(); }
+    get backgroundColor() { return this._backgroundColor; }
+    set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
+    get padding() { return this._padding; }
+    set padding(padding) { this._padding = padding; this._genCanvas(); }
+    get borderWidth() { return this._borderWidth; }
+    set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
+    get borderRadius() { return this._borderRadius; }
+    set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
+    get borderColor() { return this._borderColor; }
+    set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
+    get fontFace() { return this._fontFace; }
+    set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
+    get fontSize() { return this._fontSize; }
+    set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
+    get fontWeight() { return this._fontWeight; }
+    set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
+    get strokeWidth() { return this._strokeWidth; }
+    set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
+    get strokeColor() { return this._strokeColor; }
+    set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
+
+    _genCanvas() {
+        const canvas = this._canvas;
+        const ctx = canvas.getContext('2d')!;
+
+        const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+        const relBorder: number[] = border.map(b => b * this.fontSize * 0.1); // border in canvas units
+
+        const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+        const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
+
+        const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+        const relPadding = padding.map(p => p * this.fontSize * 0.1); // padding in canvas units
+
+        const lines = this.text.split('\n');
+        const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
+
+        ctx.font = font; // measure canvas with appropriate font
+        const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
+        const innerHeight = this.fontSize * lines.length;
+        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+        canvas.height = (innerHeight + relBorder[1] * 2 + relPadding[1] * 2) * 2 + 40;
+
+        // paint border
+        if (this.borderWidth) {
+            ctx.strokeStyle = this.borderColor;
+
+            if (relBorder[0]) { // left + right borders
+                const hb = relBorder[0] / 2;
+                ctx.lineWidth = relBorder[0];
+                ctx.beginPath();
+                ctx.moveTo(hb, relBorderRadius[0]);
+                ctx.lineTo(hb, ((canvas.height - 40) / 2) - relBorderRadius[3]);
+                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+                ctx.lineTo(canvas.width - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.stroke();
+            }
+
+            if (relBorder[1]) { // top + bottom borders
+                const hb = relBorder[1] / 2;
+                ctx.lineWidth = relBorder[1];
+                ctx.beginPath();
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), ((canvas.height - 40) / 2) - hb);
+
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - hb);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - hb);
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - hb);
+
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), ((canvas.height - 40) / 2) - hb);
+                ctx.stroke();
+            }
+
+            if (this.borderRadius) { // strike rounded corners
+                const cornerWidth = Math.max(...relBorder);
+                const hb = cornerWidth / 2;
+                ctx.lineWidth = cornerWidth;
+                ctx.beginPath();
+                ([
+                    !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
+                    !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
+                    !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
+                ].filter(d => d) as [number, number, number, number][]).forEach(([x0, x1, y0, y1]) => {
+                    ctx.moveTo(x0, y0);
+                    ctx.quadraticCurveTo(x1, y0, x1, y1);
+                });
+                ctx.stroke();
+            }
+        }
+
+        // paint background
+        if (this.backgroundColor) {
+            ctx.fillStyle = this.backgroundColor;
+            if (!this.borderRadius) {
+                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, ((canvas.height - 40) / 2) - relBorder[1] * 2);
+            } else { // fill with rounded corners
+                ctx.beginPath();
+                ctx.moveTo(relBorder[0], relBorderRadius[0]);
+
+                ctx.quadraticCurveTo(relBorder[0], relBorder[1], relBorderRadius[0], relBorder[1]);
+                ctx.lineTo(canvas.width - relBorderRadius[1], relBorder[1]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], relBorder[1], canvas.width - relBorder[0], relBorderRadius[1]);
+                ctx.lineTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], canvas.width - relBorderRadius[2], ((canvas.height - 40) / 2) - relBorder[1]);
+
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - relBorder[1]);
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - relBorder[1]);
+
+                ctx.lineTo(relBorderRadius[3], ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.quadraticCurveTo(relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[3]);
+
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+
+        ctx.translate(relBorder[0], relBorder[1]);
+        ctx.translate(relPadding[0], relPadding[0]);
+
+        // paint text
+        ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+        ctx.fillStyle = this.color;
+        ctx.textBaseline = 'bottom';
+
+        const drawTextStroke = this.strokeWidth > 0;
+        if (drawTextStroke) {
+            ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+            ctx.strokeStyle = this.strokeColor;
+        }
+
+        lines.forEach((line, index) => {
+            const lineX = (innerWidth - ctx.measureText(line).width) / 2;
+            const lineY = (index + 1) * this.fontSize;
+
+            drawTextStroke && ctx.strokeText(line, lineX, lineY);
+            ctx.fillText(line, lineX, lineY);
+        });
+
+        // Inject canvas into sprite
+        if (this.material.map) this.material.map.dispose(); // gc previous texture
+        const texture = this.material.map = new Texture(canvas);
+        texture.minFilter = LinearFilter;
+        texture.needsUpdate = true;
+
+        const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+        this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+
+    //鼠标拾取计算
+    raycast(raycaster: Raycaster, intersects: Intersection[]) {
+
+        let intersect: Intersection[] = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv!.y > 0.55)) {
+            intersects.push(inte);
+        }
+
+    }
+
+    copy(source: SpriteText2) {
+        this.color = source.color;
+        this.backgroundColor = source.backgroundColor;
+        this.padding = source.padding;
+        this.borderWidth = source.borderWidth;
+        this.borderColor = source.borderColor;
+        this.fontFace = source.fontFace;
+        this.fontSize = source.fontSize;
+        this.fontWeight = source.fontWeight;
+        this.strokeWidth = source.strokeWidth;
+        this.strokeColor = source.strokeColor;
+        return this;
+    }
+}

package/Text3D/Text3D.d.ts

@@ -0,0 +1,20 @@
+import { Mesh, MeshStandardMaterial } from "three";
+export type Text3DProps = {
+    text?: string;
+    fontType?: string;
+    size?: number | undefined;
+    height?: 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;
+    _config: Text3DProps;
+    setText(text3DProps: Text3DProps): void;
+}

package/Text3D/Text3D.js

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

@@ -0,0 +1,59 @@
+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;

package/Text3D/fontController.js

@@ -0,0 +1,200 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2021-04-15 00:34:44
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-06-08 14:33:45
+ */
+import Dexie from "dexie";
+import { filter, first, isEmpty } from "lodash";
+import { Font } from "three/examples/jsm/loaders/FontLoader.js";
+import threeUtils from "../threeUtils";
+import gentilisJSON from "./gentilis.json";
+class indexBD extends Dexie {
+    constructor(dbName) {
+        super(dbName);
+    }
+    threeFont;
+}
+// 字体加载器
+class fontContorl {
+    constructor() { }
+    THREEFontMap = new Map();
+    // 专门存储字体的数据库
+    fontBD = (() => {
+        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 fontContorl
+     */
+    async saveFont({ fontType = "simhei", fontName, fontJson = "" }) {
+        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 fontContorl
+     */
+    async getFont({ fontType = "simhei", fontName }) {
+        let fondResult = await this.fontBD.threeFont
+            .filter(d => (d.fontType === fontType && d.fontName === fontName))
+            .toArray();
+        if (isEmpty(fondResult)) {
+            return undefined;
+        }
+        else {
+            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);
+            if (callback && fontFamily) {
+                callback(fontFamily);
+            }
+        };
+        // 遍历文本
+        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,
+                "resolution": 1000,
+                "original_font_information": {},
+                "familyName": "Source Han Sans CN Normal",
+                "descender": -167,
+                "cssFontWeight": "normal",
+                "cssFontStyle": "normal",
+                "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 });
+            }
+        }
+    }
+    // 加载外部字体.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, {
+                    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);
+            // 创建 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
+                glyphs: fontFamily.data.glyphs
+            };
+        }
+    }
+}
+const fontContorller = new fontContorl();
+Object.assign(window, { fontContorller });
+export default fontContorller;