@seregpie/three.text-texture - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

index.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("three")):"function"==typeof define&&define.amd?define(["three"],e):((t=t||self).THREE=t.THREE||{},t.THREE.TextTexture=e(t.THREE))}(this,(function(t){"use strict";function e(t,e,i,n,r){return[i,n,r,e+"px",t].join(" ")}var i=function(i){function n(e){void 0===e&&(e={});var n=e.align;void 0===n&&(n="center");var r=e.fillStyle;void 0===r&&(r="#fff");var o=e.fontFamily;void 0===o&&(o="sans-serif");var a=e.fontSize;void 0===a&&(a=16);var h=e.fontStyle;void 0===h&&(h="normal");var s=e.fontVariant;void 0===s&&(s="normal");var l=e.fontWeight;void 0===l&&(l="normal");var f=e.lineGap;void 0===f&&(f=.15);var d=e.padding;void 0===d&&(d=.25);var c=e.strokeStyle;void 0===c&&(c="#000");var g=e.strokeWidth;void 0===g&&(g=0);var u=e.text;void 0===u&&(u=""),i.call(this,document.createElement("canvas"),void 0,void 0,void 0,t.LinearFilter,t.LinearFilter),Object.assign(this,{_align:n,_fillStyle:r,_fontFamily:o,_fontSize:a,_fontStyle:h,_fontVariant:s,_fontWeight:l,_lineGap:f,_padding:d,_strokeStyle:c,_strokeWidth:g,_text:u,needsRedraw:!0})}i&&(n.__proto__=i),n.prototype=Object.create(i&&i.prototype),n.prototype.constructor=n;var r={lines:{configurable:!0},textWidth:{configurable:!0},textHeight:{configurable:!0},width:{configurable:!0},height:{configurable:!0}};return r.lines.get=function(){var t=this.text;return t?t.split("\n"):[]},r.textWidth.get=function(){var t=this.fontFamily,i=this.fontStyle,n=this.fontVariant,r=this.fontWeight,o=this.lines;if(o.length){var a=document.createElement("canvas").getContext("2d");return a.font=e(t,1,i,n,r),o.map((function(t){return a.measureText(t).width})).reduce((function(t,e){return Math.max(t,e)}))}return 0},r.textHeight.get=function(){var t=this.lineGap,e=this.lines;return e.length?e.length+t*(e.length-1):0},r.width.get=function(){var t=this.padding;return 2*(t+=this.strokeWidth/2)+this.textWidth},r.height.get=function(){var t=this.padding;return 2*(t+=this.strokeWidth/2)+this.textHeight},Object.defineProperties(n.prototype,r),n}(t.Texture);var n=new t.Vector3,r=new t.Vector3,o=new t.Vector3;var a={computeAndSetOptimalFontSize:function(){for(var t,e=[],i=arguments.length;i--;)e[i]=arguments[i];this.fontSize=(t=this).computeOptimalFontSize.apply(t,e)},computeOptimalFontSize:function(e,i,a,h){var s=this.height,l=this.width;if(l&&s){var f=(i.capabilities||{}).maxTextureSize||1/0;e.getWorldPosition(r),a.getWorldPosition(n);var d=r.distanceTo(n);if(a.isPerspectiveCamera&&(d*=2*Math.tan(t.Math.degToRad(a.fov)/2)),(a.isPerspectiveCamera||a.isOrthographicCamera)&&(d/=a.zoom),d){e.getWorldScale(o);var c=o.y*i.domElement.offsetHeight/d/s;return h&&(c=t.Math.ceilPowerOfTwo(c)),s*=c,((l*=c)>f||s>f)&&(c*=f/Math.max(l,s),h&&(c=t.Math.floorPowerOfTwo(c))),c}}return 0},isTextTexture:!0,redraw:function(){if(this.needsRedraw){var t=this.image;if(t){var i=this.fontSize,n=this.height,r=this.width,o=t.getContext("2d");if(o.clearRect(0,0,t.width,t.height),n*=i,(r*=i)&&n){t.width=r,t.height=n;var a,h=this.align,s=this.fillStyle,l=this.fontFamily,f=this.fontStyle,d=this.fontVariant,c=this.fontWeight,g=this.lineGap,u=this.lines,v=this.padding,p=this.strokeStyle,m=this.strokeWidth;switch(v+=m/2,m*=i,g*=i,v*=i,o.font=e(l,i,f,d,c),h){case"left":o.textAlign="left",a=v;break;case"right":o.textAlign="right",a=r-v;break;case"center":o.textAlign="center",a=r/2}o.textBaseline="top";var y=v;o.fillStyle=s,o.miterLimit=1,o.lineWidth=m,o.strokeStyle=p,u.forEach((function(t){m&&o.strokeText(t,a,y),o.fillText(t,a,y),y+=i+g}))}else t.width=t.height=1;this.needsRedraw=!1,this.needsUpdate=!0}}}},h=i.prototype;return Object.entries({_align:"align",_fillStyle:"fillStyle",_fontFamily:"fontFamily",_fontSize:"fontSize",_fontStyle:"fontStyle",_fontVariant:"fontVariant",_fontWeight:"fontWeight",_lineGap:"lineGap",_padding:"padding",_strokeStyle:"strokeStyle",_strokeWidth:"strokeWidth",_text:"text"}).forEach((function(t){var e=t[0],i=t[1];Object.defineProperty(h,i,{get:function(){return this[e]},set:function(t){this[e]!==t&&(this[e]=t,this.needsRedraw=!0)}})})),Object.assign(h,a),i}));
+!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).THREE=t.THREE||{},t.THREE.TextTexture=e(t.THREE))}(this,(function(t){"use strict";let e=class extends t.Texture{constructor(){super(document.createElement("canvas"));let e=null,i=()=>e||(e=this.createDrawable()),n=()=>i().width,o=()=>i().height,r=!0,a=1,l=()=>t.MathUtils.ceilPowerOfTwo(n()*a),s=()=>t.MathUtils.ceilPowerOfTwo(o()*a),h=t=>{if(a!==t){let e=l(),i=s();a=t;let n=l(),o=s();n===e&&o===i||(r=!0)}},f=(()=>{let e=new t.Vector3,i=new t.Vector3,r=new t.Vector3;return(t,a,l)=>{let s=n(),h=o();if(s&&h){t.getWorldPosition(i),l.getWorldPosition(e);let n=i.distanceTo(e);if(l.isPerspectiveCamera&&(n*=2*Math.tan(THREE.Math.degToRad(l.fov)/2)),(l.isPerspectiveCamera||l.isOrthographicCamera)&&(n/=l.zoom),n){var f,c;t.getWorldScale(r);let e=null!==(f=null===(c=a.capabilities)||void 0===c?void 0:c.maxTextureSize)&&void 0!==f?f:1/0;return Math.min(Math.max(r.x/n*(a.domElement.offsetWidth/s),r.y/n*(a.domElement.offsetHeight/h)),e/s,e/h)}}return 0}})();Object.defineProperties(this,{width:{get:n},height:{get:o},pixelRatio:{get:()=>a,set:h},needsRedraw:{set(t){t&&(r=!0,e=null)}}}),Object.assign(this,{redraw(){if(r){let t=this.image,e=t.getContext("2d");e.clearRect(0,0,t.width,t.height),t.width=l(),t.height=s(),t.width&&t.height?(e.save(),e.scale(t.width/n(),t.height/o()),((...t)=>{i().draw(...t)})(e),e.restore()):t.width=t.height=1,r=!1,this.needsUpdate=!0}},setOptimalPixelRatio(...t){h(f(...t))}})}};e.prototype.isDynamicTexture=!0;let i=class extends e{constructor({alignment:t="center",color:e="#fff",fontFamily:i="sans-serif",fontSize:n=16,fontStyle:o="normal",fontVariant:r="normal",fontWeight:a="normal",lineGap:l=1/4,padding:s=.5,strokeColor:h="#fff",strokeWidth:f=0,text:c=""}={}){super(),Object.entries({alignment:t,color:e,fontFamily:i,fontSize:n,fontStyle:o,fontVariant:r,fontWeight:a,lineGap:l,padding:s,strokeColor:h,strokeWidth:f,text:c}).forEach((([t,e])=>{Object.defineProperty(this,t,{get:()=>e,set(t){e!==t&&(e=t,this.needsRedraw=!0)}})}))}get font(){return function(t,e,i,n,o){let r=document.createElement("span");return r.style.font="1px serif",r.style.fontFamily=t,r.style.fontSize="".concat(e,"px"),r.style.fontStyle=i,r.style.fontVariant=n,r.style.fontWeight=o,r.style.font}(this.fontFamily,this.fontSize,this.fontStyle,this.fontVariant,this.fontWeight)}checkFontFace(){try{return document.fonts.check(this.font)}catch{}return!0}async loadFontFace(){try{return await document.fonts.load(this.font)}catch{}}createDrawable(){let{alignment:t,color:e,font:i,fontSize:n,lineGap:o,padding:r,strokeColor:a,strokeWidth:l,text:s}=this;r*=n,o*=n,l*=n;let h=s?s.split("\n"):[],f=h.length,c=n+o,d=f?(()=>{let t=document.createElement("canvas").getContext("2d");return t.font=i,Math.max(...h.map((e=>t.measureText(e).width)))})():0,u=r+l/2,m=d+2*u;return{width:m,height:(f?n+c*(f-1):0)+2*u,draw(o){let r,s=u+n/2;Object.assign(o,{fillStyle:e,font:i,lineWidth:l,miterLimit:1,strokeStyle:a,textAlign:(()=>{switch(t){case"left":return r=u,"left";case"right":return r=m-u,"right"}return r=m/2,"center"})(),textBaseline:"middle"}),h.forEach((t=>{o.fillText(t,r,s),l&&o.strokeText(t,r,s),s+=c}))}}}};return i.prototype.isTextTexture=!0,i}));

package.json

 {
 	"name": "@seregpie/three.text-texture",
-	"version": "2.0.1",
+	"version": "3.0.0",
 	"description": "A texture with the drawn text.",
 	"keywords": [
-		"3d",
-		"canvas",
-		"class",
-		"font",
-		"image",
-		"material",
-		"mesh",
-		"plugin",
-		"sprite",
 		"text",
@@ -29,10 +20,13 @@ "texture",
 	"devDependencies": {
-		"rollup": "^1.26.3",
-		"rollup-plugin-buble": "^0.19.8",
-		"rollup-plugin-node-resolve": "^5.2.0",
-		"rollup-plugin-terser": "^5.1.2"
+		"@babel/core": "^7.11.6",
+		"@babel/preset-env": "^7.11.5",
+		"@rollup/plugin-babel": "^5.2.1",
+		"eslint": "^7.11.0",
+		"eslint-config-seregpie": "^1.0.1",
+		"rollup": "^2.29.0",
+		"rollup-plugin-terser": "^7.0.2"
 	},
 	"peerDependencies": {
-		"three": ">=0.86"
+		"three": ">=0.113"
 	}
 }

README.md

 # THREE.TextTexture
 
-`class THREE.TextTexture extends THREE.Texture`
+`class THREE.TextTexture extends THREE.CanvasTexture`
 
-An instance of `TextTexture` is a texture with the drawn text.
+A texture with the drawn text.
 
@@ -15,3 +15,3 @@ ## setup
 
-### ES module
+---
 
@@ -35,3 +35,4 @@ ```javascript
 let texture = new THREE.TextTexture({
-  fillStyle: '#24ff00',
+  alignment: 'left',
+  color: '#24ff00',
   fontFamily: '"Times New Roman", Times, serif',
@@ -49,7 +50,4 @@ fontSize: 32,
 let sprite = new THREE.Sprite(material);
-let spriteScale = 10;
 texture.redraw();
-sprite.scale
-  .set(texture.image.width / texture.image.height, 1, 1)
-  .multiplyScalar(spriteScale);
+sprite.scale.setY(texture.height / texture.width);
 scene.add(sprite);
@@ -64,2 +62,3 @@ ```
 texture.fontFamily = 'Arial, Helvetica, sans-serif';
+texture.fontStyle = 'normal';
 texture.text = [
@@ -72,5 +71,3 @@ 'When this blazing sun is gone,',
 texture.redraw();
-sprite.scale
-  .set(texture.image.width / texture.image.height, 1, 1)
-  .multiplyScalar(spriteScale);
+sprite.scale.setY(texture.height / texture.width);
 ```
@@ -84,12 +81,12 @@
 new THREE.TextTexture({
-  align: 'center',
-  fillStyle: '#fff',
+  alignment: 'center',
+  color: '#fff',
   fontFamily: 'sans-serif',
-  fontSize: 16,
+  fontSize: 1,
   fontStyle: 'normal',
   fontVariant: 'normal',
   fontWeight: 'normal',
-  lineGap: 0.15,
-  padding: 0.25,
-  strokeStyle: '#000',
+  lineGap: 0.25,
+  padding: 0.5,
+  strokeColor: '#fff',
   strokeWidth: 0,
@@ -102,4 +99,4 @@ text: '',
 | ---: | :--- |
-| `align` | The horizontal text alignment. Possible values are `'center'`, `'left'` and `'right'`. |
-| `fillStyle` | The fill color or style. |
+| `alignment` | The horizontal text alignment. Possible values are `'center'`, `'left'` and `'right'`. |
+| `color` | The color. |
 | `fontFamily` | The font family. |
@@ -112,3 +109,3 @@ | `fontSize` | The font size. |
 | `padding` | The space around the text. The value is relative to the font size. |
-| `strokeStyle` | The stroke color or style. |
+| `strokeColor` | The stroke color. |
 | `strokeWidth` | The stroke width. The value is relative to the font size. |
@@ -137,9 +134,9 @@ | `text` | The text. |
 
-`.fillStyle`
+`.color`
 
 `.strokeWidth`
 
-`.strokeStyle`
+`.strokeColor`
 
-`.align`
+`.alignment`
 
@@ -152,7 +149,7 @@ `.lineGap`
 
-`.lines`
+`.font`
 
 *read-only*
 
-The text splitted by the newline character.
+The font specification using the CSS value syntax.
 
@@ -165,3 +162,3 @@ ---
 
-The width. The value is relative to the font size.
+The width of the image.
 
@@ -174,4 +171,10 @@ ---
 
-The height. The value is relative to the font size.
+The height of the image.
 
+---
+
+`.pixelRatio = 1`
+
+The pixel ratio of the image.
+
 ### methods
@@ -185,23 +188,31 @@
 
-`.computeOptimalFontSize(object, renderer, camera, needsPowerOfTwo = false)`
+`.checkFontFace()`
 
-Computes the optimal font size depending on the distance of the object to the camera and the size of the renderer DOM element.
+Checks whether the font face has been loaded and is available.
 
-| argument | description |
-| ---: | :--- |
-| `object` | An instance of `THREE.Object3D`. |
-| `renderer` | An instance with a `domElement` property. |
-| `camera` | An instance of `THREE.Camera`. |
-| `needsPowerOfTwo` | If `true`, the font size is rounded to the power of two. |
+Returns a boolean.
 
-Returns the computed font size.
+---
 
+`.loadFontFace()`
+
+Forces the font face to be loaded.
+
+Returns a promise.
+
 ---
 
-`.computeAndSetOptimalFontSize(...args)`
+`.setOptimalPixelRatio(object, renderer, camera)`
 
-Sets `fontSize` to the value returned by the function `computeOptimalFontSize`.
+Set the optimal pixel ratio depending on the distance of the object to the camera and the size of the renderer DOM element.
 
+| argument | description |
+| ---: | :--- |
+| `object` | An instance of `THREE.Object3D`. |
+| `renderer` | A renderer. |
+| `camera` | An instance of `THREE.Camera`. |
+
 ## see also
 
 - [THREE.TextSprite](https://github.com/SeregPie/THREE.TextSprite)
+- [THREE.TextPlane](https://github.com/SeregPie/THREE.TextPlane)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

206

increased by5.64%

Worsened metrics

Total package byte prevSize

8756

decreased by-9.74%

Dev dependency count

7

increased by75%

Lines of code

13

decreased by-18.75%

No dependency changes