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="level" :obj="level_mesh" :position="level_position" /> -->
    <!-- <light :obj="light" :position="building_position" /> -->
    <!-- <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"
        :prtIndex="index"
        type="visible"
        :data="item"
        />
      <ContentBlock
        v-for="item in data.contexts"
        :key="item.id"
        :prtPosition="position"
        :prtSize="size"
        :prtIndex="index"
        type="context"
        :data="item"
        />
      <ContentBlock
        v-for="item in data.processes"
        :key="item.id"
        :prtPosition="position"
        :prtSize="size"
        :prtIndex="index"
        type="process"
        :data="item"
        />
      <ContentBlock
        v-for="item in data.concepts"
        :key="item.id"
        :prtPosition="position"
        :prtSize="size"
        :prtIndex="index"
        type="concept"
        :data="item"
        />
    </div> -->
  </div>
</template>

<script>

import { mapInstanceState } 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 {
      block3d: null,
      // block_opts: materialOpts,
      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,
      // light: light,
      // building: building,
      // building_position: buildingPos,
      // top_mesh: topMesh,
      // top_position: topPosition,
      // floor_mesh: floorMesh,
      // floor_position: floorPosition,
      // level_mesh: levelMesh,
      // level_position: { ...position },
      // label_position: { x: 0, y: 0, z: 0 },
      color: 0xffffff,
      label_canvas: null,
      label_size: null,
      isOpened: false
    }
  },
  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,
      floor3dObj: state => state.floor3dObj,
      floorPos: state => state.floorPos
    })
    // 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', '#ffffff')
    // 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_canvas', this.label_canvas)
  },
  mounted () {
    console.log('project mounted', this)
    // record self references

    this.block3d = this.$refs.block3d.curObj
    // this.block3d.castShadow = true
    // this.block3d.receiveShadow = true

    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>