@seregpie/three.text-texture
Advanced tools
@seregpie/three.text-texture - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
@@ -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(){return document.createElement("canvas")}function n(t,e,n,i,r){return[n,i,r,e+"px",t].join(" ")}function i(t,e,i,r){var o=n(t,1,e,i,r);return document.fonts.load(o)}function r(){var t=this;return Promise.resolve().then((function(){if(t.needsRedraw){var e=t.image;if(e){var i=t,r=i.align,o=i.fillStyle,a=i.fontFamily,l=i.fontSize,f=i.fontStyle,s=i.fontVariant,d=i.fontWeight,c=i.height,h=i.lineGap,u=i.lines,v=i.loadFontFace,g=i.padding,p=i.strokeStyle,y=i.strokeWidth;return Promise.resolve().then((function(){return v(a,f,s,d)})).then((function(){var i=e.getContext("2d");i.clearRect(0,0,e.width,e.height),c*=l,h*=l,g*=l,y*=l;var v=n(a,l,f,s,d),_=2*g+y;if(u.length&&(i.font=v,_+=u.map((function(t){return i.measureText(t).width})).reduce((function(t,e){return Math.max(t,e)}))),_&&c){e.width=_,e.height=c,i.font=v,i.textBaseline="top";var m,x=g+y/2;switch(r){case"left":i.textAlign="left",m=x;break;case"right":i.textAlign="right",m=_-x;break;case"center":i.textAlign="center",m=_/2}i.fillStyle=o,i.miterLimit=1,i.lineWidth=y,i.strokeStyle=p,u.forEach((function(t){y&&i.strokeText(t,m,x),i.fillText(t,m,x),x+=l+h}))}else e.width=e.height=1;t.needsRedraw=!1,t.needsUpdate=!0}))}}}))}var o=function(n){function o(o){void 0===o&&(o={});var a=o.align;void 0===a&&(a="center");var l=o.createCanvas;void 0===l&&(l=e);var f=o.fillStyle;void 0===f&&(f="#fff");var s=o.fontFamily;void 0===s&&(s="sans-serif");var d=o.fontSize;void 0===d&&(d=16);var c=o.fontStyle;void 0===c&&(c="normal");var h=o.fontVariant;void 0===h&&(h="normal");var u=o.fontWeight;void 0===u&&(u="normal");var v=o.lineGap;void 0===v&&(v=.15);var g=o.loadFontFace;void 0===g&&(g=i);var p=o.padding;void 0===p&&(p=.25);var y=o.strokeStyle;void 0===y&&(y="#000");var _=o.strokeWidth;void 0===_&&(_=0);var m,x,S,k,w,F=o.text;void 0===F&&(F=""),n.call(this,l(),void 0,void 0,void 0,t.LinearFilter,t.LinearFilter),Object.assign(this,{_align:a,_fillStyle:f,_fontFamily:s,_fontSize:d,_fontStyle:c,_fontVariant:h,_fontWeight:u,_lineGap:v,_padding:p,_strokeStyle:y,_strokeWidth:_,_text:F,createCanvas:l,loadFontFace:g,needsRedraw:!0,redraw:(m=r,x=1,w=Promise.resolve(),function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return S=m.bind.apply(m,[this].concat(t)),k||(k=new Promise((function(t,e){w.finally((function(){setTimeout((function(){Promise.resolve().then((function(){try{return S()}finally{w=k,k=null}})).then(t).catch(e)}),x)}))}))),k})}),this.redraw()}n&&(o.__proto__=n),o.prototype=Object.create(n&&n.prototype),o.prototype.constructor=o;var a={lines:{configurable:!0},height:{configurable:!0}};return a.lines.get=function(){var t=this.text;return t?t.split("\n"):[]},a.height.get=function(){var t=this.lineGap,e=this.lines,n=2*this.padding+this.strokeWidth;return e.length&&(n+=e.length+t*(e.length-1)),n},Object.defineProperties(o.prototype,a),o}(t.Texture);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],n=t[1];Object.defineProperty(o.prototype,n,{get:function(){return this[e]},set:function(t){this[e]!==t&&(this[e]=t,this.needsRedraw=!0,this.redraw())}})})),o.prototype.isTextTexture=!0,o})); | ||
| !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(){}function n(t){return new Promise((function(e){setTimeout(e,t)}))}function i(t){return new Promise((function(e){e(t())}))}function r(){return document.createElement("canvas")}function o(t,e,n,i,r){return[n,i,r,e+"px",t].join(" ")}function a(t,e,n,i){var r=o(t,1,e,n,i);return document.fonts.load(r)}function f(){var t=this;return i((function(){if(t.needsRedraw){var e=t.image;if(e){var n=t,r=n.align,a=n.fillStyle,f=n.fontFamily,l=n.fontSize,s=n.fontStyle,d=n.fontVariant,c=n.fontWeight,u=n.height,h=n.lineGap,v=n.lines,g=n.loadFontFace,p=n.padding,y=n.strokeStyle,m=n.strokeWidth;return i((function(){return g(f,s,d,c)})).then((function(){var n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),u*=l,h*=l,p*=l,p+=(m*=l)/2;var i=o(f,l,s,d,c),g=2*p;if(v.length&&(n.font=i,g+=v.map((function(t){return n.measureText(t).width})).reduce((function(t,e){return Math.max(t,e)}))),g&&u){var _;switch(e.width=g,e.height=u,n.font=i,r){case"left":n.textAlign="left",_=p;break;case"right":n.textAlign="right",_=g-p;break;case"center":n.textAlign="center",_=g/2}n.textBaseline="top";var S=p;n.fillStyle=a,n.miterLimit=1,n.lineWidth=m,n.strokeStyle=y,v.forEach((function(t){m&&n.strokeText(t,_,S),n.fillText(t,_,S),S+=l+h}))}else e.width=e.height=1;t.needsRedraw=!1,t.needsUpdate=!0}))}}}))}var l=function(o){function l(l){void 0===l&&(l={});var s=l.align;void 0===s&&(s="center");var d=l.createCanvas;void 0===d&&(d=r);var c=l.fillStyle;void 0===c&&(c="#fff");var u=l.fontFamily;void 0===u&&(u="sans-serif");var h=l.fontSize;void 0===h&&(h=16);var v=l.fontStyle;void 0===v&&(v="normal");var g=l.fontVariant;void 0===g&&(g="normal");var p=l.fontWeight;void 0===p&&(p="normal");var y=l.lineGap;void 0===y&&(y=.15);var m=l.loadFontFace;void 0===m&&(m=a);var _=l.padding;void 0===_&&(_=.25);var S=l.strokeStyle;void 0===S&&(S="#000");var x=l.strokeWidth;void 0===x&&(x=0);var w,k,T,W,F,E,b=l.text;void 0===b&&(b=""),o.call(this,d(),void 0,void 0,void 0,t.LinearFilter,t.LinearFilter),Object.assign(this,{_align:s,_fillStyle:c,_fontFamily:u,_fontSize:h,_fontStyle:v,_fontVariant:g,_fontWeight:p,_lineGap:y,_padding:_,_strokeStyle:S,_strokeWidth:x,_text:b,createCanvas:d,loadFontFace:m,needsRedraw:!0,redraw:(w=f,k=1,E=Promise.resolve(),function(){for(var t=this,r=[],o=arguments.length;o--;)r[o]=arguments[o];return i((function(){return W=t,F=r,T||(T=new Promise((function(t){E=E.then((function(){return n(k)})).then((function(){try{var e=w.apply(W,F);return t(e),e}finally{T=null}})).catch(e)}))),T}))})}),this.redraw()}o&&(l.__proto__=o),l.prototype=Object.create(o&&o.prototype),l.prototype.constructor=l;var s={lines:{configurable:!0},height:{configurable:!0}};return s.lines.get=function(){var t=this.text;return t?t.split("\n"):[]},s.height.get=function(){var t=this.lineGap,e=this.lines,n=this.padding,i=2*(n+=this.strokeWidth/2);return e.length&&(i+=e.length+t*(e.length-1)),i},Object.defineProperties(l.prototype,s),l}(t.Texture),s=new t.Vector3,d=new t.Vector3,c=new t.Vector3;var u={computeOptimalFontSize:function(e,n,i){var r=this.height;if(r){var o=e.getWorldPosition(d).distanceTo(i.getWorldPosition(s));if(i.isPerspectiveCamera&&(o*=2*Math.tan(t.Math.degToRad(i.fov)/2)),(i.isPerspectiveCamera||i.isOrthographicCamera)&&(o/=i.zoom),o)return Math.round(e.getWorldScale(c).y*n.domElement.offsetHeight/o/r)}return 0},isTextTexture:!0},h=l.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],n=t[1];Object.defineProperty(h,n,{get:function(){return this[e]},set:function(t){this[e]!==t&&(this[e]=t,this.needsRedraw=!0,this.redraw())}})})),Object.assign(h,u),l})); |
| { | ||
| "name": "@seregpie/three.text-texture", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "A texture with the drawn text.", | ||
@@ -30,9 +30,10 @@ "keywords": [ | ||
| "devDependencies": { | ||
| "rollup": "^1.22.0", | ||
| "rollup": "^1.23.1", | ||
| "rollup-plugin-buble": "^0.19.8", | ||
| "rollup-plugin-node-resolve": "^5.2.0", | ||
| "rollup-plugin-terser": "^5.1.2" | ||
| }, | ||
| "peerDependencies": { | ||
| "three": "^0.109.0" | ||
| "three": ">=0.86" | ||
| } | ||
| } |
149
README.md
@@ -7,6 +7,2 @@ # THREE.TextTexture | ||
| ## demo | ||
| [Try it out!](https://seregpie.github.io/THREE.TextTexture/) | ||
| ## setup | ||
@@ -20,3 +16,3 @@ | ||
| ### es6 | ||
| ### ES module | ||
@@ -27,8 +23,2 @@ ```javascript | ||
| ### node | ||
| ```javascript | ||
| let TextTexture = require('@seregpie/three.text-texture'); | ||
| ``` | ||
| ### browser | ||
@@ -43,2 +33,45 @@ | ||
| ## usage | ||
| ```javascript | ||
| let texture = new THREE.TextTexture({ | ||
| fillStyle: '#24ff00', | ||
| fontFamily: '"Times New Roman", Times, serif', | ||
| fontSize: 32, | ||
| fontStyle: 'italic', | ||
| text: [ | ||
| 'Twinkle, twinkle, little star,', | ||
| 'How I wonder what you are!', | ||
| 'Up above the world so high,', | ||
| 'Like a diamond in the sky.', | ||
| ].join('\n'), | ||
| }); | ||
| let material = new THREE.SpriteMaterial({map: texture}); | ||
| let sprite = new THREE.Sprite(material); | ||
| let spriteScale = 10; | ||
| await texture.redraw(); | ||
| sprite.scale | ||
| .set(texture.image.width / texture.image.height, 1, 1) | ||
| .multiplyScalar(spriteScale); | ||
| scene.add(sprite); | ||
| ``` | ||
| --- | ||
| Update the texture. | ||
| ```javascript | ||
| texture.fontFamily = 'Arial, Helvetica, sans-serif'; | ||
| texture.text = [ | ||
| 'When this blazing sun is gone,', | ||
| 'When he nothing shines upon,', | ||
| 'Then you show your little light,', | ||
| 'Twinkle, twinkle, through the night.', | ||
| ].join('\n'); | ||
| await texture.redraw(); | ||
| sprite.scale | ||
| .set(texture.image.width / texture.image.height, 1, 1) | ||
| .multiplyScalar(spriteScale); | ||
| ``` | ||
| ## members | ||
@@ -84,22 +117,10 @@ | ||
| --- | ||
| Provide a custom `loadFontFace` function to support the older browsers. | ||
| ```javascript | ||
| let texture = new THREE.TextTexture({ | ||
| fontFamily: '"Times New Roman", Times, serif', | ||
| fontSize: 32, | ||
| fontStyle: 'italic', | ||
| text: [ | ||
| 'Twinkle, twinkle, little star,', | ||
| 'How I wonder what you are!', | ||
| 'Up above the world so high,', | ||
| 'Like a diamond in the sky.', | ||
| ].join('\n'), | ||
| }); | ||
| let material = new THREE.SpriteMaterial({ | ||
| color: 0xffffbb, | ||
| map: texture, | ||
| }); | ||
| let sprite = new THREE.Sprite(material); | ||
| await texture.redraw(); | ||
| sprite.scale.setX(texture.image.width / texture.image.height).multiplyScalar(10); | ||
| scene.add(sprite); | ||
| loadFontFace(family, style, variant, weight) { | ||
| return (new FontFaceObserver(family, {style, weight})).load(); | ||
| } | ||
| ``` | ||
@@ -109,74 +130,52 @@ | ||
| `.text` | ||
| `.isTextTexture = true` | ||
| Used to check whether this is an instance of `TextTexture`. | ||
| --- | ||
| `.lines` | ||
| `.text` | ||
| *read-only* | ||
| The text splitted by the newline character. | ||
| --- | ||
| `.fontFamily` | ||
| --- | ||
| `.fontSize` | ||
| --- | ||
| `.fontWeight` | ||
| --- | ||
| `.fontVariant` | ||
| --- | ||
| `.fontStyle` | ||
| --- | ||
| `.fillStyle` | ||
| --- | ||
| `.strokeWidth` | ||
| --- | ||
| `.strokeStyle` | ||
| --- | ||
| `.align` | ||
| --- | ||
| `.lineGap` | ||
| --- | ||
| `.padding` | ||
| --- | ||
| `.createCanvas` | ||
| `.loadFontFace` | ||
| --- | ||
| `.loadFontFace` | ||
| `.lines` | ||
| *read-only* | ||
| The text splitted by the newline character. | ||
| --- | ||
| Provide a custom `loadFontFace` function to support the older browsers. | ||
| `.height` | ||
| ```javascript | ||
| loadFontFace(family, style, variant, weight) { | ||
| return (new FontFaceObserver(family, {style, weight})).load(); | ||
| } | ||
| ``` | ||
| *read-only* | ||
| The image height. The value is relative to the font size. | ||
| ### methods | ||
@@ -186,6 +185,22 @@ | ||
| Waits until the image is redrawn. The method is throttled and is called when the dependent properties are changed. | ||
| Returns a `Promise` that resolves when the image is redrawn. | ||
| --- | ||
| `.computeOptimalFontSize(object, renderer, camera)` | ||
| Computes the optimal font size 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` | An instance with a `domElement` property. | | ||
| | `camera` | An instance of `THREE.Camera`. | | ||
| Returns the computed font size. | ||
| ## see also | ||
| - [THREE.TextSprite](https://github.com/SeregPie/THREE.TextSprite) |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by17.29%
10031
- Lines of code
- increased by14.29%
16
- Number of lines in readme file
- increased by8.11%
200
Worsened metrics
- Dev dependency count
- increased by33.33%
4
No dependency changes