forked from GreggJuanEduardoPH/vue-gl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
vgl-mesh-physical-material.js
50 lines (48 loc) · 1.58 KB
/
vgl-mesh-physical-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
import { MeshPhysicalMaterial } from 'three';
import VglMeshStandardMaterial from './vgl-mesh-standard-material';
import { float } from '../types';
/**
* An extension of the mesh standard material that allows for greater control over reflectivity,
* corresponding [THREE.MeshPhysicalMaterial](https://threejs.org/docs/index.html#api/materials/MeshPhysicalMaterial).
*
* Properties of [VglMeshStandardMaterial](vgl-mesh-standard-material) are also available as mixin.
*/
export default {
mixins: [VglMeshStandardMaterial],
props: {
/** ClearCoat level, from 0.0 to 1.0. */
clearcoat: { type: float, default: 0 },
/** How rough the clearCoat appears, from 0.0 to 1.0. */
clearcoatRoughness: { type: float, default: 0 },
/** Degree of reflectivity, from 0.0 to 1.0. */
reflectivity: { type: float, default: 0.5 },
},
computed: {
/** The THREE.MeshPhysicalMaterial instance. */
inst: () => new MeshPhysicalMaterial(),
},
watch: {
inst: {
handler(inst) {
Object.assign(inst, {
clearcoat: parseFloat(this.clearcoat),
clearcoatRoughness: parseFloat(this.clearcoatRoughness),
reflectivity: parseFloat(this.reflectivity),
});
},
immediate: true,
},
clearcoat(clearcoat) {
this.inst.clearcoat = parseFloat(clearcoat);
this.update();
},
clearcoatRoughness(roughness) {
this.inst.clearcoatRoughness = parseFloat(roughness);
this.update();
},
reflectivity(reflectivity) {
this.inst.reflectivity = parseFloat(reflectivity);
this.update();
},
},
};