three-base 1.0.81 → 1.0.82

package/lib/SpriteText2.js

@@ -4,87 +4,160 @@
  * @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';
 // 带箭头的精灵文字
-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();
+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;
     }
-    _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}`;
+    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);
         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;
+        var innerWidth = Math.max.apply(Math, lines.map(function (line) { return ctx.measureText(line).width; }));
+        var 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
-                const hb = relBorder[0] / 2;
+                var hb = relBorder[0] / 2;
                 ctx.lineWidth = relBorder[0];
                 ctx.beginPath();
                 ctx.moveTo(hb, relBorderRadius[0]);
@@ -94,7 +167,7 @@ export default class SpriteText2 extends Sprite {
                 ctx.stroke();
             }
             if (relBorder[1]) { // top + bottom borders
-                const hb = relBorder[1] / 2;
+                var hb = relBorder[1] / 2;
                 ctx.lineWidth = relBorder[1];
                 ctx.beginPath();
                 ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
@@ -107,8 +180,8 @@ export default class SpriteText2 extends Sprite {
                 ctx.stroke();
             }
             if (this.borderRadius) { // strike rounded corners
-                const cornerWidth = Math.max(...relBorder);
-                const hb = cornerWidth / 2;
+                var cornerWidth = Math.max.apply(Math, relBorder);
+                var hb = cornerWidth / 2;
                 ctx.lineWidth = cornerWidth;
                 ctx.beginPath();
                 [
@@ -116,7 +189,8 @@ export default class SpriteText2 extends Sprite {
                     !!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(d => d).forEach(([x0, x1, y0, y1]) => {
+                ].filter(function (d) { return d; }).forEach(function (_a) {
+                    var x0 = _a[0], x1 = _a[1], y0 = _a[2], y1 = _a[3];
                     ctx.moveTo(x0, y0);
                     ctx.quadraticCurveTo(x1, y0, x1, y1);
                 });
@@ -152,36 +226,36 @@ export default class SpriteText2 extends Sprite {
         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;
+        var 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;
+        lines.forEach(function (line, index) {
+            var lineX = (innerWidth - ctx.measureText(line).width) / 2;
+            var 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);
+        var 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;
+        var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
         this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
-    }
+    };
     //鼠标拾取计算
-    raycast(raycaster, intersects) {
-        let intersect = [];
-        super.raycast(raycaster, intersect);
-        let inte = intersect[0];
+    SpriteText2.prototype.raycast = function (raycaster, intersects) {
+        var intersect = [];
+        _super.prototype.raycast.call(this, raycaster, intersect);
+        var inte = intersect[0];
         if (inte && (inte.uv.y > 0.55)) {
             intersects.push(inte);
         }
-    }
-    copy(source) {
+    };
+    SpriteText2.prototype.copy = function (source) {
         this.color = source.color;
         this.backgroundColor = source.backgroundColor;
         this.padding = source.padding;
@@ -193,5 +267,7 @@ export default class SpriteText2 extends Sprite {
         this.strokeWidth = source.strokeWidth;
         this.strokeColor = source.strokeColor;
         return this;
-    }
-}
+    };
+    return SpriteText2;
+}(Sprite));
+export default SpriteText2;

package/lib/Text3D/Text3D.js

@@ -4,59 +4,80 @@
  * @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文字模型
-export default class Text3D extends Mesh {
-    constructor(text = "new Text3D()") {
-        super();
-        this.setText({ text });
+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;
     }
-    // 字体的存储路径 例如 : "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, //斜角分段
-    };
     // 设置文字
-    setText(text3DProps) {
-        if (Object.keys(text3DProps).some(key => text3DProps[key] !== this._config[key])) {
+    Text3D.prototype.setText = function (text3DProps) {
+        var _this = this;
+        if (Object.keys(text3DProps).some(function (key) { return text3DProps[key] !== _this._config[key]; })) {
             Object.assign(this._config, text3DProps);
             fontContorller.loadText({
                 fontBasePath: Text3D.path,
                 text: this._config.text,
                 fontType: this._config.fontType,
-                callback: THREEFont => {
-                    this.geometry.dispose();
-                    this.geometry = new TextGeometry(this._config.text || "", {
+                callback: function (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;