muntadas-app/src/components/objects/Project.vue

<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>