# @seregpie/three.text-plane

> Optimally displays the text as a plane.

Latest version **1.1.0** (published 2020-10-16) · MIT license · 0 weekly downloads

## Install

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

## 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 | 1.1.0 |
| Published | 2020-10-16 |
| First published | 2020-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sergej Sintschilin |
| Maintainers | seregpie |
| Keywords | plane, text, three |

## Links

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

## Dependencies (1)

- [@seregpie/three.text-texture](https://npm.io/package/@seregpie/three.text-texture.md) ^3.2.0

## 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

- 1.1.0 (latest) — 2020-10-16
- 1.0.1 — 2020-10-15
- 1.0.0 — 2020-10-12

## README

# THREE.TextPlane

`class THREE.TextPlane extends THREE.Mesh`

Optimally displays the text as a plane.

## demo

[Try it out!](https://seregpie.github.io/aframe-text-plane/)

## dependencies

- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture)

## setup

### npm

```shell
npm i @seregpie/three.text-plane
```

---

```javascript
import TextPlane from '@seregpie/three.text-plane';
```

### browser

```html
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/@seregpie/three.text-texture"></script>
<script src="https://unpkg.com/@seregpie/three.text-plane"></script>
```

The class is globally available as `THREE.TextPlane`.

## usage

```javascript
let plane = new THREE.TextPlane({
  alignment: 'left',
  color: '#24ff00',
  fontFamily: '"Times New Roman", Times, serif',
  fontSize: 8,
  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'),
});
scene.add(plane);
```

---

Update the plane.

```javascript
plane.fontFamily = 'Arial, Helvetica, sans-serif';
plane.fontStyle = 'normal';
plane.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');
```

## members

### constructor

```
new THREE.TextPlane({
  alignment: 'center',
  backgroundColor = 'rgba(0,0,0,0)',
  color: '#fff',
  fontFamily: 'sans-serif',
  fontSize: 1,
  fontStyle: 'normal',
  fontVariant: 'normal',
  fontWeight: 'normal',
  lineGap: 0.25,
  padding: 0.5,
  strokeColor: '#fff',
  strokeWidth: 0,
  text: '',
}, material)
```

| 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. |
| `material` | An instance of `THREE.Material`. If not provided, a default instance will be created. |

### properties

`.isTextPlane = true`

Used to check whether this is an instance of `TextPlane`.

---

`.text`

`.fontFamily`

`.fontSize`

`.fontWeight`

`.fontVariant`

`.fontStyle`

`.color`

`.strokeWidth`

`.strokeColor`

`.alignment`

`.lineGap`

`.padding`

`.backgroundColor`

### methods

`.dispose()`

Disposes the geometry, the texture and the material.

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