displaying content images in 3d env

src/App.vue

@@ -297,16 +297,16 @@ export default {
             // toPos.z += 1
             switch (vnode.face) {
               case 'left':
-                toPos.x += 2
+                toPos.x += 4
                 break
               case 'back':
-                toPos.z += 2
+                toPos.z += 4
                 break
               case 'right':
-                toPos.x -= 2
+                toPos.x -= 4
                 break
               case 'front':
-                toPos.z -= 2
+                toPos.z -= 4
                 break
             }
             // TODO: we need to update lon and lat accordingly when chaging camera orientation

src/components/mixins.js

@@ -35,6 +35,29 @@ export default {
       }
       // console.log('createLabelCanvas', ctx)
       return ctx.canvas
+    },
+    createImgCanvas (src) {
+      // let vnode = this
+      return new Promise((resolve, reject) => {
+        var img = new Image()
+        // XSS resolution
+        // https://www.html5gamedevs.com/topic/31184-solved-cors-problem-with-dynamictexture-on-some-servers-tainted-canvas/
+        img.crossOrigin = 'Anonymous'
+        img.src = src
+        img.onload = function () {
+          // console.log('img loaded', this)
+          const ctx = document.createElement('canvas').getContext('2d')
+          ctx.canvas.width = this.width
+          ctx.canvas.height = this.height
+          ctx.fillStyle = 'red'
+          // ctx.fillRect(0, 0, this.width, this.height)
+          ctx.drawImage(this, 0, 0, this.width, this.height)
+          resolve({ img: this, canvas: ctx.canvas })
+        }
+        img.onerror = function () {
+          reject(src)
+        }
+      })
     }
   }
 }

src/components/objects/ContentBlock.vue

@@ -19,6 +19,22 @@
         <texture :options="label_texture_opts" />
       </material>
     </mesh>
+    <mesh
+      v-if="img_canvas"
+      ref="img3d"
+      name="Content"
+      :position="img_position"
+      :rotation="{
+        x:deg2rad(rotation.x),
+        y:deg2rad(rotation.y),
+        z:deg2rad(rotation.z)
+      }"
+    >
+      <geometry type="Plane" :args="[img_size.x, img_size.y]" />
+      <material type="MeshLambert" :options="img_opts">
+        <texture :options="img_texture_opts" />
+      </material>
+    </mesh>
   </div>
 </template>
 
@@ -50,9 +66,19 @@ export default {
       // opacity: 0.6
       // renderOrder: 0
     },
+    img_opts: {
+      // side: THREE.DoubleSide,
+      // wireframe: false,
+      // transparent: true
+      // opacity: 0.6
+      // renderOrder: 0
+    },
     // label_position: { x: 5, y: 5, z: 6 },
     label_canvas: null,
     label_size: null,
+    img_canvas: null,
+    img_size: { x: 2, y: 3, z: 0.1 },
+    img_position: { x: 0, y: 0, z: 0 },
     face: null
   }),
   computed: {
@@ -80,23 +106,31 @@ export default {
         wrapS: THREE.ClampToEdgeWrapping,
         wrapT: THREE.ClampToEdgeWrapping
       }
+    },
+    img_texture_opts () {
+      return {
+        canvas: this.img_canvas,
+        minFilter: THREE.LinearFilter,
+        wrapS: THREE.ClampToEdgeWrapping,
+        wrapT: THREE.ClampToEdgeWrapping
+      }
     }
   },
   created () {
-    console.log('ContentBlock created', this.prtSize)
+    console.log('ContentBlock created', this.data)
     let txtcolor = '#000000'
-    switch (this.type) {
+    // switch (this.type) {
-      case 'visible':
+    //   case 'visible':
-        txtcolor = '#0000ff'
+    //     txtcolor = '#0000ff'
-        break
+    //     break
-      case 'context':
+    //   case 'context':
-        txtcolor = '#ff0000'
+    //     txtcolor = '#ff0000'
-        break
+    //     break
-      case 'process':
+    //   case 'process':
-        txtcolor = '#00ff00'
+    //     txtcolor = '#00ff00'
-        break
+    //     break
-      default:
+    //   default:
-    }
+    // }
 
     this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
 
@@ -146,6 +180,44 @@ export default {
     // this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
     // this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1
     // this.label_position.z = this.position.z + this.size.z / 2 + 0.01
+
+    // console.log()
+    if (this.data.Media && this.data.Media.length) {
+      console.log(this.data.Media[0].url)
+      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
+          this.img_size.x = canvas.width * f
+          this.img_size.y = canvas.height * f
+          this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
+          switch (this.face) {
+            case 'left':
+              this.img_position.z = this.position.z + this.size.x / 2 - this.img_size.x / 2
+              this.img_position.x = this.position.x
+              break
+            case 'back':
+              this.img_position.x = this.position.x - this.size.x / 2 + this.img_size.x / 2
+              this.img_position.z = this.position.z
+              break
+            case 'right':
+              this.img_position.z = this.position.z - this.size.x / 2 + this.img_size.x / 2
+              this.img_position.x = this.position.x
+              break
+            case 'front':
+              this.img_position.x = this.position.x + this.size.x / 2 - this.img_size.x / 2
+              this.img_position.z = this.position.z
+              break
+          }
+          this.img_canvas = canvas
+        })
+        .catch(function () {
+          console.warn('CATCH img load ERROR')
+        })
+    }
+
+    // this.img_position = { ...this.position }
+    // this.img_position.y -= this.size.y
   },
   mounted () {
     // this.block3d = this.$refs.block3d.curObj