forked from GreggJuanEduardoPH/vue-gl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vgl-text-geometry.js
76 lines (73 loc) · 2.47 KB
/
vgl-text-geometry.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { TextBufferGeometry, BufferGeometry, FontLoader } from 'three';
import VglExtrudeGeometry from './vgl-extrude-geometry';
import {
float, int, string, boolean,
} from '../types';
const fonts = Object.create(null);
/**
* A component for generating text as a single geometry,
* corresponding [THREE.TextGeometry](https://threejs.org/docs/index.html#api/geometries/TextGeometry).
*
* Properties of [VglGeometry](../core/vgl-geometry) are also available as mixin.
*/
export default {
mixins: [VglExtrudeGeometry],
props: {
/** The text that needs to be shown. */
text: { type: string, default: '' },
/** The path or URL to the facetype json file. This can also be a Data URI. */
font: string,
/** Size of the text. */
size: { type: float, default: 100 },
/** Thickness to extrude text. */
height: { type: float, default: 50 },
/** Number of points on the curves. */
curveSegments: { type: int, default: 12 },
/** Turn on bevel. */
bevelEnabled: boolean,
/** How deep into text bevel goes. */
bevelThickness: { type: float, default: 10 },
/** How far from text outline is bevel. */
bevelSize: { type: float, default: 8 },
/** Number of bevel segments. */
bevelSegments: { type: int, default: 3 },
},
data() { return { f: undefined }; },
computed: {
inst() {
return this.f !== undefined ? new TextBufferGeometry(this.text, {
font: fonts[this.f],
size: parseFloat(this.size),
height: parseFloat(this.height),
curveSegments: parseInt(this.curveSegments, 10),
bevelEnabled: this.bevelEnabled,
bevelThickness: parseFloat(this.bevelThickness),
bevelSize: parseFloat(this.bevelSize),
bevelSegments: parseInt(this.bevelSegments, 10),
}) : new BufferGeometry();
},
},
watch: {
font: {
handler(src) {
if (!fonts[src]) {
fonts[src] = [() => {
if (src === this.font) this.f = src;
}];
new FontLoader().load(src, (font) => {
const queue = fonts[src];
fonts[src] = font;
queue.forEach((f) => { f(); });
this.vglNamespace.geometries.emit(this.name, this.inst);
});
} else if (fonts[src].isFont) {
this.f = src;
} else {
fonts[src].push(() => { if (src === this.font) this.f = src; });
}
this.vglNamespace.geometries.emit(this.name, this.inst);
},
immediate: true,
},
},
};