label are back

src/components/objects/Project.vue

@@ -4,13 +4,12 @@
     <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">
-    <!-- <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> -->
+    </mesh>
     <!-- <div v-if="isOpened">
       <ContentBlock
         v-for="item in data.visibles"
@@ -81,8 +80,8 @@ export default {
     console.log('Project data()')
 
     return {
+      isOpened: false,
       block3d: null,
-      // block_opts: materialOpts,
       label3d: null,
       label_opts: {
         side: THREE.DoubleSide,
@@ -91,55 +90,41 @@ export default {
         // 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
+      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,
+      size: state => state.size,
-      // position: state => state.position,
+      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 () {
+    label_texture_opts () {
-    //   return {
+      return {
-    //     canvas: this.label_canvas,
+        canvas: this.label_canvas,
-    //     minFilter: THREE.LinearFilter,
+        minFilter: THREE.LinearFilter,
-    //     wrapS: THREE.ClampToEdgeWrapping,
+        wrapS: THREE.ClampToEdgeWrapping,
-    //     wrapT: THREE.ClampToEdgeWrapping
+        wrapT: THREE.ClampToEdgeWrapping
-    //   }
+      }
-    // }
+    }
   },
   created () {
-
+    this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
-    // 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.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.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
-    // this.label_position.z = this.position.z + this.size.z / 2 + 0.5
+    console.log('this.label_position', this.label_position)
-    // // console.log('this.label_canvas', this.label_canvas)
   },
   mounted () {
     console.log('project mounted', this)

src/store/modules/project.js

@@ -226,28 +226,6 @@ export default {
       // convert back to three.js mesh
       let building = buildingBSP.toMesh()
 
-      // // create a custom shaderMaterial to had gradian colors
-      // // var uniforms = THREE.UniformsUtils.merge([
-      // //   THREE.UniformsLib['lights'],
-      // //   {
-      // //     'topColor': { value: new THREE.Color(0xffffff) },
-      // //     'groundColor': { value: new THREE.Color(0xbcd6e4) },
-      // //     'bottomColor': { value: new THREE.Color(0x07223b) },
-      // //     // 'bottomColor': { value: new THREE.Color(0x000000) },
-      // //     // 'groundColor': { value: new THREE.Color(0xff0000) },
-      // //     // 'bottomColor': { value: new THREE.Color(0x00ff00) },
-      // //     lightIntensity: { type: 'f', value: 1.0 }
-      // //   }
-      // // ])
-      // // var buildingMat = new THREE.ShaderMaterial({
-      // //   uniforms: uniforms,
-      // //   vertexShader: BgVertex,
-      // //   fragmentShader: BuildingFragment,
-      // //   side: THREE.DoubleSide,
-      // //   lights: true
-      // // })
-      // // building.material = buildingMat
-
       // create a classical material for building
       // let topColor = `hsla(201, 100%, 95%, 1)`
       let hTop = Math.round(195 + Math.random() * 10)
@@ -258,23 +236,16 @@ export default {
       let lFloor = Math.round(5 + Math.random() * 15)
       let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
       let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
-
       let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, bottomColor))
-
       let materialOpts = {
         color: 0xffffff,
         side: THREE.DoubleSide,
         shininess: 30,
         map: gradientTexture
-        // wireframe: true,
-        // transparent: true,
-        // opacity: 0.6
-        // renderOrder: 0
       }
       building.material = new THREE.MeshPhongMaterial(materialOpts)
-
+      // commiting walls
       commit('setWalls3dObj', building)
-
       let buildingPos = { ...state.position, ...{ z: state.position.z - 0.5 * state.size.z } }
       commit('setWallsPos', buildingPos)
 
@@ -282,27 +253,22 @@ export default {
       let topGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
       let topOpts = {
         color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
-        // side: THREE.DoubleSide,
         shininess: 30
       }
       let topMat = new THREE.MeshPhongMaterial(topOpts)
       let topMesh = new THREE.Mesh(topGeom, topMat)
       commit('setTop3dObj', topMesh)
-      let topPosition = { ...state.position }
+      let topPosition = { ...state.position, ...{ y: state.position.y + 0.5 * state.size.y } }
-      topPosition.y += 0.5 * state.size.y
       commit('setTopPos', topPosition)
 
-      // let floorGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
       let floorOpts = {
         color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
-        // side: THREE.DoubleSide,
         shininess: 10
       }
       let floorMat = new THREE.MeshPhongMaterial(floorOpts)
       let floorMesh = new THREE.Mesh(topGeom, floorMat)
       commit('setFloor3dObj', floorMesh)
-      let floorPosition = { ...state.position }
+      let floorPosition = { ...state.position, ...{ y: state.position.y - 0.5 * state.size.y } }
-      floorPosition.y -= 0.5 * state.size.y
       commit('setFloorPos', floorPosition)
 
       //