# <vgl-mesh-standard-material>
# Example Usage
<template>
<div>
<vgl-renderer antialias>
<template #scene>
<vgl-scene>
<vgl-mesh>
<template #geometry>
<vgl-torus-knot-geometry />
</template>
<template #material>
<vgl-mesh-standard-material :color="color" />
</template>
</vgl-mesh>
<vgl-ambient-light :intensity="0.5" />
<vgl-directional-light
:position-y="2"
:position-z="1"
:intensity="0.5"
/>
</vgl-scene>
</template>
<template #camera>
<vgl-perspective-camera
position="spherical"
:position-radius="5"
:position-phi="1"
rotation="lookAt"
:position-theta="0.5"
/>
</template>
</vgl-renderer>
<aside class="control-panel">
<section>
<h3>Color</h3>
<label>R<input
v-model="r"
type="range"
max="255"
></label>
<label>G<input
v-model="g"
type="range"
max="255"
></label>
<label>B<input
v-model="b"
type="range"
max="255"
></label>
</section>
</aside>
</div>
</template>
<script>
import * as components from 'vue-gl';
export default {
components,
data: () => ({ r: '255', g: '255', b: '255' }),
computed: { color() { return `rgb(${this.r}, ${this.g}, ${this.b})`; } },
};
</script>
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
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
# Props
name: string
An arbitrary name of the instance.
Defaults to [object Object]side: front | back | double
Defines which side of faces will be rendered.
Defaults to [object Object]vertexColors: boolean
Defines whether vertex coloring is used.defines: object
Custom defines to be injected into the shader.
Defaults to [object Object]fog: boolean
Whether the material color is affected by global fog settings.color: string|number
The material color.
Defaults to [object Object]
# Slots
map