looking arround is quite working

src/components/objects/ContentBlock.vue

@@ -0,0 +1,39 @@
+<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>