muntadas-app/src/components/objects/ContentBlock.vue

<template>
  <div>
    <!-- <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
      ref="label3d"
      name="Content"
      :position="position"
      :rotation="{
        x:deg2rad(rotation.x),
        y:deg2rad(rotation.y),
        z:deg2rad(rotation.z)
      }"
    >
      <geometry type="Plane" :args="[size.x, size.y]" />
      <material type="MeshLambert" :options="label_opts">
        <texture :options="label_texture_opts" />
      </material>
    </mesh>
  </div>
</template>

<script>
import * as THREE from 'three'
import mixins from 'components/mixins'

export default {
  name: 'ContentBlock',
  mixins: [mixins],
  props: { prtPosition: Object, prtSize: Object, type: String, data: Object },
  data: () => ({
    // block3d: null,
    size: { x: 2, y: 3, z: 0.1 },
    position: { x: 0, y: 0, z: 0 },
    rotation: { x: 0, y: 0, z: 0 },
    // opts: {
    //   side: THREE.DoubleSide
    //   // wireframe: false,
    //   // transparent: false,
    //   // opacity: 0.6
    // },
    isOpened: false,
    label3d: null,
    label_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,
    face: null
  }),
  computed: {
    color () {
      let color = 0x000000
      switch (this.type) {
        case 'visible':
          color = 0x0000ff
          break
        case 'context':
          color = 0x00ffff
          break
        case 'process':
          color = 0xff00ff
          break
        default:
          color = 0xdddddd
      }
      return color
    },
    label_texture_opts () {
      return {
        canvas: this.label_canvas,
        minFilter: THREE.LinearFilter,
        wrapS: THREE.ClampToEdgeWrapping,
        wrapT: THREE.ClampToEdgeWrapping
      }
    }
  },
  created () {
    console.log('ContentBlock created', this.prtSize)
    let txtcolor = '#000000'
    switch (this.type) {
      case 'visible':
        txtcolor = '#0000ff'
        break
      case 'context':
        txtcolor = '#ff0000'
        break
      case 'process':
        txtcolor = '#00ff00'
        break
      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

    let y = 0
    switch (this.type) {
      case 'visible':
        y = (this.prtPosition.y + this.prtSize.y / 2) * Math.random()
        break
      case 'context':
        y = (this.prtPosition.y - this.prtSize.y / 2) * Math.random()
        break
      case 'process':
        y = (this.prtPosition.y - this.prtSize.y / 2) * Math.random()
        break
      default:
    }
    this.position.y = y

    let face = Math.random()
    if (face < 0.25) {
      // gauche
      this.face = 'left'
      this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
      this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
      this.rotation.y = 90
    } else if (face >= 0.25 && face < 0.5) {
      // fond
      this.face = 'back'
      this.position.z = this.prtPosition.z - this.prtSize.z / 2 + 0.1
      this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
    } else if (face >= 0.5 && face < 0.75) {
      // droite
      this.face = 'right'
      this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
      this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
      this.rotation.y = -90
    } else {
      // face
      this.face = 'front'
      this.position.z = this.prtPosition.z + this.prtSize.z / 2 - 0.1
      this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
      this.rotation.y = 180
    }
    // 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
  },
  mounted () {
    // 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
    }
  }
}
</script>