# <vgl-mesh-depth-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-depth-material />
</template>
</vgl-mesh>
</vgl-scene>
</template>
<template #camera>
<vgl-perspective-camera
position="spherical"
:position-radius="5"
:position-phi="1"
:position-theta="0.5"
rotation="lookAt"
:near="3"
:far="7"
/>
</template>
</vgl-renderer>
</div>
</template>
<script>
import * as components from 'vue-gl';
export default { components };
</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
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
# 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 is affected by fog.