<template>
  <div :id="containerId">
    <!-- <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode" /> -->
  </div>
</template>

<script>
import * as v3dAppAPI from '../v3dApp/app.js'
export default {
  name: 'V3DApp',
  data() {
    return { containerId: v3dAppAPI.CONTAINER_ID }
  },
  app: null,
  mounted() {
    v3dAppAPI.createApp().then(app => {
      this.$options.app = app
      const interval = setInterval(() => {
        if (app.clock.running) {
          this.$emit('3d-loaded')
          clearInterval(interval)
        }
      }, 500)
    })
  },
  beforeUnmount() {
    if (this.$options.app) {
      this.$options.app.dispose()
      this.$options.app = null
    }
  }
}
</script>

<style scoped>
@import '../v3dApp/app.css';
</style>
