getting data from api, displaying projects as cubes

2020-08-24 12:53:09 +02:00
parent 88a9a31768
commit 68529ed503
10 changed files with 233 additions and 20 deletions
@@ -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>