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

<template>
  <div>
    <mesh ref="block3d" name="Project" :position="position">
      <!-- <geometry type="Box" :args="[size.x, size.y, size.z]" /> -->
      <material type="MeshLambert" :color="color" :options="block_opts">
        <!-- <texture :options="label_texture_opts" /> -->
      </material>
    </mesh>
    <mesh ref="label3d" name="Label" :position="label_position">
      <geometry type="Plane" :args="[label_size.x, label_size.y]" />
      <material type="MeshLambert" :options="label_opts">
        <texture :options="label_texture_opts" />
      </material>
    </mesh>
    <div v-if="isOpened">
      <ContentBlock
        v-for="item in data.visibles"
        :key="item.id"
        :prtPosition="position"
        :prtSize="size"
        type="visible"
        :data="item"
        />
      <ContentBlock
        v-for="item in data.contexts"
        :key="item.id"
        :prtPosition="position"
        :prtSize="size"
        type="context"
        :data="item"
        />
      <ContentBlock
        v-for="item in data.processes"
        :key="item.id"
        :prtPosition="position"
        :prtSize="size"
        type="process"
        :data="item"
        />
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
// import { Base } from 'vue-threejs'

import mixins from 'components/mixins'
import ContentBlock from 'components/objects/ContentBlock'

export default {
  name: 'Project',
  components: {
    ContentBlock
  },
  mixins: [mixins],
  // props: { size: Object, texture: String, position: Object, color: Number },
  props: { data: Object, len: Number, index: Number },
  data () {
    console.log('Project data() : data', this.data)
    // get size and positions from project store
    let size = { ...this.data.size }
    let position = { ...this.data.position }

    let geometry = new THREE.BoxBufferGeometry(size.x, size.y, size.z)

    return {
      block3d: null,
      block_opts: {
        side: THREE.DoubleSide
        // wireframe: true,
        // transparent: true,
        // opacity: 0.6
        // renderOrder: 0
      },
      label3d: null,
      label_opts: {
        side: THREE.DoubleSide,
        // wireframe: false,
        transparent: true
        // opacity: 0.6
        // renderOrder: 0
      },
      // size and positions are defined in store project
      size: size,
      position: position,
      geometry: geometry,
      label_position: { x: 0, y: 0, z: 0 },
      color: 0xffffff,
      label_canvas: null,
      label_size: null,
      isOpened: false
    }
  },
  computed: {
    label_texture_opts () {
      return {
        canvas: this.label_canvas,
        minFilter: THREE.LinearFilter,
        wrapS: THREE.ClampToEdgeWrapping,
        wrapT: THREE.ClampToEdgeWrapping
      }
    }
  },
  created () {
    console.log('Project created: data', this, this.data)

    this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000')
    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
    // console.log('this.label_canvas', this.label_canvas)
  },
  mounted () {
    // console.log('project mounted', this)
    // mesh options
    this.block3d = this.$refs.block3d.curObj
    this.block3d.geometry = this.geometry
    this.block3d.castShadow = true
    this.block3d.receiveShadow = true
    // record self references
    this.block3d.userData = {
      vnode: this
    }
    this.label3d = this.$refs.label3d.curObj

    // light
    // console.log('project mounted', this.$env3d)
    // var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
    // this.$env3d.scene.add(light)
  }
  // ,
  // methods: {
  //
  // }
}
</script>