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>

src/components/objects/Project.vue

@@ -22,6 +22,7 @@
 import * as THREE from 'three'
 // import { Base } from 'vue-threejs'
 
+import mixins from 'components/mixins'
 import ContentBlock from 'components/objects/ContentBlock'
 
 export default {
@@ -29,17 +30,10 @@ export default {
   components: {
     ContentBlock
   },
-  // mixins: [Base],
+  mixins: [mixins],
   // props: { size: Object, texture: String, position: Object, color: Number },
   props: { data: Object, len: Number, index: Number },
   data: () => ({
-    // mesh_opts: {
-    //   userData: {
-    //     test: 'Hello!'
-    //   },
-    //   receiveShadow: true,
-    //   castShadow: true
-    // },
     block3d: null,
     block_opts: {
       side: THREE.DoubleSide
@@ -52,7 +46,7 @@ export default {
     label_opts: {
       side: THREE.DoubleSide,
       // wireframe: false,
-      transparent: false
+      transparent: true
       // opacity: 0.6
       // renderOrder: 0
     },
@@ -79,13 +73,19 @@ export default {
     // randomize size and positions
     this.size.y = 100 + Math.random() * 90
     this.size.z = 10 + Math.random() * 30
-    this.position.x = this.label_position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
+
+    this.position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
     this.position.y = -1 * this.size.y / 2 + 10 + Math.random() * 30// -10 + Math.random() * this.size.y / 2
     this.position.z = -10 + Math.random() * 10
-    this.label_position.y = 5
+
+    this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48)
+    this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
+    this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
     this.label_position.z = this.position.z + this.size.z / 2 + 0.1
-    this.label_canvas = this.createLabelCanvas()
     // console.log('this.label_canvas', this.label_canvas)
+  },
+  mounted () {
+    // console.log('project mounted', this)
     // mesh options
     this.block3d = this.$refs.block3d.curObj
     this.block3d.castShadow = true
@@ -95,38 +95,15 @@ export default {
       vnode: this
     }
     this.label3d = this.$refs.label3d.curObj
-  },
-  mounted () {
-    // console.log('project mounted', this)
 
-  },
-  methods: {
-    createLabelCanvas () {
-      // console.log('createLabelCanvas', this.data.Titre)
-      const size = 48
-      const borderSize = 5
-      const ctx = document.createElement('canvas').getContext('2d')
-      const font = `${size}px bold noto_sans`
-      ctx.font = font
-      // measure how long the name will be
-      const doubleBorderSize = borderSize * 2
-      const width = ctx.measureText(this.data.Titre).width + doubleBorderSize
-      const height = size + doubleBorderSize
-      this.label_size = { x: width / 21, y: height / 21 }
-      ctx.canvas.width = width
-      ctx.canvas.height = height
-
-      // need to set font again after resizing canvas
-      ctx.font = font
-      ctx.textBaseline = 'top'
-
-      ctx.fillStyle = 'white'
-      ctx.fillRect(0, 0, width, height)
-      ctx.fillStyle = 'black'
-      ctx.fillText(this.data.Titre, borderSize, borderSize)
-      // console.log('createLabelCanvas', ctx)
-      return ctx.canvas
-    }
+    // light
+    // console.log('project mounted', this.$env3d)
+    // var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
+    // this.$env3d.scene.add(light)
   }
+  // ,
+  // methods: {
+  //
+  // }
 }
 </script>