better top and floor, random buildings colors

src/components/objects/ContentBlock.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
+  <!-- <object3d ref="block3d" name="Content" :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> -->
-    <mesh
+    <!-- <mesh
       ref="label3d"
       name="Content"
       :position="position"
@@ -18,7 +19,7 @@
       <material type="MeshLambert" :options="label_opts">
         <texture :options="label_texture_opts" />
       </material>
-    </mesh>
+    </mesh> -->
     <mesh
       v-if="img_canvas"
       ref="img3d"
@@ -35,6 +36,7 @@
         <texture :options="img_texture_opts" />
       </material>
     </mesh>
+  <!-- </object3d> -->
   </div>
 </template>
 
@@ -48,7 +50,7 @@ export default {
   props: { prtPosition: Object, prtSize: Object, type: String, data: Object },
   data: () => ({
     // block3d: null,
-    size: { x: 2, y: 3, z: 0.1 },
+    size: { x: 4, y: 8 },
     position: { x: 0, y: 0, z: 0 },
     rotation: { x: 0, y: 0, z: 0 },
     // opts: {
@@ -58,14 +60,14 @@ export default {
     //   // opacity: 0.6
     // },
     isOpened: false,
-    label3d: null,
-    label_opts: {
-      side: THREE.DoubleSide,
-      // wireframe: false,
-      transparent: true
-      // opacity: 0.6
-      // renderOrder: 0
-    },
+    // label3d: null,
+    // label_opts: {
+    //   side: THREE.DoubleSide,
+    //   // wireframe: false,
+    //   transparent: true
+    //   // opacity: 0.6
+    //   // renderOrder: 0
+    // },
     img_opts: {
       // side: THREE.DoubleSide,
       // wireframe: false,
@@ -74,10 +76,10 @@ export default {
       // renderOrder: 0
     },
     // label_position: { x: 5, y: 5, z: 6 },
-    label_canvas: null,
-    label_size: null,
+    // label_canvas: null,
+    // label_size: null,
     img_canvas: null,
-    img_size: { x: 2, y: 3, z: 0.1 },
+    img_size: { x: 0, y: 0 },
     img_position: { x: 0, y: 0, z: 0 },
     face: null
   }),
@@ -99,14 +101,14 @@ export default {
       }
       return color
     },
-    label_texture_opts () {
-      return {
-        canvas: this.label_canvas,
-        minFilter: THREE.LinearFilter,
-        wrapS: THREE.ClampToEdgeWrapping,
-        wrapT: THREE.ClampToEdgeWrapping
-      }
-    },
+    // label_texture_opts () {
+    //   return {
+    //     canvas: this.label_canvas,
+    //     minFilter: THREE.LinearFilter,
+    //     wrapS: THREE.ClampToEdgeWrapping,
+    //     wrapT: THREE.ClampToEdgeWrapping
+    //   }
+    // },
     img_texture_opts () {
       return {
         canvas: this.img_canvas,
@@ -118,7 +120,7 @@ export default {
   },
   created () {
     // console.log('ContentBlock created', this.data)
-    let txtcolor = '#000000'
+    // let txtcolor = '#000000'
     // switch (this.type) {
     //   case 'visible':
     //     txtcolor = '#0000ff'
@@ -132,10 +134,10 @@ export default {
     //   default:
     // }
 
-    this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
-
-    this.size.x = this.label_size.x + 0.2
-    this.size.y = this.label_size.y + 0.2
+    // this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
+    //
+    // this.size.x = this.label_size.x + 0.2
+    // this.size.y = this.label_size.y + 0.2
 
     let y = 0
     let top = this.prtPosition.y + this.prtSize.y / 2
@@ -200,13 +202,15 @@ export default {
 
     // console.log()
     if (this.data.Media && this.data.Media.length) {
-      console.log(this.data.Media[0].url)
+      // console.log(this.data.Media[0].url)
+      // create image object with a promise (async img loading)
       this.createImgCanvas(`https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`)
         .then(({ img, canvas }) => {
           // console.log('THEN img loaded ok', this, img, canvas)
-          let f = 3 / canvas.width
+          let f = this.size.x / canvas.width
           this.img_size.x = canvas.width * f
-          this.img_size.y = canvas.height * f
+          this.img_size.y = this.size.y = canvas.height * f
+          console.log(`size.x :${this.size.x}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
           this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
           switch (this.face) {
             case 'left':
@@ -227,6 +231,12 @@ export default {
               break
           }
           this.img_canvas = canvas
+          this.curObj.needsUpdate()
+          // this.imgObj = this.$refs.img3d.curObj
+          // // record self references
+          // this.imgObj.userData = {
+          //   vnode: this
+          // }
         })
         .catch(function () {
           console.warn('CATCH img load ERROR')
@@ -240,11 +250,14 @@ export default {
     // this.block3d = this.$refs.block3d.curObj
     // this.block3d.castShadow = true
     // this.block3d.receiveShadow = true
-
-    this.label3d = this.$refs.label3d.curObj
-    // record self references
-    this.label3d.userData = {
-      vnode: this
+  },
+  updated () {
+    if (!this.curObj && this.$refs.img3d) {
+      this.curObj = this.$refs.img3d.curObj
+      // record self references
+      this.curObj.userData = {
+        vnode: this
+      }
     }
   }
 }