<template>
  <div id="root">
    <!-- <header role="banner">
      <div class="wrapper">
        <h1
          class="site-title"
          tabindex="0"
        >
        </h1>
      </div>
    </header> -->
    <section role="main-content">
      <div class="wrapper">
        <renderer :size="size">
          <scene>
            <orbit-controls :position="{x:0,y:50,z:0}" :rotation="{ x: 2, y: 0, z: 3 }">
              <camera />
            </orbit-controls>
            <!-- <camera :position="{x:0,y:50,z:0}" :lookat="{x:0,y:0,z:0}" /> -->
            <!-- <light :hex="0xff0000" :intensity="10" :position="{x:-100}" /> -->
            <!-- <mesh :obj="mesh" :position="{ y: -200 }" /> -->
            <!-- <animation :fn="animate" :speed="3" /> -->
            <cube :size="10" :position="{x:0,y:0,z:0}" :color="0xFFFF00" />
          </scene>
        </renderer>
      </div>
    </section>
    <footer />
  </div>
</template>

<script>
// import { mapState } from 'vuex'
import Cube from './components/objects/Cube'

export default {
  metaInfo: {
    // if no subcomponents specify a metaInfo.title, this title will be used
    title: 'Home',
    // all titles will be injected into this template
    titleTemplate: '%s | Muntadas'
  },
  components: {
    Cube
  //   History,
  //   Results,
  //   Search,
  //   FooterTabs
  },
  computed: {
    size () {
      return {
        w: window.innerWidth,
        h: window.innerHeight
      }
    }
  //   ...mapState({
  //     resultsOpened: state => state.Search.opened
  //   })
  }
}
</script>

<style lang="scss" scoped>

.container{
  // font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  max-width: 1200px;

}

</style>
