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

<template>
  <mesh name="ContentBlock" :position="position">
    <geometry type="Box" :args="[size.x, size.y, size.z]" />
    <material type="MeshLambert" :color="color" :options="opts" />
  </mesh>
</template>

<script>
import * as THREE from 'three'

export default {
  name: 'ContentBlock',
  // mixins: [Object3D],
  props: { prtPosition: Object, prtSize: Object },
  data: () => ({
    color: 0xffffff,
    size: { x: 2, y: 2, z: 2 },
    position: { x: 0, y: 5, z: 2 },
    opts: {
      side: THREE.DoubleSide
      // wireframe: false,
      // transparent: false,
      // opacity: 0.6
    }
  }),
  created () {
    console.log('ContentBlock created', this.prtSize)
    this.position.x = this.prtPosition.x - this.prtSize.x / 2 + Math.random() * this.prtSize.x

    // console.log('this.position.y', this.position.y)
    if (Math.random() > 0.5) {
      this.position.y = this.prtPosition.y + this.prtSize.y / 2 + Math.random() * 20
    } else {
      this.position.y = this.prtPosition.y - this.prtSize.y / 2 - Math.random() * 20
    }
    // this.position.z = this.prtPosition.Z
  }
}
</script>