troisjs / trois

✨ ThreeJS + VueJS 3 + ViteJS ⚡
https://troisjs.github.io
MIT License
4.19k stars 299 forks source link

Loading state #162

Open leonardogruppelli opened 2 years ago

leonardogruppelli commented 2 years ago

I just want to know if there is a way to detect when all meshes and materials have loaded?

This is my template:

<template>
  <Renderer
    ref="renderer"
    antialias
    resize
    shadow
  >
    <Camera
      ref="camera"
      :position="{
        z: 10,
      }"
    />

    <Scene background="#111111">
      <Group
        ref="group"
        :position="{
          x: position,
          y: position,
          z: position,
        }"
      >
        <template v-for="i in quantity">
          <template v-for="j in quantity">
            <template v-for="k in quantity">
              <Box
                ref="boxes"
                :width-segments="10"
                :height-segments="10"
                :depth-segments="10"
                :size="size"
                :position="{
                  x: i * increment,
                  y: j * increment,
                  z: k * increment,
                }"
                receive-shadow
                cast-shadow
              >
                <MatcapMaterial
                  ref="material"
                  name="2E763A_78A0B7_B3D1CF_14F209"
                />
              </Box>
            </template>
          </template>
        </template>
      </Group>
    </Scene>
  </Renderer>
</template>