displaying a cube with vue-threejs, WAOU!

src/App.vue

@@ -1,34 +1,37 @@
 <template>
   <div id="root">
-    <header role="banner">
+    <!-- <header role="banner">
       <div class="wrapper">
         <h1
           class="site-title"
           tabindex="0"
         >
-          <router-link :to="{ name:'home' }">Muntadas</router-link>
         </h1>
-        <HeaderMenu />
       </div>
-    </header>
+    </header> -->
     <section role="main-content">
       <div class="wrapper">
-        <RouterView />
+        <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 role="tools">
-      <History />
-      <Results v-if="resultsOpened" />
-      <div id="footer-bottom" class="row">
-        <FooterTabs />
-        <Search />
-      </div>
-    </footer>
+    <footer />
   </div>
 </template>
 
 <script>
 // import { mapState } from 'vuex'
+import Cube from './components/objects/Cube'
 
 export default {
   metaInfo: {
@@ -36,19 +39,25 @@ export default {
     title: 'Home',
     // all titles will be injected into this template
     titleTemplate: '%s | Muntadas'
-  }
-  // components: {
-  //   HeaderMenu,
+  },
+  components: {
+    Cube
   //   History,
   //   Results,
   //   Search,
   //   FooterTabs
-  // },
-  // computed: {
+  },
+  computed: {
+    size () {
+      return {
+        w: window.innerWidth,
+        h: window.innerHeight
+      }
+    }
   //   ...mapState({
   //     resultsOpened: state => state.Search.opened
   //   })
-  // }
+  }
 }
 </script>
 

src/components/objects/Cube.vue

@@ -0,0 +1,15 @@
+<template>
+  <mesh name="Cube" :position="position">
+    <geometry type="Box" :args="[size, size, size]" />
+    <material type="MeshBasic" :color="color" />
+  </mesh>
+</template>
+
+<script>
+// import { Object3D } from '@'
+export default {
+  name: 'Cube',
+  // mixins: [Object3D],
+  props: { size: Number, texture: String, position: Object, color: Number }
+}
+</script>

src/index.js

@@ -3,6 +3,8 @@ import Vue from 'vue'
 // import store from './store'
 // import { sync } from 'vuex-router-sync'
 import Meta from 'vue-meta'
+import * as VueThreejs from 'vue-threejs'
+
 import App from './App'
 
 import 'assets/css/mdi/css/materialdesignicons.css'
@@ -10,6 +12,7 @@ import 'assets/css/mdi/css/materialdesignicons.css'
 import 'assets/css/app.scss'
 
 Vue.use(Meta)
+Vue.use(VueThreejs)
 
 // sync(store, router) // done. Returns an unsync callback fn