VueGL

# <vgl-defs>

This component registers reusable resources (attributes, geometries, materials, textures, etc.) to the root Vue instance (as a $_vglDefs property) and makes them to be callable at anywhere. To call registered resources, put the vgl-use component there.

Note that objects (lights, lines, meshes, etc.) are unique so that they cannot be used multiple times as other object's children. However, this restriction does not exist outside object tree. For instance, lights cannot be added to more than one scene but a scene can be shared between multiple renderers.

# Example Usage

<template>
  <div>
    <p>Cube objects shown below use the same geometry and material.</p>
    <vgl-renderer>
      <vgl-defs>
        <template #geometry>
          <vgl-box-geometry />
        </template>
        <template #material>
          <vgl-mesh-standard-material :color="0xc5f0ba" />
        </template>
      </vgl-defs>
      <template #scene>
        <vgl-scene>
          <template v-for="x in 10">
            <template v-for="y in 10">
              <vgl-mesh
                v-for="z in 10"
                :key="x + y * 100 + z * 10000"
                :position-x="x * 2.5"
                :position-y="y * 2.5"
                :position-z="z * 2.5"
              >
                <template #geometry>
                  <vgl-use href="geometry" />
                </template>
                <template #material>
                  <vgl-use href="material" />
                </template>
              </vgl-mesh>
            </template>
          </template>
          <vgl-ambient-light :intensity="0.4" />
          <vgl-directional-light
            :intensity="0.7"
            :position-x="3"
            :position-y="2"
            :position-z="1"
          />
        </vgl-scene>
      </template>
      <template #camera>
        <vgl-perspective-camera
          :position-x="35"
          :position-y="35"
          :position-z="50"
          rotation="lookAt"
        />
      </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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# Slots

  • Any
    Resources defined in each named slot can be reffered from the vgl-use component by the name.

← <vgl-float32-attribute> →