three-base 1.0.81 → 1.0.83

package/index.js

@@ -25,7 +25,7 @@ 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 "./lib/SpriteText";
 // 精灵文字样式2
 export { default as SpriteText2 } from "./lib/SpriteText2";
 //精灵文本框

package/index.ts

@@ -43,7 +43,7 @@ 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 "./lib/SpriteText";
 
 // 精灵文字样式2
 export { default as SpriteText2 } from "./lib/SpriteText2";

package/lib/PlaneText.d.ts

@@ -1,5 +1,5 @@
 import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "three-spritetext";
+import SpriteText from "./SpriteText";
 type Props = {
     text?: string;
     textHeight?: number;
@@ -32,6 +32,6 @@ export default class PlaneText extends Mesh {
         materials: any;
         textures: any;
         images: any;
-    }) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | import("three").SpriteMaterial | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void);
+    }) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | HTMLCanvasElement | import("three").SpriteMaterial | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void) | (() => void);
 }
 export {};

package/lib/PlaneText.js

@@ -2,10 +2,10 @@
  * @Author: xiaosihan
  * @Date: 2022-05-23 13:53:06
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-05-23 19:38:24
+ * @Last Modified time: 2023-05-03 02:54:52
  */
 import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "three-spritetext";
+import SpriteText from "./SpriteText";
 export default class PlaneText extends Mesh {
     constructor(text = "planeText") {
         super(PlaneText.geometry);

package/lib/PlaneText.ts

@@ -2,12 +2,11 @@
  * @Author: xiaosihan 
  * @Date: 2022-05-23 13:53:06 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-05-23 19:38:24
+ * @Last Modified time: 2023-05-03 02:54:52
  */
 
 import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "three-spritetext";
-
+import SpriteText from "./SpriteText";
 
 
 type Props = {

package/lib/PointLight/PointLight.d.ts

@@ -1,5 +1,5 @@
 import { Sprite, PointLight as THREEPointLight } from "three";
-import threeSpritetext from "three-spritetext";
+import SpriteText from "../SpriteText";
 /**
  * 点光源
  * @export
@@ -9,5 +9,5 @@ import threeSpritetext from "three-spritetext";
 export default class PointLight extends THREEPointLight {
     constructor(color?: string, intensity?: number, distance?: number, decay?: number);
     pointLinghtHelper: Sprite;
-    label: threeSpritetext;
+    label: SpriteText;
 }

package/lib/PointLight/PointLight.js

@@ -2,13 +2,13 @@
  * @Author: xiaosihan
  * @Date: 2022-05-18 16:02:55
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-04-21 17:22:59
+ * @Last Modified time: 2023-05-03 02:55:28
  */
 import { Sprite, PointLight as THREEPointLight } from "three";
-import threeSpritetext from "three-spritetext";
 import threeLoader from "../threeLoader";
 import threeUtils from "../threeUtils";
 import pointLight_mapPNG from "./pointLight_map.png";
+import SpriteText from "../SpriteText";
 /**
  * 点光源
  * @export
@@ -43,7 +43,7 @@ export default class PointLight extends THREEPointLight {
         return pointLinghtHelper;
     })();
     label = threeUtils.isDev && (() => {
-        const label = new threeSpritetext("点光源\n\n\n");
+        const label = new SpriteText("点光源\n\n\n");
         label.renderOrder = Infinity;
         // label.backgroundColor = "rgba(0, 0, 0, 0.5)";
         label.padding = 4;

package/lib/PointLight/PointLight.ts

@@ -2,14 +2,14 @@
  * @Author: xiaosihan 
  * @Date: 2022-05-18 16:02:55 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-04-21 17:22:59
+ * @Last Modified time: 2023-05-03 02:55:28
  */
 
 import { Sprite, PointLight as THREEPointLight } from "three";
-import threeSpritetext from "three-spritetext";
 import threeLoader from "../threeLoader";
 import threeUtils from "../threeUtils";
 import pointLight_mapPNG from "./pointLight_map.png";
+import SpriteText from "../SpriteText";
 
 
 /**
@@ -53,7 +53,7 @@ export default class PointLight extends THREEPointLight {
     })();
 
     label = threeUtils.isDev && (() => {
-        const label = new threeSpritetext("点光源\n\n\n");
+        const label = new SpriteText("点光源\n\n\n");
         label.renderOrder = Infinity;
         // label.backgroundColor = "rgba(0, 0, 0, 0.5)";
         label.padding = 4;

package/lib/SpriteText.d.ts

@@ -0,0 +1,45 @@
+import { Sprite } from "three";
+export default class SpriteText extends Sprite {
+    constructor(text?: string, textHeight?: number, color?: `#${string}` | `rgba(${string})`);
+    _text: string;
+    _textHeight: number;
+    _color: `#${string}` | `rgba(${string})`;
+    _backgroundColor: boolean;
+    _padding: number;
+    _borderWidth: number;
+    _borderRadius: number;
+    _borderColor: `#${string}` | `rgba(${string})`;
+    _strokeWidth: number;
+    _strokeColor: `#${string}` | `rgba(${string})`;
+    _fontFace: string;
+    _fontSize: number;
+    _fontWeight: string;
+    _canvas: HTMLCanvasElement;
+    get text(): string;
+    set text(text: string);
+    get textHeight(): number;
+    set textHeight(textHeight: number);
+    get color(): `#${string}` | `rgba(${string})`;
+    set color(color: `#${string}` | `rgba(${string})`);
+    get backgroundColor(): boolean;
+    set backgroundColor(color: boolean);
+    get padding(): number;
+    set padding(padding: number);
+    get borderWidth(): number;
+    set borderWidth(borderWidth: number);
+    get borderRadius(): number;
+    set borderRadius(borderRadius: number);
+    get borderColor(): `#${string}` | `rgba(${string})`;
+    set borderColor(borderColor: `#${string}` | `rgba(${string})`);
+    get fontFace(): string;
+    set fontFace(fontFace: string);
+    get fontSize(): number;
+    set fontSize(fontSize: number);
+    get fontWeight(): string;
+    set fontWeight(fontWeight: string);
+    get strokeWidth(): number;
+    set strokeWidth(strokeWidth: number);
+    get strokeColor(): `#${string}` | `rgba(${string})`;
+    set strokeColor(strokeColor: `#${string}` | `rgba(${string})`);
+    _genCanvas(): void;
+}

package/lib/SpriteText.js

@@ -0,0 +1,162 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-03 02:42:07
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-03 02:53:00
+ */
+import { Sprite, SpriteMaterial, Texture, LinearFilter } from "three";
+export default class SpriteText extends Sprite {
+    constructor(text = '', textHeight = 10, color = 'rgba(255, 255, 255, 1)') {
+        super(new SpriteMaterial());
+        this._text = `${text}`;
+        this._textHeight = textHeight;
+        this._color = color;
+        this._genCanvas();
+    }
+    _text = "";
+    _textHeight = 10;
+    _color = "#fffff";
+    _backgroundColor = false; // no background color
+    _padding = 0;
+    _borderWidth = 0;
+    _borderRadius = 0;
+    _borderColor = "#fffff";
+    _strokeWidth = 0;
+    _strokeColor = "#fffff";
+    _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 = 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;
+        // 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 - relBorderRadius[3]);
+                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+                ctx.lineTo(canvas.width - hb, canvas.height - 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 - hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - 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 - hb, canvas.height - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, canvas.height - hb, canvas.height - relBorderRadius[3]]
+                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                    ctx.moveTo(x0, y0);
+                    ctx.quadraticCurveTo(x1, y0, x1, y1);
+                });
+                ctx.stroke();
+            }
+        }
+        // paint background
+        if (this.backgroundColor) {
+            //@ts-ignore
+            ctx.fillStyle = this.backgroundColor;
+            if (!this.borderRadius) {
+                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
+            }
+            else { // fill with rounded corners
+                ctx.beginPath();
+                ctx.moveTo(relBorder[0], relBorderRadius[0]);
+                [
+                    [relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]],
+                    [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]],
+                    [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]],
+                    [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]], // t
+                ].forEach(([x0, x1, x2, y0, y1, y2]) => {
+                    ctx.quadraticCurveTo(x0, y0, x1, y1);
+                    ctx.lineTo(x2, y2);
+                });
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+        ctx.translate(...relBorder);
+        ctx.translate(...relPadding);
+        // 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);
+    }
+}

package/lib/SpriteText.ts

@@ -0,0 +1,189 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-05-03 02:42:07 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-03 02:53:00
+ */
+
+import { Sprite, SpriteMaterial, Texture, LinearFilter } from "three";
+
+export default class SpriteText extends Sprite {
+
+    constructor(text = '', textHeight = 10, color: `#${string}` | `rgba(${string})` = 'rgba(255, 255, 255, 1)') {
+        super(new SpriteMaterial());
+
+        this._text = `${text}`;
+        this._textHeight = textHeight;
+        this._color = color;
+
+        this._genCanvas();
+    }
+
+    _text: string = "";
+    _textHeight: number = 10;
+    _color: `#${string}` | `rgba(${string})` = "#fffff";
+    _backgroundColor = false; // no background color
+
+    _padding: number = 0;
+    _borderWidth: number = 0;
+    _borderRadius: number = 0;
+    _borderColor: `#${string}` | `rgba(${string})` = "#fffff";
+
+    _strokeWidth: number = 0;
+    _strokeColor: `#${string}` | `rgba(${string})` = "#fffff";
+
+    _fontFace: string = 'Arial';
+    _fontSize: number = 90; // defines text resolution
+    _fontWeight: string = '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 = border.map(b => b * this.fontSize * 0.1) as [number, number]; // 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) as [number, number];; // 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;
+
+        // 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 - relBorderRadius[3]);
+                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+                ctx.lineTo(canvas.width - hb, canvas.height - 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 - hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - 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 - hb, canvas.height - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, canvas.height - hb, canvas.height - relBorderRadius[3]]
+                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                    ctx.moveTo(x0, y0);
+                    ctx.quadraticCurveTo(x1, y0, x1, y1);
+                });
+                ctx.stroke();
+            }
+        }
+
+        // paint background
+        if (this.backgroundColor) {
+            //@ts-ignore
+            ctx.fillStyle = this.backgroundColor;
+            if (!this.borderRadius) {
+                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
+            } else { // fill with rounded corners
+                ctx.beginPath();
+                ctx.moveTo(relBorder[0], relBorderRadius[0]);
+                [
+                    [relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t
+                    [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r
+                    [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b
+                    [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]], // t
+                ].forEach(([x0, x1, x2, y0, y1, y2]) => {
+                    ctx.quadraticCurveTo(x0, y0, x1, y1);
+                    ctx.lineTo(x2, y2);
+                });
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+
+        ctx.translate(...relBorder);
+        ctx.translate(...relPadding);
+
+        // 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);
+    }
+
+}

package/lib/SpriteText2.d.ts

@@ -19,10 +19,10 @@ export default class SpriteText2 extends Sprite {
     set text(text: string);
     get textHeight(): number;
     set textHeight(textHeight: number);
-    get color(): `rgb(${string})` | `rgba(${string})` | `#${string}`;
-    set color(color: `rgb(${string})` | `rgba(${string})` | `#${string}`);
-    get backgroundColor(): false | `rgb(${string})` | `rgba(${string})` | `#${string}`;
-    set backgroundColor(color: false | `rgb(${string})` | `rgba(${string})` | `#${string}`);
+    get color(): `#${string}` | `rgba(${string})` | `rgb(${string})`;
+    set color(color: `#${string}` | `rgba(${string})` | `rgb(${string})`);
+    get backgroundColor(): false | `#${string}` | `rgba(${string})` | `rgb(${string})`;
+    set backgroundColor(color: false | `#${string}` | `rgba(${string})` | `rgb(${string})`);
     get padding(): number;
     set padding(padding: number);
     get borderWidth(): number;

package/lib/threeUtils.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-02-24 22:49:42
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-16 14:34:49
+ * @Last Modified time: 2023-05-03 00:36:18
  */
 import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
 class ThreeUtils extends EventDispatcher {
@@ -168,6 +168,7 @@ class ThreeUtils extends EventDispatcher {
         const scale = size / Math.max(originSize.x, originSize.y, originSize.z);
         if (object3d instanceof Object3D) {
             object3d.scale.multiplyScalar(scale);
+            object3d.updateMatrixWorld(true);
         }
         else if (object3d instanceof BufferGeometry) {
             object3d.scale(scale, scale, scale);

package/lib/threeUtils.ts

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2022-02-24 22:49:42
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-16 14:34:49
+ * @Last Modified time: 2023-05-03 00:36:18
  */
 
 import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
@@ -194,6 +194,7 @@ class ThreeUtils extends EventDispatcher {
         const scale = size / Math.max(originSize.x, originSize.y, originSize.z);
         if (object3d instanceof Object3D) {
             object3d.scale.multiplyScalar(scale);
+            object3d.updateMatrixWorld(true);
         } else if (object3d instanceof BufferGeometry) {
             object3d.scale(scale, scale, scale);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.81",
+    "version": "1.0.83",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -9,8 +9,7 @@
     "keywords": [
         "three",
         "3d",
-        "three-base",
-        "three-spritetext"
+        "three-base"
     ],
     "main": "index.js",
     "module": "index.js",
@@ -44,7 +43,6 @@
         "lodash": "^4",
         "three": ">=0.150.0",
         "dexie": "^3",
-        "three-spritetext": "^1",
         "@types/three": ">=0.149.0",
         "@types/element-resize-event": "^3",
         "@types/lodash": "^4",