getting data from api, displaying projects as cubes

src/App.vue

@@ -11,16 +11,32 @@
     </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 }">
+        <renderer :obj="myRenderer" :size="size">
+          <scene :obj="myScene" @update:obj="handleScene">
+            <orbit-controls :position="{x:0,y:150,z:0}" :rotation="{ x: -90, y: 0, z: 0 }">
               <camera />
             </orbit-controls>
+            <!-- <camera :position="{x:0, y:300, z:0}" :rotation="{x:deg2rad(-90), y:0, z:0}"/> -->
             <!-- <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" />
+            <plan :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0xffffff" :rotation="{x:90,y:0,z:0}" />
+            <template v-if="debug">
+              <cube :size="{x:30,y:1,z:1}" :position="{x:15,y:0,z:0}" :color="0x992222" />
+              <cube :size="{x:1,y:30,z:1}" :position="{x:0,y:15,z:0}" :color="0x00BBFF" />
+              <cube :size="{x:1,y:1,z:30}" :position="{x:0,y:0,z:15}" :color="0x17d100" />
+            </template>
+            <template v-if="projects.length">
+              <project
+                v-for="(project, index) in projects"
+                :key="project.id"
+                :data="project"
+                :len="projects.length"
+                :index="index"
+              />
+            </template>
+            <line />
           </scene>
         </renderer>
       </div>
@@ -30,8 +46,13 @@
 </template>
 
 <script>
-// import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
+import mixins from 'components/mixins'
+import * as THREE from 'three'
+
+import Plan from './components/objects/Plan'
 import Cube from './components/objects/Cube'
+import Project from './components/objects/Project'
 
 export default {
   metaInfo: {
@@ -41,22 +62,49 @@ export default {
     titleTemplate: '%s | Muntadas'
   },
   components: {
-    Cube
-  //   History,
-  //   Results,
-  //   Search,
-  //   FooterTabs
+    Cube,
+    Project,
+    Plan
+  },
+  mixins: [mixins],
+  data () {
+    let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
+    renderer.setClearColor(0x000000, 0)
+
+    // scene obj is well overwrited but background color not visible
+    let scene = new THREE.Scene()
+    scene.background = new THREE.Color(0x000000)
+    scene.fog = new THREE.Fog(scene.background, 1, 5000)
+    console.log('myScene', scene)
+    return {
+      debug: true,
+      myRenderer: renderer,
+      myScene: scene
+    }
   },
   computed: {
+    ...mapState({
+      projects: state => state.Projects.projects
+    }),
     size () {
       return {
         w: window.innerWidth,
         h: window.innerHeight
       }
     }
-  //   ...mapState({
-  //     resultsOpened: state => state.Search.opened
-  //   })
+  },
+  created () {
+    if (!this.projects.length) {
+      this.getProjects()
+    }
+  },
+  methods: {
+    ...mapActions({
+      getProjects: 'Projects/getProjects'
+    }),
+    handleScene (scene) {
+      console.log('handlescene', scene)
+    }
   }
 }
 </script>