three-base 1.0.82 → 1.0.84

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/SpriteText2.js

@@ -4,160 +4,87 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-04-24 16:18:47
  */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 import { LinearFilter, Sprite, Texture } from 'three';
 // 带箭头的精灵文字
-var SpriteText2 = /** @class */ (function (_super) {
-    __extends(SpriteText2, _super);
-    function SpriteText2(text, textHeight, color) {
-        if (text === void 0) { text = ''; }
-        if (textHeight === void 0) { textHeight = 10; }
-        if (color === void 0) { color = 'rgba(255, 255, 255, 1)'; }
-        var _this = _super.call(this) || this;
-        _this._text = "";
-        _this._textHeight = 0;
-        _this._color = "#ffffff";
-        _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._canvas = document.createElement('canvas');
-        _this._text = "".concat(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();
-        return _this;
+export default class SpriteText2 extends Sprite {
+    constructor(text = '', textHeight = 10, color = '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();
     }
-    Object.defineProperty(SpriteText2.prototype, "text", {
-        get: function () { return this._text; },
-        set: function (text) { this._text = text; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "textHeight", {
-        get: function () { return this._textHeight; },
-        set: function (textHeight) { this._textHeight = textHeight; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "color", {
-        get: function () { return this._color; },
-        set: function (color) { this._color = color; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "backgroundColor", {
-        get: function () { return this._backgroundColor; },
-        set: function (color) { this._backgroundColor = color; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "padding", {
-        get: function () { return this._padding; },
-        set: function (padding) { this._padding = padding; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "borderWidth", {
-        get: function () { return this._borderWidth; },
-        set: function (borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "borderRadius", {
-        get: function () { return this._borderRadius; },
-        set: function (borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "borderColor", {
-        get: function () { return this._borderColor; },
-        set: function (borderColor) { this._borderColor = borderColor; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "fontFace", {
-        get: function () { return this._fontFace; },
-        set: function (fontFace) { this._fontFace = fontFace; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "fontSize", {
-        get: function () { return this._fontSize; },
-        set: function (fontSize) { this._fontSize = fontSize; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "fontWeight", {
-        get: function () { return this._fontWeight; },
-        set: function (fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "strokeWidth", {
-        get: function () { return this._strokeWidth; },
-        set: function (strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpriteText2.prototype, "strokeColor", {
-        get: function () { return this._strokeColor; },
-        set: function (strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); },
-        enumerable: false,
-        configurable: true
-    });
-    SpriteText2.prototype._genCanvas = function () {
-        var _this = this;
-        var canvas = this._canvas;
-        var ctx = canvas.getContext('2d');
-        var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
-        var relBorder = border.map(function (b) { return b * _this.fontSize * 0.1; }); // border in canvas units
-        var borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
-        var relBorderRadius = borderRadius.map(function (b) { return b * _this.fontSize * 0.1; }); // border radius in canvas units
-        var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
-        var relPadding = padding.map(function (p) { return p * _this.fontSize * 0.1; }); // padding in canvas units
-        var lines = this.text.split('\n');
-        var font = "".concat(this.fontWeight, " ").concat(this.fontSize, "px ").concat(this.fontFace);
+    _text = "";
+    _textHeight = 0;
+    _color = "#ffffff";
+    _backgroundColor = 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 = 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
-        var innerWidth = Math.max.apply(Math, lines.map(function (line) { return ctx.measureText(line).width; }));
-        var innerHeight = this.fontSize * lines.length;
+        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
-                var hb = relBorder[0] / 2;
+                const hb = relBorder[0] / 2;
                 ctx.lineWidth = relBorder[0];
                 ctx.beginPath();
                 ctx.moveTo(hb, relBorderRadius[0]);
@@ -167,7 +94,7 @@ var SpriteText2 = /** @class */ (function (_super) {
                 ctx.stroke();
             }
             if (relBorder[1]) { // top + bottom borders
-                var hb = relBorder[1] / 2;
+                const hb = relBorder[1] / 2;
                 ctx.lineWidth = relBorder[1];
                 ctx.beginPath();
                 ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
@@ -180,8 +107,8 @@ var SpriteText2 = /** @class */ (function (_super) {
                 ctx.stroke();
             }
             if (this.borderRadius) { // strike rounded corners
-                var cornerWidth = Math.max.apply(Math, relBorder);
-                var hb = cornerWidth / 2;
+                const cornerWidth = Math.max(...relBorder);
+                const hb = cornerWidth / 2;
                 ctx.lineWidth = cornerWidth;
                 ctx.beginPath();
                 [
@@ -189,8 +116,7 @@ var SpriteText2 = /** @class */ (function (_super) {
                     !!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(function (d) { return d; }).forEach(function (_a) {
-                    var x0 = _a[0], x1 = _a[1], y0 = _a[2], y1 = _a[3];
+                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
                     ctx.moveTo(x0, y0);
                     ctx.quadraticCurveTo(x1, y0, x1, y1);
                 });
@@ -226,36 +152,36 @@ var SpriteText2 = /** @class */ (function (_super) {
         ctx.font = font; // Set font again after canvas is resized, as context properties are reset
         ctx.fillStyle = this.color;
         ctx.textBaseline = 'bottom';
-        var drawTextStroke = this.strokeWidth > 0;
+        const drawTextStroke = this.strokeWidth > 0;
         if (drawTextStroke) {
             ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
             ctx.strokeStyle = this.strokeColor;
         }
-        lines.forEach(function (line, index) {
-            var lineX = (innerWidth - ctx.measureText(line).width) / 2;
-            var lineY = (index + 1) * _this.fontSize;
+        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
-        var texture = this.material.map = new Texture(canvas);
+        const texture = this.material.map = new Texture(canvas);
         texture.minFilter = LinearFilter;
         texture.needsUpdate = true;
-        var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+        const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
         this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
-    };
+    }
     //鼠标拾取计算
-    SpriteText2.prototype.raycast = function (raycaster, intersects) {
-        var intersect = [];
-        _super.prototype.raycast.call(this, raycaster, intersect);
-        var inte = intersect[0];
+    raycast(raycaster, intersects) {
+        let intersect = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
         if (inte && (inte.uv.y > 0.55)) {
             intersects.push(inte);
         }
-    };
-    SpriteText2.prototype.copy = function (source) {
+    }
+    copy(source) {
         this.color = source.color;
         this.backgroundColor = source.backgroundColor;
         this.padding = source.padding;
@@ -267,7 +193,5 @@ var SpriteText2 = /** @class */ (function (_super) {
         this.strokeWidth = source.strokeWidth;
         this.strokeColor = source.strokeColor;
         return this;
-    };
-    return SpriteText2;
-}(Sprite));
-export default SpriteText2;
+    }
+}

package/lib/Text3D/Text3D.js

@@ -4,80 +4,59 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-04-07 21:52:03
  */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
 import { Mesh, MeshStandardMaterial } from "three";
 import fontContorller from "./fontController";
 // 3D文字模型
-var Text3D = /** @class */ (function (_super) {
-    __extends(Text3D, _super);
-    function Text3D(text) {
-        if (text === void 0) { text = "new Text3D()"; }
-        var _this = _super.call(this) || this;
-        _this.material = new MeshStandardMaterial({
-            metalness: 0.8,
-            roughness: 0.5, // 粗糙度，值为0到1
-        });
-        // 配置
-        _this._config = {
-            text: "",
-            fontType: "simhei",
-            size: 1,
-            curveSegments: 10,
-            height: 0.1,
-            bevelEnabled: true,
-            bevelThickness: 0.02,
-            bevelSize: 0.015,
-            bevelOffset: 0,
-            bevelSegments: 3, //斜角分段
-        };
-        _this.setText({ text: text });
-        return _this;
+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 = "http://drm.gitee.io/three-base-font/";
+    material = new MeshStandardMaterial({
+        metalness: 0.8,
+        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, //斜角分段
+    };
     // 设置文字
-    Text3D.prototype.setText = function (text3DProps) {
-        var _this = this;
-        if (Object.keys(text3DProps).some(function (key) { return text3DProps[key] !== _this._config[key]; })) {
+    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: function (THREEFont) {
-                    _this.geometry.dispose();
-                    _this.geometry = new TextGeometry(_this._config.text || "", {
+                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, //斜角分段
+                        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" });
+                    this.geometry.center();
+                    this.dispatchEvent({ type: "loaded" });
                 }
             });
         }
-    };
-    // 字体的存储路径 例如 : "http://drm.gitee.io/three-base-font/simhei/字.js"
-    Text3D.path = "http://drm.gitee.io/three-base-font/";
-    return Text3D;
-}(Mesh));
-export default Text3D;
+    }
+}