getting data from api, displaying projects as cubes

assets/css/app.scss

@@ -8,7 +8,7 @@
 
 
 body{
-  color: #1a1a1a;
+  color: #ff00ff;
 }
 
 #root{

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>

src/api/rest-axios.js

@@ -0,0 +1,27 @@
+import axios from 'axios'
+
+// TODO: make this one as settings (or find an other solution)
+// https://dev.to/sanfra1407/how-to-use-env-file-in-javascript-applications-with-webpack-18df
+// switch (app_env) {
+//   case 'dev':
+//     let path = `http://${window.location.hostname}:8984`
+//     break;
+//   case 'prod':
+//     let path = `http://${window.location.hostname}/api`
+//     break;
+// }
+// let path = 'http://dev.api.gdp.fr'
+// let path = 'http://localhost:8984'
+// const
+// let path = 'http://' + window.location.hostname + (window.env === 'prod' ? '/api' : ':8984')
+
+export const REST = axios.create({
+  baseURL: 'https://api.anarchive-muntadas.figli.io/',
+  // withCredentials: true,
+  crossorigin: true,
+  headers: {
+    'Accept': 'application/json'
+    // 'Access-Control-Allow-Origin': '*'
+    // 'Access-Control-Allow-Credentials':
+  }
+})

src/components/mixins.js

@@ -0,0 +1,8 @@
+// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
+export default {
+  methods: {
+    deg2rad: function (deg) {
+      return deg * (Math.PI / 180)
+    }
+  }
+}

src/components/objects/Cube.vue

@@ -1,15 +1,24 @@
 <template>
   <mesh name="Cube" :position="position">
-    <geometry type="Box" :args="[size, size, size]" />
-    <material type="MeshBasic" :color="color" />
+    <geometry type="Box" :args="[size.x, size.y, size.z]" />
+    <material type="MeshBasic" :color="color" :options="opts" />
   </mesh>
 </template>
 
 <script>
-// import { Object3D } from '@'
+import * as THREE from 'three'
+
 export default {
   name: 'Cube',
   // mixins: [Object3D],
-  props: { size: Number, texture: String, position: Object, color: Number }
+  props: { size: Object, texture: String, position: Object, color: Number },
+  data: () => ({
+    opts: {
+      side: THREE.DoubleSide,
+      wireframe: false,
+      transparent: false,
+      opacity: 0.6
+    }
+  })
 }
 </script>

src/components/objects/Plan.vue

@@ -0,0 +1,38 @@
+<template>
+  <mesh name="Cube"
+    :position="position"
+    :rotation="{
+      x:deg2rad(rotation.x),
+      y:deg2rad(rotation.y),
+      z:deg2rad(rotation.z)
+    }"
+  >
+    <geometry type="PlaneBuffer" :args="[size.w, size.h]" />
+    <material type="MeshBasic" :color="color" :options="opts" />
+  </mesh>
+</template>
+
+<script>
+import mixins from 'components/mixins'
+import * as THREE from 'three'
+
+export default {
+  name: 'Plan',
+  mixins: [mixins],
+  props: {
+    size: Object,
+    texture: String,
+    position: Object,
+    color: Number,
+    rotation: Object
+  },
+  data: () => ({
+    opts: {
+      side: THREE.DoubleSide,
+      wireframe: false,
+      transparent: true,
+      opacity: 0.1
+    }
+  })
+}
+</script>

src/components/objects/Project.vue

@@ -0,0 +1,34 @@
+<template>
+  <mesh name="Cube" :position="position">
+    <geometry type="Box" :args="[size.x, size.y, size.z]" />
+    <material type="MeshBasic" :color="color" :options="opts" />
+  </mesh>
+</template>
+
+<script>
+import * as THREE from 'three'
+
+export default {
+  name: 'Project',
+  // mixins: [Object3D],
+  // props: { size: Object, texture: String, position: Object, color: Number },
+  props: { data: Object, len: Number, index: Number },
+  data: () => ({
+    opts: {
+      side: THREE.DoubleSide,
+      wireframe: false,
+      transparent: true,
+      opacity: 0.6
+    },
+    size: { x: 10, y: 10, z: 10 },
+    position: { x: 5, y: 5, z: 0 },
+    color: 0xffffff
+  }),
+  created () {
+    console.log('this.index', this.index)
+    this.size.y = 20 + Math.random() * 90
+    this.position.y = -10 + Math.random() * this.size.y / 2
+    this.position.x = -this.len / 2 * 15 + 15 * this.index
+  }
+}
+</script>

src/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 // import router from './router'
-// import store from './store'
+import store from './store'
 // import { sync } from 'vuex-router-sync'
 import Meta from 'vue-meta'
 import * as VueThreejs from 'vue-threejs'
@@ -15,9 +15,10 @@ Vue.use(Meta)
 Vue.use(VueThreejs)
 
 // sync(store, router) // done. Returns an unsync callback fn
+// sync(store)
 
 new Vue({
   // router,
-  // store,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/store/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import Projects from './modules/projects'
+
+Vue.use(Vuex)
+export default new Vuex.Store({
+  modules: {
+    Projects
+  }
+})

src/store/modules/projects.js

@@ -0,0 +1,37 @@
+import { REST } from 'api/rest-axios'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state: {
+    projects: []
+  },
+
+  // getters
+  getters: {},
+
+  // mutations
+  mutations: {
+    setProjects (state, projects) {
+      state.projects = projects
+    }
+  },
+
+  // actions
+  actions: {
+    // async get authors
+    getProjects ({ dispatch, commit, state }) {
+      REST.get(`projects`, {})
+        .then(({ data }) => {
+          console.log('projects getProjects REST: data', data)
+          commit('setProjects', data)
+        })
+        .catch((error) => {
+          console.warn('Issue with getProjects', error)
+          Promise.reject(error)
+        })
+    }
+  }
+
+}