three-spritetext/dist/three-spritetext.min.js

A sprite based text component for ThreeJS

// Version 1.10.0 three-spritetext - https://github.com/vasturiano/three-spritetext
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("three")):"function"==typeof define&&define.amd?define(["three"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).SpriteText=e(t.THREE)}(this,function(t){"use strict";function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function r(t,e,r){return e=o(e),function(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,i()?Reflect.construct(e,r||[],o(t).constructor):e.apply(t,r))}function n(t,e,r){return e&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,u(n.key),n)}}(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function o(t){return o=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},o(t)}function i(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(i=function(){return!!t})()}function a(t,e){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},a(t,e)}function s(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,i,a,s=[],f=!0,u=!1;try{if(i=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;f=!1}else for(;!(f=(n=i.call(r)).done)&&(s.push(n.value),s.length!==e);f=!0);}catch(t){u=!0,o=t}finally{try{if(!f&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return s}}(t,e)||h(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||h(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,e);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t,"string");return"symbol"==typeof e?e:e+""}function h(t,r){if(t){if("string"==typeof t)return e(t,r);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,r):void 0}}var c="undefined"!=typeof window&&window.THREE?window.THREE:{CanvasTexture:t.CanvasTexture,Sprite:t.Sprite,SpriteMaterial:t.SpriteMaterial,SRGBColorSpace:t.SRGBColorSpace},l=function(t){function e(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgba(255, 255, 255, 1)";return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),(t=r(this,e,[new c.SpriteMaterial]))._text="".concat(n),t._textHeight=o,t._color=i,t._backgroundColor=!1,t._padding=0,t._borderWidth=0,t._borderRadius=0,t._borderColor="white",t._offsetX=0,t._offsetY=0,t._strokeWidth=0,t._strokeColor="white",t._fontFace="system-ui",t._fontSize=90,t._fontWeight="normal",t._canvas=document.createElement("canvas"),t._genCanvas(),t}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&a(t,e)}(e,t),n(e,[{key:"text",get:function(){return this._text},set:function(t){this._text=t,this._genCanvas()}},{key:"textHeight",get:function(){return this._textHeight},set:function(t){this._textHeight=t,this._genCanvas()}},{key:"color",get:function(){return this._color},set:function(t){this._color=t,this._genCanvas()}},{key:"backgroundColor",get:function(){return this._backgroundColor},set:function(t){this._backgroundColor=t,this._genCanvas()}},{key:"padding",get:function(){return this._padding},set:function(t){this._padding=t,this._genCanvas()}},{key:"borderWidth",get:function(){return this._borderWidth},set:function(t){this._borderWidth=t,this._genCanvas()}},{key:"borderRadius",get:function(){return this._borderRadius},set:function(t){this._borderRadius=t,this._genCanvas()}},{key:"borderColor",get:function(){return this._borderColor},set:function(t){this._borderColor=t,this._genCanvas()}},{key:"offsetX",get:function(){return this._offsetX},set:function(t){this._offsetX=t,this._genCanvas()}},{key:"offsetY",get:function(){return this._offsetY},set:function(t){this._offsetY=t,this._genCanvas()}},{key:"fontFace",get:function(){return this._fontFace},set:function(t){this._fontFace=t,this._genCanvas()}},{key:"fontSize",get:function(){return this._fontSize},set:function(t){this._fontSize=t,this._genCanvas()}},{key:"fontWeight",get:function(){return this._fontWeight},set:function(t){this._fontWeight=t,this._genCanvas()}},{key:"strokeWidth",get:function(){return this._strokeWidth},set:function(t){this._strokeWidth=t,this._genCanvas()}},{key:"strokeColor",get:function(){return this._strokeColor},set:function(t){this._strokeColor=t,this._genCanvas()}},{key:"_genCanvas",value:function(){var t=this,e=this._canvas,r=e.getContext("2d"),n=1/this.textHeight,o=Array.isArray(this.borderWidth)?this.borderWidth:[this.borderWidth,this.borderWidth],i=o.map(function(e){return e*t.fontSize*n}),a=(Array.isArray(this.borderRadius)?this.borderRadius:[this.borderRadius,this.borderRadius,this.borderRadius,this.borderRadius]).map(function(e){return e*t.fontSize*n}),u=Array.isArray(this.padding)?this.padding:[this.padding,this.padding],h=u.map(function(e){return e*t.fontSize*n}),l=[this.offsetX,this.offsetY].map(function(e){return e*t.fontSize*n}),d=this.text.split("\n"),p="".concat(this.fontWeight," ").concat(this.fontSize,"px ").concat(this.fontFace);r.font=p;var y=Math.max.apply(Math,f(d.map(function(t){return r.measureText(t).width}))),b=this.fontSize*d.length,g=y+2*i[0]+2*h[0],v=b+2*i[1]+2*h[1];if(e.width=g+Math.abs(l[0]),e.height=v+Math.abs(l[1]),r.translate.apply(r,f(l.map(function(t){return Math.max(0,t)}))),this.borderWidth){if(r.strokeStyle=this.borderColor,i[0]){var _=i[0]/2;r.lineWidth=i[0],r.beginPath(),r.moveTo(_,a[0]),r.lineTo(_,v-a[3]),r.moveTo(g-_,a[1]),r.lineTo(g-_,v-a[2]),r.stroke()}if(i[1]){var m=i[1]/2;r.lineWidth=i[1],r.beginPath(),r.moveTo(Math.max(i[0],a[0]),m),r.lineTo(g-Math.max(i[0],a[1]),m),r.moveTo(Math.max(i[0],a[3]),v-m),r.lineTo(g-Math.max(i[0],a[2]),v-m),r.stroke()}if(this.borderRadius){var C=Math.max.apply(Math,f(i)),k=C/2;r.lineWidth=C,r.beginPath(),[!!a[0]&&[a[0],k,k,a[0]],!!a[1]&&[g-a[1],g-k,k,a[1]],!!a[2]&&[g-a[2],g-k,v-k,v-a[2]],!!a[3]&&[a[3],k,v-k,v-a[3]]].filter(function(t){return t}).forEach(function(t){var e=s(t,4),n=e[0],o=e[1],i=e[2],a=e[3];r.moveTo(n,i),r.quadraticCurveTo(o,i,o,a)}),r.stroke()}}this.backgroundColor&&(r.fillStyle=this.backgroundColor,this.borderRadius?(r.beginPath(),r.moveTo(i[0],a[0]),[[i[0],a[0],g-a[1],i[1],i[1],i[1]],[g-i[0],g-i[0],g-i[0],i[1],a[1],v-a[2]],[g-i[0],g-a[2],a[3],v-i[1],v-i[1],v-i[1]],[i[0],i[0],i[0],v-i[1],v-a[3],a[0]]].forEach(function(t){var e=s(t,6),n=e[0],o=e[1],i=e[2],a=e[3],f=e[4],u=e[5];r.quadraticCurveTo(n,a,o,f),r.lineTo(i,u)}),r.closePath(),r.fill()):r.fillRect(i[0],i[1],g-2*i[0],v-2*i[1])),r.translate.apply(r,f(i)),r.translate.apply(r,f(h)),r.font=p,r.fillStyle=this.color,r.textBaseline="bottom";var S=this.strokeWidth>0;S&&(r.lineWidth=this.strokeWidth*this.fontSize/10,r.strokeStyle=this.strokeColor),d.forEach(function(e,n){var o=(y-r.measureText(e).width)/2,i=(n+1)*t.fontSize;S&&r.strokeText(e,o,i),r.fillText(e,o,i)}),this.material.map&&this.material.map.dispose(),(this.material.map=new c.CanvasTexture(e)).colorSpace=c.SRGBColorSpace;var x=this.textHeight*d.length+2*o[1]+2*u[1]+Math.abs(this.offsetY);this.scale.set(x*e.width/e.height,x,0)}},{key:"clone",value:function(){return new this.constructor(this.text,this.textHeight,this.color).copy(this)}},{key:"copy",value:function(t){return c.Sprite.prototype.copy.call(this,t),this.color=t.color,this.backgroundColor=t.backgroundColor,this.padding=t.padding,this.borderWidth=t.borderWidth,this.borderColor=t.borderColor,this.offsetX=t.offsetX,this.offsetY=t.offsetY,this.fontFace=t.fontFace,this.fontSize=t.fontSize,this.fontWeight=t.fontWeight,this.strokeWidth=t.strokeWidth,this.strokeColor=t.strokeColor,this}}])}(c.Sprite);return l});