<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'

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


@Component
export default class MaterialViewer extends Vue {


  mounted() {

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

    let box = new THREE.Mesh(
        new THREE.SphereBufferGeometry(10,30,30),
        //new THREE.MeshNormalMaterial({})
        new MarmosetMaterial()
    )

    viewer.add(box)

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

  #containner {

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

  }

</style>
