building are now for faces unioned with tow windows

src/App.vue

@@ -326,7 +326,6 @@ export default {
 
           toPos = { ...object.position }
           if (object.name === 'Content') {
-            // toPos.z += 1
             switch (vnode.face) {
               case 'left':
                 toPos.x += 4
@@ -345,6 +344,8 @@ export default {
             // new TWEEN.Tween(this.controls.cam_target)
             //   .to(object.position, 2000)
             //   .start()
+          } else if (object.name === 'Project') {
+            toPos.z *= 0.5
           }
           // toPos.y = 5
           new TWEEN.Tween(camPos)

src/components/objects/Project.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <object3d ref="block3d" name="Project" :obj="building" :position="position"/>
+    <object3d ref="block3d" name="Project" :obj="building" :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">
@@ -71,18 +71,40 @@ export default {
     // http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
     console.log('ThreeBSP', ThreeBSP)
 
-    let boxGeom = new THREE.BoxGeometry(size.x, size.y, size.z)
-    let boxMesh = new THREE.Mesh(boxGeom)
-    let boxBSP = new ThreeBSP(boxMesh)
-    console.log('boxBSP', boxBSP)
+    let wallW = 0.001
+
+    let backGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
+    let backMesh = new THREE.Mesh(backGeom)
+    backMesh.position.z = -0.5 * size.z
+    let backBSP = new ThreeBSP(backMesh)
+
+    let rightGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
+    let rightMesh = new THREE.Mesh(rightGeom)
+    rightMesh.position.x = 0.5 * size.x
+    // rightMesh.position.z = 0.5 * size.z
+    let rightBSP = new ThreeBSP(rightMesh)
+
+    let faceGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
+    let faceMesh = new THREE.Mesh(faceGeom)
+    faceMesh.position.z = 0.5 * size.z
+    let faceBSP = new ThreeBSP(faceMesh)
+
+    let leftGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
+    let leftMesh = new THREE.Mesh(leftGeom)
+    leftMesh.position.x = -0.5 * size.x
+    // leftMesh.position.z = 0.5 * size.z
+    let leftBSP = new ThreeBSP(leftMesh)
+
+    let buildingBSP = backBSP.union(rightBSP)
+    buildingBSP = buildingBSP.union(faceBSP)
+    buildingBSP = buildingBSP.union(leftBSP)
 
     let holeGeom = new THREE.BoxGeometry(1000, 5, 5)
     let holeMesh = new THREE.Mesh(holeGeom)
     holeMesh.position.y = 50
     let holeBSP = new ThreeBSP(holeMesh)
 
-    let buildingBSP = boxBSP.subtract(holeBSP)
-    console.log('buildingBSP', buildingBSP)
+    buildingBSP = buildingBSP.subtract(holeBSP)
 
     let building = buildingBSP.toMesh()
     building.material = material
@@ -95,7 +117,8 @@ export default {
     // let subtractCSG = boxMeshCSG.subtract(holeMeshCSG)
     // let building = fromCSG(boxMeshCSG) // converting CSG back into ThreeJS object
     //
-    // building.positon = position
+    let buildingPos = { ...position }
+    buildingPos.z -= 0.5 * size.z
     // building.castShadow = true
     // building.receiveShadow = true
 
@@ -113,8 +136,10 @@ export default {
       // size and positions are defined in store project
       size: size,
       position: position,
+
       // geometry: geometry,
       building: building,
+      building_position: buildingPos,
       label_position: { x: 0, y: 0, z: 0 },
       color: 0xffffff,
       label_canvas: null,
@@ -138,7 +163,7 @@ export default {
     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
+    this.label_position.z = this.position.z + this.size.z / 2 + 0.5
     // console.log('this.label_canvas', this.label_canvas)
   },
   mounted () {