starting navigation inside projects

src/components/objects/ContentBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <mesh name="ContentBlock" :position="position">
+  <mesh ref="block3d" name="ContentBlock" :position="position">
     <geometry type="Box" :args="[size.x, size.y, size.z]" />
     <material type="MeshLambert" :color="color" :options="opts" />
   </mesh>
@@ -13,27 +13,36 @@ export default {
   // mixins: [Object3D],
   props: { prtPosition: Object, prtSize: Object },
   data: () => ({
-    color: 0xffffff,
-    size: { x: 2, y: 2, z: 2 },
-    position: { x: 0, y: 5, z: 2 },
+    block3d: null,
+    size: { x: 2, y: 3, z: 0.1 },
+    position: { x: 0, y: 0, z: 0 },
     opts: {
       side: THREE.DoubleSide
       // wireframe: false,
       // transparent: false,
       // opacity: 0.6
-    }
+    },
+    isOpened: false
   }),
+  computed: {
+    color () {
+      return this.opened ? 0xff0000 : 0x0000ff
+    }
+  },
   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.y = this.prtPosition.y - this.prtSize.y / 2 + Math.random() * this.prtSize.y
+    this.position.z = this.prtPosition.z - this.prtSize.z / 2 + Math.random() * this.prtSize.z
+  },
+  mounted () {
+    this.block3d = this.$refs.block3d.curObj
+    // this.block3d.castShadow = true
+    // this.block3d.receiveShadow = true
+    // record self references
+    this.block3d.userData = {
+      vnode: this
     }
-    // this.position.z = this.prtPosition.Z
   }
 }
 </script>