three-base 1.0.46 → 1.0.48

package/index.ts

@@ -40,4 +40,10 @@ export { default as FPScontrol } from "./lib/FPScontrol";
 export { default as PlaneText } from "./lib/PlaneText";
 
 // 精灵文字
-export { default as SpriteText } from "three-spritetext";
+export { default as SpriteText } from "three-spritetext";
+
+//精灵文本框
+export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
+
+//平面文本框
+export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";

package/lib/planeModal1/PlaneModal1.ts

@@ -0,0 +1,148 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-03-09 18:51:11 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-09 19:15:35
+ */
+
+import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, BufferGeometry, PlaneGeometry } from "three";
+import planeModalPNG from "./planeModal.png";
+
+
+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 = {}) {
+        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
+    });
+
+    // 背景图
+    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 = new CanvasTexture(this.canvas);
+
+    // 配置
+    _config: {
+        size: number,
+        title: string,
+        titleColor: string,
+        texts: Array<{
+            text: string,
+            color: string,
+            size: number
+        }>
+    } = {
+            size: 10,
+            title: "PlaneModal1",
+            titleColor: "#ffffff",
+            texts: []
+            // [
+            //     {
+            //         text: "1",
+            //         color: "#ffff00",
+            //         size: 40
+            //     },
+            //     {
+            //         text: "2",
+            //         color: "#ff00ff",
+            //         size: 40
+            //     },
+            // ]
+        }
+
+    async updata(config: PlaneModal1Config) {
+
+        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;
+
+    }
+
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.46",
+    "version": "1.0.48",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",