Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vasturiano/three-spritetext
A sprite based text component for ThreeJS
https://github.com/vasturiano/three-spritetext
sprite text threejs
Last synced: 14 days ago
JSON representation
A sprite based text component for ThreeJS
- Host: GitHub
- URL: https://github.com/vasturiano/three-spritetext
- Owner: vasturiano
- License: mit
- Created: 2018-03-01T09:32:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-04T00:09:08.000Z (9 months ago)
- Last Synced: 2024-09-09T13:55:25.001Z (2 months ago)
- Topics: sprite, text, threejs
- Language: JavaScript
- Homepage: https://vasturiano.github.io/three-spritetext/example/basic/
- Size: 306 KB
- Stars: 329
- Watchers: 6
- Forks: 46
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
three-spritetext
==============
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
A sprite based text component for [ThreeJS](https://threejs.org/). The text is drawn to canvas, converted into a [Texture](https://threejs.org/docs/#api/textures/Texture) and then used as a material on a [Sprite](https://threejs.org/docs/#api/objects/Sprite).
Because a sprite is being used, the text will always face the camera, and has its orientation fixed relative to the camera.
## Quick start
```js
import SpriteText from 'three-spritetext';
```
or using a *script* tag
```html
```
then
```js
const myText = new SpriteText('My text');
const myScene = new THREE.Scene();
myScene.add(myText);
```
## API reference
### Constructor
SpriteText ([text, textHeight, color])
### Properties
| Property | Description | Default |
| --- | --- | :--: |
| text | The text to be displayed on the sprite. Supports center aligned multi-lines, using the `\n` character to define line breaks. ||
| textHeight | The height of the text. | `10` |
| color | The fill color of the text. | `white` |
| backgroundColor | The canvas background color. A falsy value makes the canvas transparent. | `false` |
| strokeWidth | The width of the text stroke, proportional to the text size. A value of `0` disables stroking. | `0` |
| strokeColor | The color of the text stroke. | `white` |
| fontFace | The font type of the text. | `Arial` |
| fontSize | The resolution of the text, in terms of vertical number of pixels. Lower values may cause text to look blurry. Higher values will yield sharper text, at the cost of performance. | `90` |
| fontWeight | The weight (or boldness) of the font. The weights available depend on the font-family you are using. | `normal` |
| padding | The amount of padding between the text and the canvas edge. Supports either single values, or a tuple with two values representing horizontal and vertical padding. | `0` |
| borderWidth | The size of the border around the canvas. Supports either single values, or a tuple with two values representing horizontal and vertical border size. | `0` |
| borderRadius | The corner radius of the border. Supports either single values, or an array of four values representing the four corners in order: top-left, top-right, bottom-right, bottom-left. | `0` |
| borderColor | The color of the border. | `white` |
## Giving Back
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url)!
[npm-img]: https://img.shields.io/npm/v/three-spritetext
[npm-url]: https://npmjs.org/package/three-spritetext
[build-size-img]: https://img.shields.io/bundlephobia/minzip/three-spritetext
[build-size-url]: https://bundlephobia.com/result?p=three-spritetext
[npm-downloads-img]: https://img.shields.io/npm/dt/three-spritetext
[npm-downloads-url]: https://www.npmtrends.com/three-spritetext