forked from vue-gl/vue-gl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vgl-material.js
68 lines (64 loc) · 1.78 KB
/
vgl-material.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
import {
Material,
NoColors,
VertexColors,
FaceColors,
FrontSide,
BackSide,
DoubleSide,
} from 'three';
import { string } from '../validators';
const vertexColors = {
no: NoColors,
vertex: VertexColors,
face: FaceColors,
};
const sides = {
front: FrontSide,
back: BackSide,
double: DoubleSide,
};
/**
* Abstract mixin component for materials,
* corresponding [THREE.Material](https://threejs.org/docs/index.html#api/materials/Material).
*/
export default {
inject: ['vglNamespace'],
props: {
/** Name of the material. */
name: string,
/** Defines which side of faces will be rendered. front, back or double. */
side: { type: string, default: 'front' },
/** Defines whether vertex coloring is used. Other options are 'vertex' and 'face'. */
vertexColors: { type: string, default: 'no' },
},
computed: {
inst: () => new Material(),
},
watch: {
inst: {
handler(inst) {
inst.setValues({
side: sides[this.side],
vertexColors: vertexColors[this.vertexColors],
});
this.vglNamespace.materials[this.name] = inst;
},
immediate: true,
},
name(name, oldName) {
const { vglNamespace: { materials }, inst } = this;
if (materials[oldName] === inst) delete materials[oldName];
materials[name] = inst;
},
side(side) { this.inst.side = sides[side]; },
vertexColors(colors) { this.inst.vertexColors = vertexColors[colors]; },
},
beforeDestroy() {
const { vglNamespace: { materials }, inst } = this;
if (materials[this.name] === inst) delete materials[this.name];
},
created() { this.vglNamespace.update(); },
beforeUpdate() { this.vglNamespace.update(); },
render(h) { return this.$slots.default ? h('div', this.$slots.default) : undefined; },
};