<template>
  <div class="test">
    <div id="containner"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Viewer from '../webgl/Viewer'
import MarmosetAssetsManager from '../webgl/assets/marmosets/MarmosetAssetsManager'
import * as THREE from 'three'
import { MeshMaterial as MarmosetMaterial } from '../webgl/materials/marmoset'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { TestPass, MarmosetPostPass } from '../webgl/posts'

const examples = [
  "static/model/henrique/henrique.mview",
  "static/model/vivfox/vivfox.mview",
  "static/model/bake/bake.mview"
]


@Component
export default class PostEffectViewer extends Vue {


  mounted() {

    window['THREE'] = THREE


    let containner = this.$el.querySelector("#containner") as HTMLDivElement;
    let viewer = new Viewer();
   
    let testPE = new MarmosetPostPass();
    viewer.start(containner)
    viewer.addPostEffectPass(testPE)


  
    let loader = new MarmosetAssetsManager()

    let index = Number(this.$route.query['index']) || 0

    loader.load(examples[index]).then( model => {

      model && viewer.add(model);
   
    })

  }
}
</script>
<style lang="less" scoped>

  #containner {

    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;

  }

</style>
