three-base 1.0.44 → 1.0.46

package/README.md

@@ -88,7 +88,8 @@ homeRenderer.setContainer( document.getElementById("div") );
 
 ```
 
-demo: https://gitee.com/drm/vite_react_mobx_threebase
+演示地址:  https://drm.gitee.io/vite_react_mobx_threebase/
 
-![demo.png](https://drm.gitee.io/vite_react_mobx_threebase/demo.png)
+代码: https://gitee.com/drm/vite_react_mobx_threebase
 
+![demo.png](https://drm.gitee.io/vite_react_mobx_threebase/demo.png)

package/index.ts

@@ -36,5 +36,8 @@ export { default as threeLoader } from "./lib/threeLoader";
 // 第一人称控制器
 export { default as FPScontrol } from "./lib/FPScontrol";
 
-// 2d 文字
-export { default as Text2D } from "./lib/text/Text2D";
+// 平面文字
+export { default as PlaneText } from "./lib/PlaneText";
+
+// 精灵文字
+export { default as SpriteText } from "three-spritetext";

package/lib/PlaneText.ts

@@ -0,0 +1,59 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-05-23 13:53:06 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-05-23 19:38:24
+ */
+
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
+import SpriteText from "three-spritetext";
+
+
+
+type Props = {
+    text?: string;
+    textHeight?: number;
+    color?: string;
+    backgroundColor?: string;
+    fontFace?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    padding?: number | [number, number];
+    borderWidth?: number;
+    borderRadius?: number;
+    borderColor?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+}
+
+export default class PlaneText extends Mesh {
+
+    constructor(text: string = "planeText") {
+        super(PlaneText.geometry);
+        this.set({ text });
+    }
+
+    type = "PlaneText";
+
+    static geometry = new PlaneGeometry(1, 1, 1, 1);
+
+    spriteText = new SpriteText("");
+
+    material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
+
+    set(parame: Props) {
+        for (let key in parame) {
+            //@ts-ignore
+            this.spriteText[key] = parame[key];
+        }
+
+        this.scale.copy(this.spriteText.scale);
+        this.scale.max(new Vector3(1, 1, 1));
+        this.material.map = this.spriteText.material.map;
+    }
+
+    get(prop: keyof SpriteText) {
+        return this.spriteText[prop];
+    }
+
+}

package/lib/spriteModal1/SpriteModal1.ts

@@ -0,0 +1,156 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-08 00:01:34
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-08 02:05:25
+ */
+
+
+
+
+
+import { Sprite, CanvasTexture, Vector2, Raycaster, Intersection } from "three";
+import spriteModal1PNG from "./spriteModal1.png";
+
+export type SpritModal1Config = {
+    size?: number,
+    title?: string,
+    titleColor?: string,
+    texts?: Array<{
+        text?: string,
+        color?: string,
+        size?: number
+    }>
+}
+
+// sprit弹窗1
+export default class SpritModal1 extends Sprite {
+
+    constructor(config: SpritModal1Config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+    }
+
+    // 背景图
+    static img = (() => {
+        const img = new Image();
+        img.src = spriteModal1PNG;
+        return img;
+    })();
+
+    canvas = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1024;
+        canvas.height = 1024;
+        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: "SpritModal1",
+            titleColor: "#ffffff",
+            texts: []
+            // [
+            //     {
+            //         text: "1",
+            //         color: "#ffff00",
+            //         size: 40
+            //     },
+            //     {
+            //         text: "2",
+            //         color: "#ff00ff",
+            //         size: 40
+            //     },
+            // ]
+        }
+
+    async updata(config: SpritModal1Config) {
+
+        Object.assign(this._config, config)
+
+        //绘制背景
+        this.context.clearRect(0, 0, 1024, 1024);
+
+        while (!SpritModal1.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, 1024, 1024);
+
+        //绘制背景
+        this.context.drawImage(SpritModal1.img, 186, 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, 250, 72);
+
+        let textPos = new Vector2(250, 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;
+
+    }
+
+    //鼠标拾取计算
+    raycast(raycaster: Raycaster, intersects: Intersection[]) {
+
+        let intersect: Intersection[] = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv!.x > 0.22 && inte.uv!.x < 0.78) && (inte.uv!.y > 0.54 && inte.uv!.y < 0.94)) {
+            intersects.push(inte);
+        }
+
+    }
+
+}
+

package/lib/text/Text2D.ts

@@ -35,29 +35,7 @@ type Props = {
 export default class Text2D extends Mesh {
 
     constructor(text: string = "Text2D") {
-        super(Text2D.geometry);
-        this.set({ text });
-        this.material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
-    }
-
-    type = "Text2D";
-
-    static geometry = new PlaneGeometry(1, 1, 1, 1);
-
-    spriteText = new SpriteText("");
-
-    material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
-
-    minScale = new Vector3(0.1, 0.1, 0.1);
-
-    set(parame: Props) {
-        for (let key in parame) {
-            //@ts-ignore
-            this.spriteText[key] = parame[key];
-        }
-        this.scale.copy(this.spriteText.scale);
-        this.scale.multiplyScalar(0.1);
-        this.scale.max(this.minScale);
+        super();
     }
 
 }

package/lib/text/Text3D.ts

@@ -10,7 +10,7 @@ import { Mesh } from "three";
 // 三维空间中的3D文字模型
 export default class Text3D extends Mesh {
 
-    constructor() {
+    constructor(text: string = "Text2D") {
         super();
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.44",
+    "version": "1.0.46",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -9,7 +9,8 @@
     "keywords": [
         "three",
         "3d",
-        "three-base"
+        "three-base",
+        "three-spritetext"
     ],
     "main": "index.ts",
     "module": "index.ts",
@@ -41,6 +42,7 @@
         "element-resize-event": "^3",
         "lodash": "^4",
         "three": ">=0.150.0",
+        "vite": "^4",
         "three-spritetext": "^1",
         "@types/three": ">=0.149.0",
         "@types/element-resize-event": "^3",