<template>
  <canvas ref="draw_panel_box"></canvas>
</template>
<script>
import { CanvasFormBox } from "../engines/three/wrapengine/formbox"

export default {
  name: "BgFormbox",
  mounted() {
    const _this = this
    this.$nextTick(() => {
      const { draw_panel_box } = _this.$refs
      _this._canvas_box = new CanvasFormBox(true)
      if (window !== undefined) {
        window.addEventListener("resize", (e) => {
          _this._canvas_box.init()
        }, false)

        _this.render()
        window.addEventListener("resize", function () {
          _this._canvas_box.resize()
        }, false)
      }
    })
  },
  methods: {
    render() {
      const _this = this
      window.requestAnimationFrame(function () {
        _this._canvas_box.render()
        _this.render()
      })
    }
  }
}
</script>
<style scoped>
html, body {
  overflow: hidden;
}

canvas {
  height: 100%;
  width: 100%;
  position: relative;
  background: #000;
}
</style>
