getting data from api, displaying projects as cubes

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>