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

<template>
  <div>
    <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
    <object3d ref="top" :obj="top3dObj" :position="topPos" />
    <object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
    <object3d ref="levels" :obj="levels3dObj" :position="levelsPos" />
    <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, i) in contents.visibles"
        :key="i"
        type="visible"
        :prtId="id"
        :data="item"
        />
      <ContentBlock
        v-for="(item, i) in contents.contexts"
        :key="i"
        type="context"
        :prtId="id"
        :data="item"
        />
      <ContentBlock
        v-for="(item, i) in contents.processes"
        :key="i"
        type="process"
        :prtId="id"
        :data="item"
        />
      <ContentBlock
        v-for="(item, i) in contents.concepts"
        :key="i"
        type="concept"
        :prtId="id"
        :data="item"
        />
    </div>
  </div>
</template>

<script>

import { mapInstanceState, mapInstanceActions } from '@urbn/vuex-helpers'

import * as THREE from 'three'
// import { ThreeBSP } from 'three-js-csg-es6'

import mixins from 'components/mixins'

import ContentBlock from 'components/objects/ContentBlock'

// import BgVertex from 'assets/glsl/BgVertex'
// import BuildingFragment from 'assets/glsl/BuildingFragment'

// We'll determine our module based on the moduleName prop on this component
// https://www.npmjs.com/package/@urbn/vuex-helpers
const getModuleName = cmp => `project:${cmp.id}`

export default {
  name: 'Project',
  components: {
    ContentBlock
  },
  mixins: [mixins],
  props: { id: Number },
  data () {
    console.log('Project data()')
    return {
      isOpened: false,
      block3d: null,
      label3d: null,
      label_opts: {
        side: THREE.DoubleSide,
        transparent: true
        // wireframe: false,
        // opacity: 0.6
        // renderOrder: 0
      },
      label_canvas: null,
      label_size: null,
      label_position: { x: 0, y: 0, z: 0 }
      // level_mesh: levelMesh,
      // level_position: { ...position },
    }
  },
  computed: {
    ...mapInstanceState(getModuleName, {
      title: state => state.Titre,
      size: state => state.size,
      position: state => state.position,
      walls3dObj: state => state.walls3dObj,
      wallsPos: state => state.wallsPos,
      top3dObj: state => state.top3dObj,
      topPos: state => state.topPos,
      topColor: state => state.topColor,
      floor3dObj: state => state.floor3dObj,
      floorPos: state => state.floorPos,
      levels3dObj: state => state.levels3dObj,
      levelsPos: state => state.levelsPos,
      contents: state => state.contents
    }),
    label_texture_opts () {
      return {
        canvas: this.label_canvas,
        minFilter: THREE.LinearFilter,
        wrapS: THREE.ClampToEdgeWrapping,
        wrapT: THREE.ClampToEdgeWrapping
      }
    }
  },
  created () {
    this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', this.topColor)
    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.5
    console.log('this.label_position', this.label_position)
  },
  mounted () {
    console.log('project mounted', this)
    // record self references
    this.block3d = this.$refs.block3d.curObj
    this.block3d.userData.vnode = this
    this.label3d = this.$refs.label3d.curObj
  },
  methods: {
    ...mapInstanceActions(getModuleName, {
      loadContents: 'loadContents'
    }),
    open () {
      this.isOpened = true
      this.loadContents()
    }
  }
}
</script>