initial commit

.eslintrc.json

@@ -0,0 +1 @@
+{"extends": "seregpie"}

.gitignore

@@ -0,0 +1 @@
+/node_modules

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-2020 Sergej Sintschilin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,205 @@
+# THREE.TextTexture
+
+`class THREE.TextTexture extends THREE.CanvasTexture`
+
+A texture with the drawn text.
+
+## setup
+
+### npm
+
+```shell
+npm i @seregpie/three.text-texture
+```
+
+---
+
+```javascript
+import TextTexture from '@seregpie/three.text-texture';
+```
+
+### browser
+
+```html
+<script src="https://unpkg.com/three"></script>
+<script src="https://unpkg.com/@seregpie/three.text-texture"></script>
+```
+
+The class is globally available as `THREE.TextTexture`.
+
+## usage
+
+```javascript
+let texture = new THREE.TextTexture({
+  alignment: 'left',
+  color: '#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);
+texture.redraw();
+sprite.scale.setY(texture.height / texture.width);
+scene.add(sprite);
+```
+
+---
+
+Update the texture.
+
+```javascript
+texture.fontFamily = 'Arial, Helvetica, sans-serif';
+texture.fontStyle = 'normal';
+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');
+texture.redraw();
+sprite.scale.setY(texture.height / texture.width);
+```
+
+## members
+
+### constructor
+
+```
+new THREE.TextTexture({
+  alignment: 'center',
+  color: '#fff',
+  fontFamily: 'sans-serif',
+  fontSize: 1,
+  fontStyle: 'normal',
+  fontVariant: 'normal',
+  fontWeight: 'normal',
+  lineGap: 0.25,
+  padding: 0.5,
+  strokeColor: '#fff',
+  strokeWidth: 0,
+  text: '',
+})
+```
+
+| argument | description |
+| ---: | :--- |
+| `alignment` | The horizontal text alignment. Possible values are `'center'`, `'left'` and `'right'`. |
+| `color` | The color. |
+| `fontFamily` | The font family. |
+| `fontSize` | The font size. |
+| `fontStyle` | The font style. |
+| `fontVariant` | The font variant. |
+| `fontWeight` | The font weight. |
+| `lineGap` | The vertical distance between the text lines. The value is relative to the font size. |
+| `padding` | The space around the text. The value is relative to the font size. |
+| `strokeColor` | The stroke color. |
+| `strokeWidth` | The stroke width. The value is relative to the font size. |
+| `text` | The text. |
+
+### properties
+
+`.isTextTexture = true`
+
+Used to check whether this is an instance of `TextTexture`.
+
+---
+
+`.text`
+
+`.fontFamily`
+
+`.fontSize`
+
+`.fontWeight`
+
+`.fontVariant`
+
+`.fontStyle`
+
+`.color`
+
+`.strokeWidth`
+
+`.strokeColor`
+
+`.alignment`
+
+`.lineGap`
+
+`.padding`
+
+---
+
+`.font`
+
+*read-only*
+
+The font specification using the CSS value syntax.
+
+---
+
+`.width`
+
+*read-only*
+
+The width of the image.
+
+---
+
+`.height`
+
+*read-only*
+
+The height of the image.
+
+---
+
+`.pixelRatio = 1`
+
+The pixel ratio of the image.
+
+### methods
+
+`.redraw()`
+
+Redraws the image.
+
+---
+
+`.checkFontFace()`
+
+Checks whether the font face has been loaded and is available.
+
+Returns a boolean.
+
+---
+
+`.loadFontFace()`
+
+Forces the font face to be loaded.
+
+Returns a promise.
+
+---
+
+`.setOptimalPixelRatio(object, renderer, camera)`
+
+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)

package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@seregpie/three.text-texture",
+	"version": "3.0.0",
+	"description": "A texture with the drawn text.",
+	"keywords": [
+		"text",
+		"texture",
+		"three"
+	],
+	"license": "MIT",
+	"author": "Sergej Sintschilin <[email protected]>",
+	"files": [],
+	"main": "index.js",
+	"repository": "github:SeregPie/THREE.TextTexture",
+	"scripts": {
+		"build": "rollup -c",
+		"prepublishOnly": "npm run build"
+	},
+	"devDependencies": {
+		"@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.113"
+	}
+}

rollup.config.js

@@ -0,0 +1,28 @@
+import {terser} from 'rollup-plugin-terser';
+import babel from '@rollup/plugin-babel';
+
+import {main} from './package.json';
+
+let globals = {
+	'three': 'THREE',
+};
+
+export default {
+	external: Object.keys(globals),
+	input: 'src/index.js',
+	plugins: [
+		babel({
+			babelHelpers: 'bundled',
+			presets: [['@babel/preset-env', {
+				targets: ['defaults', 'not IE 11'],
+			}]],
+		}),
+		terser(),
+	],
+	output: {
+		file: main,
+		format: 'umd',
+		name: 'THREE.TextTexture',
+		globals,
+	},
+};