three-base 2.0.72 → 2.0.74

package/MeshBase.ts

@@ -108,12 +108,23 @@ export default class MeshBase extends Group {
     // 接受阴影
     receiveShadow: boolean = false;
 
+    // promise.resole 队列
+    resoles = [];
     // 等待加载加载完成
-    async awaitLoaded(callback?: Function) {
-        while (!this.loaded) {
-            await new Promise(resolve => setTimeout(resolve, 50));
-        }
-        callback && callback();
+    async awaitLoaded() {
+        await new Promise((resolve, reject) => {
+            if (this.resoles.length === 0) {
+                (async () => {
+                    while (!this.loaded) {
+                        await new Promise(resolve => requestAnimationFrame(resolve));
+                    }
+                    while (this.resoles.length > 0) {
+                        this.resoles.pop()();
+                    }
+                })();
+            }
+            this.resoles.unshift(resolve);
+        });
     }
 
     //遍历模型

package/Mirror.d.ts

@@ -1,25 +1,25 @@
-import { BufferGeometry, Camera, Group, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
-export default class Mirror extends Mesh {
-    constructor(geometry?: BufferGeometry);
-    static geometry: PlaneGeometry;
-    isReflector: boolean;
-    type: string;
-    camera: PerspectiveCamera;
-    reflectorPlane: Plane;
-    normal: Vector3;
-    reflectorWorldPosition: Vector3;
-    cameraWorldPosition: Vector3;
-    rotationMatrix: Matrix4;
-    lookAtPosition: Vector3;
-    clipPlane: Vector4;
-    view: Vector3;
-    target: Vector3;
-    q: Vector4;
-    textureMatrix: Matrix4;
-    virtualCamera: PerspectiveCamera;
-    renderTarget: WebGLRenderTarget<import("three").Texture>;
-    material: ShaderMaterial;
-    onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void;
-    getRenderTarget(): WebGLRenderTarget<import("three").Texture>;
-    dispose(): void;
-}
+import { BufferGeometry, Camera, Group, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
+export default class Mirror extends Mesh {
+    constructor(geometry?: BufferGeometry);
+    static geometry: PlaneGeometry;
+    isReflector: boolean;
+    type: string;
+    camera: PerspectiveCamera;
+    reflectorPlane: Plane;
+    normal: Vector3;
+    reflectorWorldPosition: Vector3;
+    cameraWorldPosition: Vector3;
+    rotationMatrix: Matrix4;
+    lookAtPosition: Vector3;
+    clipPlane: Vector4;
+    view: Vector3;
+    target: Vector3;
+    q: Vector4;
+    textureMatrix: Matrix4;
+    virtualCamera: PerspectiveCamera;
+    renderTarget: WebGLRenderTarget<import("three").Texture>;
+    material: ShaderMaterial;
+    onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void;
+    getRenderTarget(): WebGLRenderTarget<import("three").Texture>;
+    dispose(): void;
+}

package/Mirror.js

@@ -1,51 +1,51 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-08-04 17:17:15
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-01-20 05:33:51
- */
-import { Color, DoubleSide, HalfFloatType, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget } from "three";
-// 镜子模型
-export default class Mirror extends Mesh {
-    constructor(geometry = Mirror.geometry) {
-        super(geometry);
-    }
-    // 正方形网格
-    static geometry = (() => {
-        const geometry = new PlaneGeometry(10, 10, 1, 1);
-        return geometry;
-    })();
-    isReflector = true;
-    type = 'Reflector';
-    camera = new PerspectiveCamera();
-    reflectorPlane = new Plane();
-    normal = new Vector3();
-    reflectorWorldPosition = new Vector3();
-    cameraWorldPosition = new Vector3();
-    rotationMatrix = new Matrix4();
-    lookAtPosition = new Vector3(0, 0, -1);
-    clipPlane = new Vector4();
-    view = new Vector3();
-    target = new Vector3();
-    q = new Vector4();
-    textureMatrix = new Matrix4();
-    virtualCamera = this.camera;
-    renderTarget = new WebGLRenderTarget(2048, 2048, { samples: 0, type: HalfFloatType });
-    material = new ShaderMaterial({
-        uniforms: {
-            'color': {
-                value: new Color("#b6b6b6")
-            },
-            'tDiffuse': {
-                value: this.renderTarget.texture
-            },
-            'textureMatrix': {
-                value: this.textureMatrix
-            },
-            blurAmount: {
-                value: 0.5
-            } // 模糊程度，可以根据需求调整
-        },
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-08-04 17:17:15
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-01-20 05:33:51
+ */
+import { Color, DoubleSide, HalfFloatType, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget } from "three";
+// 镜子模型
+export default class Mirror extends Mesh {
+    constructor(geometry = Mirror.geometry) {
+        super(geometry);
+    }
+    // 正方形网格
+    static geometry = (() => {
+        const geometry = new PlaneGeometry(10, 10, 1, 1);
+        return geometry;
+    })();
+    isReflector = true;
+    type = 'Reflector';
+    camera = new PerspectiveCamera();
+    reflectorPlane = new Plane();
+    normal = new Vector3();
+    reflectorWorldPosition = new Vector3();
+    cameraWorldPosition = new Vector3();
+    rotationMatrix = new Matrix4();
+    lookAtPosition = new Vector3(0, 0, -1);
+    clipPlane = new Vector4();
+    view = new Vector3();
+    target = new Vector3();
+    q = new Vector4();
+    textureMatrix = new Matrix4();
+    virtualCamera = this.camera;
+    renderTarget = new WebGLRenderTarget(2048, 2048, { samples: 0, type: HalfFloatType });
+    material = new ShaderMaterial({
+        uniforms: {
+            'color': {
+                value: new Color("#b6b6b6")
+            },
+            'tDiffuse': {
+                value: this.renderTarget.texture
+            },
+            'textureMatrix': {
+                value: this.textureMatrix
+            },
+            blurAmount: {
+                value: 0.5
+            } // 模糊程度，可以根据需求调整
+        },
         vertexShader: /* glsl */ `
                     uniform mat4 textureMatrix;
                     varying vec4 vUv;
@@ -61,7 +61,7 @@ export default class Mirror extends Mesh {
         
                         #include <logdepthbuf_vertex>
         
-                    }`,
+                    }`,
         fragmentShader: /* glsl */ `
             uniform vec3 color;
             uniform sampler2D tDiffuse;
@@ -104,93 +104,93 @@ export default class Mirror extends Mesh {
 
                 #include <tonemapping_fragment>
                 #include <colorspace_fragment>
-            }`,
-        depthTest: true,
-        depthWrite: true,
-        transparent: true,
-        side: DoubleSide
-    });
-    onBeforeRender = (renderer, scene, camera, geometry, material, group) => {
-        this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
-        this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
-        this.rotationMatrix.extractRotation(this.matrixWorld);
-        this.normal.set(0, 0, 1);
-        this.normal.applyMatrix4(this.rotationMatrix);
-        this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
-        // Avoid rendering when reflector is facing away
-        if (this.view.dot(this.normal) > 0) {
-            this.normal.set(0, 0, -1);
-        }
-        ;
-        this.view.reflect(this.normal).negate();
-        this.view.add(this.reflectorWorldPosition);
-        this.rotationMatrix.extractRotation(camera.matrixWorld);
-        this.lookAtPosition.set(0, 0, -1);
-        this.lookAtPosition.applyMatrix4(this.rotationMatrix);
-        this.lookAtPosition.add(this.cameraWorldPosition);
-        this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
-        this.target.reflect(this.normal).negate();
-        this.target.add(this.reflectorWorldPosition);
-        this.virtualCamera.position.copy(this.view);
-        this.virtualCamera.up.set(0, 1, 0);
-        this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
-        this.virtualCamera.up.reflect(this.normal);
-        this.virtualCamera.lookAt(this.target);
-        this.virtualCamera.far = this.camera.far; // Used in WebGLBackground
-        this.virtualCamera.updateMatrixWorld();
-        this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
-        // Update the texture matrix
-        this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
-        this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
-        this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
-        this.textureMatrix.multiply(this.matrixWorld);
-        // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-        // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-        this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
-        this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
-        this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
-        const projectionMatrix = this.virtualCamera.projectionMatrix;
-        this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-        this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-        this.q.z = -1.0;
-        this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
-        // Calculate the scaled plane vector
-        this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
-        // Replacing the third row of the projection matrix
-        projectionMatrix.elements[2] = this.clipPlane.x;
-        projectionMatrix.elements[6] = this.clipPlane.y;
-        projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - 0.003;
-        projectionMatrix.elements[14] = this.clipPlane.w;
-        // Render
-        this.visible = false;
-        const currentRenderTarget = renderer.getRenderTarget();
-        const currentXrEnabled = renderer.xr.enabled;
-        const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-        renderer.xr.enabled = false; // Avoid camera modification
-        renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-        renderer.setRenderTarget(this.renderTarget);
-        renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
-        if (renderer.autoClear === false)
-            renderer.clear();
-        renderer.render(scene, this.virtualCamera);
-        renderer.xr.enabled = currentXrEnabled;
-        renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-        renderer.setRenderTarget(currentRenderTarget);
-        // Restore viewport
-        //@ts-ignore
-        const viewport = this.camera.viewport;
-        if (viewport !== undefined) {
-            renderer.state.viewport(viewport);
-        }
-        this.visible = true;
-    };
-    getRenderTarget() {
-        return this.renderTarget;
-    }
-    ;
-    dispose() {
-        this.renderTarget.dispose();
-        // this.material.dispose();
-    }
-    ;
-}
+            }`,
+        depthTest: true,
+        depthWrite: true,
+        transparent: true,
+        side: DoubleSide
+    });
+    onBeforeRender = (renderer, scene, camera, geometry, material, group) => {
+        this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
+        this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+        this.rotationMatrix.extractRotation(this.matrixWorld);
+        this.normal.set(0, 0, 1);
+        this.normal.applyMatrix4(this.rotationMatrix);
+        this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
+        // Avoid rendering when reflector is facing away
+        if (this.view.dot(this.normal) > 0) {
+            this.normal.set(0, 0, -1);
+        }
+        ;
+        this.view.reflect(this.normal).negate();
+        this.view.add(this.reflectorWorldPosition);
+        this.rotationMatrix.extractRotation(camera.matrixWorld);
+        this.lookAtPosition.set(0, 0, -1);
+        this.lookAtPosition.applyMatrix4(this.rotationMatrix);
+        this.lookAtPosition.add(this.cameraWorldPosition);
+        this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
+        this.target.reflect(this.normal).negate();
+        this.target.add(this.reflectorWorldPosition);
+        this.virtualCamera.position.copy(this.view);
+        this.virtualCamera.up.set(0, 1, 0);
+        this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
+        this.virtualCamera.up.reflect(this.normal);
+        this.virtualCamera.lookAt(this.target);
+        this.virtualCamera.far = this.camera.far; // Used in WebGLBackground
+        this.virtualCamera.updateMatrixWorld();
+        this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
+        // Update the texture matrix
+        this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+        this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
+        this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
+        this.textureMatrix.multiply(this.matrixWorld);
+        // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+        // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+        this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
+        this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
+        this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
+        const projectionMatrix = this.virtualCamera.projectionMatrix;
+        this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+        this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+        this.q.z = -1.0;
+        this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+        // Calculate the scaled plane vector
+        this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
+        // Replacing the third row of the projection matrix
+        projectionMatrix.elements[2] = this.clipPlane.x;
+        projectionMatrix.elements[6] = this.clipPlane.y;
+        projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - 0.003;
+        projectionMatrix.elements[14] = this.clipPlane.w;
+        // Render
+        this.visible = false;
+        const currentRenderTarget = renderer.getRenderTarget();
+        const currentXrEnabled = renderer.xr.enabled;
+        const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+        renderer.xr.enabled = false; // Avoid camera modification
+        renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
+        renderer.setRenderTarget(this.renderTarget);
+        renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
+        if (renderer.autoClear === false)
+            renderer.clear();
+        renderer.render(scene, this.virtualCamera);
+        renderer.xr.enabled = currentXrEnabled;
+        renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+        renderer.setRenderTarget(currentRenderTarget);
+        // Restore viewport
+        //@ts-ignore
+        const viewport = this.camera.viewport;
+        if (viewport !== undefined) {
+            renderer.state.viewport(viewport);
+        }
+        this.visible = true;
+    };
+    getRenderTarget() {
+        return this.renderTarget;
+    }
+    ;
+    dispose() {
+        this.renderTarget.dispose();
+        // this.material.dispose();
+    }
+    ;
+}

package/PlaneModal1/PlaneModal1.d.ts

@@ -1,31 +1,31 @@
-import { Mesh, MeshBasicMaterial, 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);
-    geometry: PlaneGeometry;
-    material: MeshBasicMaterial;
-    static img: HTMLImageElement;
-    canvas: HTMLCanvasElement;
-    context: CanvasRenderingContext2D;
-    texture: import("three").Texture;
-    _config: {
-        size: number;
-        title: string;
-        titleColor: string;
-        texts: Array<{
-            text: string;
-            color: string;
-            size: number;
-        }>;
-    };
-    updata(config: PlaneModal1Config): Promise<void>;
-}
+import { Mesh, MeshBasicMaterial, 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);
+    geometry: PlaneGeometry;
+    material: MeshBasicMaterial;
+    static img: HTMLImageElement;
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    texture: import("three").Texture;
+    _config: {
+        size: number;
+        title: string;
+        titleColor: string;
+        texts: Array<{
+            text: string;
+            color: string;
+            size: number;
+        }>;
+    };
+    updata(config: PlaneModal1Config): Promise<void>;
+}

package/PlaneModal1/PlaneModal1.js

@@ -1,105 +1,105 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-03-09 18:51:11
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-09 19:15:35
- */
-import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
-import threeLoader from "../threeLoader";
-import planeModalPNG from "./planeModal.png";
-// 平面模型弹窗
-export default class PlaneModal1 extends Mesh {
-    constructor(config = {}) {
-        super();
-        this.updata(config);
-        this.material.map = this.texture;
-        this.scale.set(10, 10, 10);
-    }
-    geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
-    material = new MeshBasicMaterial({
-        side: DoubleSide,
-        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");
-    texture = threeLoader.getTexture(this.canvas);
-    // 配置
-    _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.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.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" });
-    }
-}
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-09 18:51:11
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-09 19:15:35
+ */
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
+import threeLoader from "../threeLoader";
+import planeModalPNG from "./planeModal.png";
+// 平面模型弹窗
+export default class PlaneModal1 extends Mesh {
+    constructor(config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        this.scale.set(10, 10, 10);
+    }
+    geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        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");
+    texture = threeLoader.getTexture(this.canvas);
+    // 配置
+    _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.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.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" });
+    }
+}

package/PlaneModal1/index.d.ts

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

package/PlaneModal1/index.js

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