# @seregpie/three.text-texture

> A texture with the drawn text.

Latest version **3.2.1** (published 2020-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @seregpie/three.text-texture
pnpm add @seregpie/three.text-texture
yarn add @seregpie/three.text-texture
bun add @seregpie/three.text-texture
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.1 |
| Published | 2020-12-22 |
| First published | 2019-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 70 |
| Author | Sergej Sintschilin |
| Maintainers | seregpie |
| Keywords | text, texture, three |

## Links

- npm: https://www.npmjs.com/package/@seregpie/three.text-texture
- Repository: https://github.com/SeregPie/THREE.TextTexture
- Homepage: https://github.com/SeregPie/THREE.TextTexture#readme
- Issues: https://github.com/SeregPie/THREE.TextTexture/issues
- npm.io page: https://npm.io/package/@seregpie/three.text-texture

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 3.2.1 (latest) — 2020-12-22
- 3.2.0 — 2020-10-16
- 3.1.4 — 2020-10-15
- 3.1.3 — 2020-10-15
- 3.1.2 — 2020-10-12
- 3.1.1 — 2020-10-12
- 3.1.0 — 2020-10-12
- 3.0.0 — 2020-10-11
- 2.0.1 — 2019-11-05
- 1.1.0 — 2019-10-14
- 1.0.0 — 2019-10-01

## README

# THREE.TextTexture

`class THREE.TextTexture extends THREE.Texture`

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',
  backgroundColor = 'rgba(0,0,0,0)',
  color: '#fff',
  fontFamily: 'sans-serif',
  fontSize: 16,
  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'`. |
| `backgroundColor` | The background color. |
| `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`

`.backgroundColor`

---

`.lines`

*read-only*

The text split by the new line character.

---

`.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)

---
_Source: https://npm.io/package/@seregpie/three.text-texture · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._