forked from GreggJuanEduardoPH/vue-gl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vgl-arrow-helper.js
62 lines (60 loc) · 1.89 KB
/
vgl-arrow-helper.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
import { ArrowHelper, Color, Vector3 } from 'three';
import VglObject3d from '../core/vgl-object3d';
import { parseVector3 } from '../parsers';
import { float, color, vector3 } from '../types';
import { validateVector3 } from '../validators';
/**
* An 3D arrow object for visualizing directions,
* corresponding [THREE.ArrowHelper](https://threejs.org/docs/index.html#api/helpers/ArrowHelper).
*
* Properties of [VglObject3d](../core/vgl-object3d) are also available as mixin.
*/
export default {
mixins: [VglObject3d],
props: {
/** Direction from origin. */
dir: { type: vector3, validator: validateVector3 },
/** Length of the arrow. */
length: { type: float, default: 1 },
/** Color of the arrow. */
color: { type: color, default: '#ff0' },
/** The length of the head of the arrow. */
headLength: float,
/** The width of the head of the arrow. */
headWidth: float,
},
computed: {
/** The THREE.ArrowHelper instance. */
inst: () => new ArrowHelper(new Vector3(0, 1, 0), new Vector3()),
/** Array(3) of helper properties. Arrow length, head length, and head width. */
len() {
return [
parseFloat(this.length),
this.headLength !== undefined ? parseFloat(this.headLength) : undefined,
this.headWidth !== undefined ? parseFloat(this.headWidth) : undefined,
];
},
},
watch: {
inst: {
handler(inst) {
if (this.dir) inst.setDirection(parseVector3(this.dir).normalize());
inst.setLength(...this.len);
inst.setColor(new Color(this.color));
},
immediate: true,
},
dir(dir) {
this.inst.setDirection(parseVector3(dir).normalize());
this.vglObject3d.emit();
},
len(len) {
this.inst.setLength(...len);
this.vglObject3d.emit();
},
color(newColor) {
this.inst.setColor(new Color(newColor));
this.vglObject3d.emit();
},
},
};