UNPKG

3.21 kBMarkdownView Raw
1# THREE.TextSprite
2
3`class THREE.TextSprite extends THREE.Sprite`
4
5Computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.
6
7## demo
8
9load `index.html`
10
11## dependencies
12
13- [THREE.TextTexture](https://github.com/wgalyen/THREE.TextTexture)
14
15## setup
16
17### npm
18
19```shell
20npm i @bellapps/three.text-sprite
21```
22
23### ES module
24
25```javascript
26import TextSprite from '@bellapps/three.text-sprite';
27```
28
29### browser
30
31```html
32<script src="https://unpkg.com/three"></script>
33<script src="https://unpkg.com/@bellapps/three.text-texture"></script>
34<script src="https://unpkg.com/@bellapps/three.text-sprite"></script>
35```
36
37The class is globally available as `THREE.TextSprite`.
38
39## usage
40
41```javascript
42let sprite = new THREE.TextSprite({
43 fillStyle: '#24ff00',
44 fontFamily: '"Times New Roman", Times, serif',
45 fontSize: 12,
46 fontStyle: 'italic',
47 text: [
48 'Twinkle, twinkle, little star,',
49 'How I wonder what you are!',
50 'Up above the world so high,',
51 'Like a diamond in the sky.',
52 ].join('\n'),
53});
54scene.add(sprite);
55```
56
57---
58
59Update the sprite.
60
61```javascript
62sprite.fontFamily = 'Arial, Helvetica, sans-serif';
63sprite.text = [
64 'When this blazing sun is gone,',
65 'When he nothing shines upon,',
66 'Then you show your little light,',
67 'Twinkle, twinkle, through the night.',
68].join('\n');
69```
70
71## members
72
73### constructor
74
75```
76new THREE.TextSprite({
77 align: 'center',
78 createCanvas() { /*...*/ },
79 fillStyle: '#fff',
80 fontFamily: 'sans-serif',
81 fontSize: 1,
82 fontStyle: 'normal',
83 fontVariant: 'normal',
84 fontWeight: 'normal',
85 lineGap: 0.15,
86 loadFontFace(family, style, variant, weight) { /*...*/ },
87 padding: 0.25,
88 strokeStyle: '#000',
89 strokeWidth: 0,
90 text: '',
91})
92```
93
94| argument | description |
95| ---: | :--- |
96| `align` | The horizontal text alignment. Possible values are `'center'`, `'left'` and `'right'`. |
97| `createCanvas` | A function to create a new `Canvas` instance. |
98| `fillStyle` | The fill color or style. |
99| `fontFamily` | The font family. |
100| `fontSize` | The font size. |
101| `fontStyle` | The font style. |
102| `fontVariant` | The font variant. |
103| `fontWeight` | The font weight. |
104| `lineGap` | The vertical distance between the text lines. The value is relative to the font size. |
105| `loadFontFace` | A function to load a font face. |
106| `padding` | The space around the text. The value is relative to the font size. |
107| `strokeStyle` | The stroke color or style. |
108| `strokeWidth` | The stroke width. The value is relative to the font size. |
109| `text` | The text. |
110
111---
112
113Provide a custom `loadFontFace` function to support the older browsers.
114
115```javascript
116loadFontFace(family, style, variant, weight) {
117 return (new FontFaceObserver(family, {style, weight})).load();
118}
119```
120
121### properties
122
123`.text`
124
125`.fontFamily`
126
127`.fontSize`
128
129`.fontWeight`
130
131`.fontVariant`
132
133`.fontStyle`
134
135`.fillStyle`
136
137`.strokeWidth`
138
139`.strokeStyle`
140
141`.align`
142
143`.lineGap`
144
145`.padding`
146
147`.createCanvas`
148
149`.loadFontFace`
150
151### methods
152
153`.dispose()`
154
155Disposes the texture and the material.
\No newline at end of file