three-base 1.0.82 → 1.0.84

package/lib/PlaneWithHtml.js

@@ -4,142 +4,64 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-04-15 12:38:09
  */
-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 __());
-    };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import html2canvas from "html2canvas";
 import { CanvasTexture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
 import { degToRad } from "three/src/math/MathUtils";
 import threeLoader from "./threeLoader";
 // html 文本面板
-var PlaneWithHtml = /** @class */ (function (_super) {
-    __extends(PlaneWithHtml, _super);
-    function PlaneWithHtml(html, backgroundColor) {
-        if (html === void 0) { html = ""; }
-        if (backgroundColor === void 0) { backgroundColor = "#00000000"; }
-        var _this = _super.call(this) || this;
-        _this.visible = false;
-        _this.size = new Vector2(10, 10);
-        _this.geometry = (function () {
-            var geometry = new PlaneGeometry(10, 10, 1, 1);
-            geometry.rotateX(degToRad(-90));
-            return geometry;
-        })();
-        _this.material = new MeshBasicMaterial({
-            side: DoubleSide,
-            transparent: true
-        });
-        _this.div = (function () {
-            var div = document.createElement("div");
-            div.style.position = "fixed";
-            div.style.top = "100%";
-            div.style.left = "100%";
-            div.style.pointerEvents = "none";
-            div.style.userSelect = "none";
-            div.style.lineHeight = "1";
-            div.style.whiteSpace = "nowrap";
-            return div;
-        })();
-        _this.setHtml(html, backgroundColor);
-        return _this;
+export default class PlaneWithHtml extends Mesh {
+    constructor(html = "", backgroundColor = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
     }
+    visible = false;
+    size = new Vector2(10, 10);
+    geometry = (() => {
+        const geometry = new PlaneGeometry(10, 10, 1, 1);
+        geometry.rotateX(degToRad(-90));
+        return geometry;
+    })();
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        transparent: true
+    });
+    div = (() => {
+        const div = document.createElement("div");
+        div.style.position = "fixed";
+        div.style.top = "100%";
+        div.style.left = "100%";
+        div.style.pointerEvents = "none";
+        div.style.userSelect = "none";
+        div.style.lineHeight = "1";
+        div.style.whiteSpace = "nowrap";
+        return div;
+    })();
     // 设置网格尺寸
-    PlaneWithHtml.prototype.setGeoSize = function (width, height) {
+    setGeoSize(width, height) {
         this.size.set(width, height);
         this.geometry.dispose();
-        var geometry = new PlaneGeometry(width, height, 1, 1);
+        const geometry = new PlaneGeometry(width, height, 1, 1);
         geometry.rotateX(degToRad(-90));
         this.geometry = geometry;
-    };
-    PlaneWithHtml.prototype.setHtml = function (html, backgroundColor) {
-        if (html === void 0) { html = ""; }
-        if (backgroundColor === void 0) { backgroundColor = "#00000000"; }
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        this.div.innerHTML = html;
-                        document.body.appendChild(this.div);
-                        return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                html2canvas(_this.div, {
-                                    backgroundColor: backgroundColor,
-                                    removeContainer: true
-                                }).then(function (canvas) { return __awaiter(_this, void 0, void 0, function () {
-                                    return __generator(this, function (_a) {
-                                        switch (_a.label) {
-                                            case 0:
-                                                this.setGeoSize(canvas.width, canvas.height);
-                                                this.material.map = new CanvasTexture(canvas);
-                                                this.material.map.anisotropy = threeLoader.anisotropy;
-                                                this.material.needsUpdate = true;
-                                                this.visible = true;
-                                                return [4 /*yield*/, new Promise(function (resolve) { return requestAnimationFrame(resolve); })];
-                                            case 1:
-                                                _a.sent();
-                                                this.div.remove();
-                                                resolve();
-                                                return [2 /*return*/];
-                                        }
-                                    });
-                                }); });
-                            })];
-                    case 1:
-                        _a.sent();
-                        this.dispatchEvent({ type: "loaded" });
-                        return [2 /*return*/];
-                }
+    }
+    async setHtml(html = "", backgroundColor = "#00000000") {
+        this.div.innerHTML = html;
+        document.body.appendChild(this.div);
+        await new Promise((resolve, reject) => {
+            html2canvas(this.div, {
+                backgroundColor,
+                removeContainer: true
+            }).then(async (canvas) => {
+                this.setGeoSize(canvas.width, canvas.height);
+                this.material.map = new CanvasTexture(canvas);
+                this.material.map.anisotropy = threeLoader.anisotropy;
+                this.material.needsUpdate = true;
+                this.visible = true;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.div.remove();
+                resolve();
             });
         });
-    };
-    return PlaneWithHtml;
-}(Mesh));
-export default PlaneWithHtml;
+        this.dispatchEvent({ type: "loaded" });
+    }
+}

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,82 +2,62 @@
  * @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
  */
-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 { 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
  * @class PointLight
  * @extends {THREEPointLight}
  */
-var PointLight = /** @class */ (function (_super) {
-    __extends(PointLight, _super);
-    function PointLight(color, intensity, distance, decay) {
-        if (color === void 0) { color = "#fff"; }
-        var _this = _super.call(this, color, intensity, distance, decay) || this;
-        // 灯光辅助器
-        _this.pointLinghtHelper = threeUtils.isDev && (function () {
-            var pointLinghtHelper = new Sprite();
-            pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
-            pointLinghtHelper.material.color = _this.color;
-            pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
-            pointLinghtHelper.material.sizeAttenuation = false;
-            pointLinghtHelper.userData = {
-                cursor: "pointer"
-            };
-            pointLinghtHelper.addEventListener("mouseenter", function () {
-                if (_this.label) {
-                    _this.label.visible = true;
-                }
-            });
-            pointLinghtHelper.addEventListener("mouseleave", function () {
-                if (_this.label) {
-                    _this.label.visible = false;
-                }
-            });
-            _this.add(pointLinghtHelper);
-            return pointLinghtHelper;
-        })();
-        _this.label = threeUtils.isDev && (function () {
-            var label = new threeSpritetext("点光源\n\n\n");
-            label.renderOrder = Infinity;
-            // label.backgroundColor = "rgba(0, 0, 0, 0.5)";
-            label.padding = 4;
-            label.strokeColor = "#333";
-            label.strokeWidth = 2;
-            // label.borderRadius = 4;
-            // label.borderWidth = 1;
-            label.position.set(0, 0, 0);
-            label.visible = false;
-            label.material.color = _this.color;
-            label.material.depthTest = false;
-            label.material.sizeAttenuation = false;
-            label.scale.multiplyScalar(0.002);
-            _this.add(label);
-            return label;
-        })();
-        return _this;
+export default class PointLight extends THREEPointLight {
+    constructor(color = "#fff", intensity, distance, decay) {
+        super(color, intensity, distance, decay);
     }
-    return PointLight;
-}(THREEPointLight));
-export default PointLight;
+    // 灯光辅助器
+    pointLinghtHelper = threeUtils.isDev && (() => {
+        const pointLinghtHelper = new Sprite();
+        pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
+        pointLinghtHelper.material.color = this.color;
+        pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
+        pointLinghtHelper.material.sizeAttenuation = false;
+        pointLinghtHelper.userData = {
+            cursor: "pointer"
+        };
+        pointLinghtHelper.addEventListener("mouseenter", () => {
+            if (this.label) {
+                this.label.visible = true;
+            }
+        });
+        pointLinghtHelper.addEventListener("mouseleave", () => {
+            if (this.label) {
+                this.label.visible = false;
+            }
+        });
+        this.add(pointLinghtHelper);
+        return pointLinghtHelper;
+    })();
+    label = threeUtils.isDev && (() => {
+        const label = new SpriteText("点光源\n\n\n");
+        label.renderOrder = Infinity;
+        // label.backgroundColor = "rgba(0, 0, 0, 0.5)";
+        label.padding = 4;
+        label.strokeColor = "#333";
+        label.strokeWidth = 2;
+        // label.borderRadius = 4;
+        // label.borderWidth = 1;
+        label.position.set(0, 0, 0);
+        label.visible = false;
+        label.material.color = this.color;
+        label.material.depthTest = false;
+        label.material.sizeAttenuation = false;
+        label.scale.multiplyScalar(0.002);
+        this.add(label);
+        return label;
+    })();
+}

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

@@ -4,44 +4,25 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-12-27 09:54:23
  */
-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 { DoubleSide, Mesh, MeshBasicMaterial, SphereGeometry } from "three";
 import threeLoader from "../threeLoader";
 import blueskyJPG from "./blueSky.jpg";
 /**
  * 天空球
  */
-var Sky = /** @class */ (function (_super) {
-    __extends(Sky, _super);
-    function Sky() {
-        var _this = _super.call(this, Sky.geometry) || this;
-        _this.material = new MeshBasicMaterial({
-            side: DoubleSide,
-            map: threeLoader.getTexture(blueskyJPG)
-        });
-        return _this;
+export default class Sky extends Mesh {
+    constructor() {
+        super(Sky.geometry);
     }
+    static geometry = new SphereGeometry(500000, 100, 100);
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        map: threeLoader.getTexture(blueskyJPG)
+    });
     /**
      *设置贴图
      */
-    Sky.prototype.setMap = function (src) {
+    setMap(src) {
         this.material.map = threeLoader.getTexture(src);
-    };
-    Sky.geometry = new SphereGeometry(500000, 100, 100);
-    return Sky;
-}(Mesh));
-export default Sky;
+    }
+}

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);
+    }
+}