windows are back

src/components/mixins.js

@@ -60,18 +60,18 @@ export default {
           reject(src)
         }
       })
-    },
-    createGradientCanvas (c1, c2) {
-      var ctx = document.createElement('canvas').getContext('2d')
-      ctx.canvas.width = 1024
-      ctx.canvas.height = 1024
-      var lingrad = ctx.createLinearGradient(0, 0, 0, 1024)
-      lingrad.addColorStop(0, c1)
-      lingrad.addColorStop(1, c2)
-      ctx.fillStyle = lingrad
-      ctx.fillRect(0, 0, 1024, 1024)
-      return ctx.canvas
     }
+    // createGradientCanvas (c1, c2) {
+    //   var ctx = document.createElement('canvas').getContext('2d')
+    //   ctx.canvas.width = 1024
+    //   ctx.canvas.height = 1024
+    //   var lingrad = ctx.createLinearGradient(0, 0, 0, 1024)
+    //   lingrad.addColorStop(0, c1)
+    //   lingrad.addColorStop(1, c2)
+    //   ctx.fillStyle = lingrad
+    //   ctx.fillRect(0, 0, 1024, 1024)
+    //   return ctx.canvas
+    // }
     // ,
     // /**
     //  * Converts an HSL color value to RGB. Conversion formula

src/components/objects/Project.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
-    <!-- <object3d ref="top" :obj="top_mesh" :position="top_position" />
-    <object3d ref="floor" :obj="floor_mesh" :position="floor_position" />
-    <object3d ref="level" :obj="level_mesh" :position="level_position" /> -->
+    <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]" />
@@ -118,7 +118,11 @@ export default {
       // size: state => state.size,
       // position: state => state.position,
       walls3dObj: state => state.walls3dObj,
-      wallsPos: state => state.wallsPos
+      wallsPos: state => state.wallsPos,
+      top3dObj: state => state.top3dObj,
+      topPos: state => state.topPos,
+      floor3dObj: state => state.floor3dObj,
+      floorPos: state => state.floorPos
     })
     // label_texture_opts () {
     //   return {

src/store/modules/project.js

@@ -17,6 +17,10 @@ export default {
     position: { x: 0, y: 0, z: 0 },
     walls3dObj: null,
     wallsPos: null,
+    top3dObj: null,
+    topPos: null,
+    floor3dObj: null,
+    floorPos: null,
     wall: {
       wallW: 0.001,
       // dig windows on face and back
@@ -40,6 +44,17 @@ export default {
     },
     size: (state) => {
       return state.size
+    },
+    createGradientCanvas: (state) => (c1, c2) => {
+      var ctx = document.createElement('canvas').getContext('2d')
+      ctx.canvas.width = 1024
+      ctx.canvas.height = 1024
+      var lingrad = ctx.createLinearGradient(0, 0, 0, 1024)
+      lingrad.addColorStop(0, c1)
+      lingrad.addColorStop(1, c2)
+      ctx.fillStyle = lingrad
+      ctx.fillRect(0, 0, 1024, 1024)
+      return ctx.canvas
     }
   },
 
@@ -51,12 +66,12 @@ export default {
     setPosition: (state, pos) => {
       state.position = pos
     },
-    setWalls3dObj: (state, obj) => {
-      state.walls3dObj = obj
-    },
-    setWallsPos: (state, pos) => {
-      state.wallsPos = pos
-    }
+    setWalls3dObj: (state, obj) => { state.walls3dObj = obj },
+    setWallsPos: (state, pos) => { state.wallsPos = pos },
+    setTop3dObj: (state, obj) => { state.top3dObj = obj },
+    setTopPos: (state, pos) => { state.topPos = pos },
+    setFloor3dObj: (state, obj) => { state.floor3dObj = obj },
+    setFloorPos: (state, pos) => { state.floorPos = pos }
   },
 
   // actions
@@ -67,11 +82,11 @@ export default {
       dispatch('build3dObjs')
     },
     sizingBuilding ({ dispatch, commit, state, rootGetters }) {
-      console.log('sizingBuilding', state.index)
+      console.log('sizingBuilding')
       let totalW = rootGetters['Projects/totalW']
-      console.log('totalW', totalW)
+      // console.log('totalW', totalW)
       let margin = rootGetters['Projects/marginBetweenBuildings']
-      console.log('margin', margin)
+      // console.log('margin', margin)
 
       // positioning buildings on x regarding the widths
       // & setting up the window sizing
@@ -83,43 +98,43 @@ export default {
       let x
       if (state.index === 0) {
         // if it's the first
-        x = -1 * totalW / 2
+        x = -1 * totalW / 2 + state.size.x / 2
       } else {
         // else get the precedent pos
         let prevProjID = rootGetters['Projects/projectID'](state.index - 1)
-        console.log('prevProjID', prevProjID)
+        // console.log('prevProjID', prevProjID)
         let prevProjPos = rootGetters[`project:${prevProjID}/position`]
-        console.log(`project:${prevProjID}/position.x`, prevProjPos.x)
+        // console.log(`project:${prevProjID}/position.x`, prevProjPos.x)
         let prevProjSize = rootGetters[`project:${prevProjID}/size`]
-        console.log(`project:${prevProjID}/size.x`, prevProjSize.x)
-        console.log('state.size.x', state.size.x)
+        // console.log(`project:${prevProjID}/size.x`, prevProjSize.x)
+        // console.log('state.size.x', state.size.x)
         //  prev X        + alf of prev size x + margin + half of current size x
         x = prevProjPos.x + prevProjSize.x / 2 + margin + state.size.x / 2
       }
-      console.log('x', x)
+      // console.log('x', x)
       commit('setPosition', {
         x: x,
         y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
         z: -10 + Math.random() * 10
       })
 
-      // // WINDOWS
-      // // removing windows on X until padding is enough
-      // a = 0
-      // state.wall.nbrWinX = Math.floor((state.size.x - 2 * state.wall.margin) / state.wall.winW)
-      // while (state.wall.paddingX < 0.4) {
-      //   state.wall.nbrWinX -= a
-      //   state.wall.paddingX = (state.size.x - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinX) / (state.wall.nbrWinX - 1)
-      //   a++
-      // }
-      // // removing windows on Y until padding is enough
-      // a = 0
-      // state.wall.nbrWinY = Math.floor((state.size.y - 2 * state.wall.margin) / state.wall.winH)
-      // while (state.wall.paddingY < 0.4) {
-      //   state.wall.nbrWinY -= a
-      //   state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1)
-      //   a++
-      // }
+      // WINDOWS
+      let a = 0
+      state.wall.nbrWinX = Math.floor((state.size.x - 2 * state.wall.margin) / state.wall.winW)
+      // removing windows on X until padding is enough
+      while (state.wall.paddingX < 0.4) {
+        state.wall.nbrWinX -= a
+        state.wall.paddingX = (state.size.x - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinX) / (state.wall.nbrWinX - 1)
+        a++
+      }
+      a = 0
+      state.wall.nbrWinY = Math.floor((state.size.y - 2 * state.wall.margin) / state.wall.winH)
+      // removing windows on Y until padding is enough
+      while (state.wall.paddingY < 0.4) {
+        state.wall.nbrWinY -= a
+        state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1)
+        a++
+      }
       // state.wall = { ...wall }
       //
       // // CONTENTS GRID
@@ -149,7 +164,8 @@ export default {
       // }
       // state.grid = [ ...grid ]
     },
-    build3dObjs ({ dispatch, commit, state, rootGetters }) {
+    build3dObjs ({ dispatch, commit, state, getters, rootGetters }) {
+      console.log('build3dObjs')
       // http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
 
       let backGeom = new THREE.BoxGeometry(state.size.x, state.size.y, state.wall.wallW)
@@ -157,11 +173,23 @@ export default {
       backMesh.position.z = -0.5 * state.size.z
       let backBSP = new ThreeBSP(backMesh)
 
-      // TODO: use web workers
       // https://medium.com/techtrument/multithreading-javascript-46156179cf9a
+      let winGeom = new THREE.BoxGeometry(state.wall.winW, state.wall.winH, state.wall.wallW)
+      let winMesh = new THREE.Mesh(winGeom)
+      let windowsGeom = new THREE.Geometry()
+
+      for (var i = 0; i < state.wall.nbrWinX; i++) {
+        for (var j = 0; j < state.wall.nbrWinY; j++) {
+          winMesh.position.z = -0.5 * state.size.z
+          winMesh.position.x = -0.5 * state.size.x + state.wall.margin + state.wall.winW * 0.5 + i * (state.wall.winW + state.wall.paddingX)
+          winMesh.position.y = 0.5 * state.size.y - state.wall.margin - state.wall.winH * 0.5 - j * (state.wall.winH + state.wall.paddingY)
+          // winMesh.updateMatrix()
+          windowsGeom.mergeMesh(winMesh)
+        }
+      }
+      let windowsBSP = new ThreeBSP(windowsGeom)
+      backBSP = backBSP.subtract(windowsBSP)
 
-      // let winGeom = new THREE.BoxGeometry(state.wall.winW, state.wall.winH, state.wall.wallW)
-      // let winMesh = new THREE.Mesh(winGeom)
       // let winBSP
       // for (var i = 0; i < state.wall.nbrWinX; i++) {
       //   for (var j = 0; j < state.wall.nbrWinY; j++) {
@@ -172,19 +200,6 @@ export default {
       //     backBSP = backBSP.subtract(winBSP)
       //   }
       // }
-      //
-      // // let abovewWaterH = position.y + state.size.y / 2
-      // // let underWaterHThd = (-1 * position.y - state.size.y / 2) / 3
-      // // let levelH = 4
-      // // let levelGeom = new THREE.BoxGeometry(state.size.x, levelH, wallW)
-      // // let levelMesh, levelBSP
-      // // for (var l = 0; l < 2; l++) {
-      // //   levelMesh = new THREE.Mesh(levelGeom)
-      // //   levelMesh.position.z = -0.5 * state.size.z
-      // //   levelMesh.position.y = 0.5 * state.size.y - abovewWaterH - underWaterHThd - underWaterHThd * l + levelH * 0.5
-      // //   levelBSP = new ThreeBSP(levelMesh)
-      // //   backBSP = backBSP.union(levelBSP)
-      // // }
 
       backMesh = backBSP.toMesh()
       let faceMesh = backMesh.clone()
@@ -197,39 +212,11 @@ export default {
       // rightMesh.position.z = 0.5 * state.size.z
       let rightBSP = new ThreeBSP(rightMesh)
 
-      // // WE MAY NO NEED TO DIG WINDOWS ON SIDE WALLS
-      // // // dig windows on right
-      // // let nbrWinZ = Math.floor((state.size.z - 2 * margin) / winW)
-      // // let paddingZ = (state.size.z - 2 * margin - winW * nbrWinZ) / (nbrWinX - 1)
-      // // winGeom = new THREE.BoxGeometry(wallW, winH, winW)
-      // // for (i = 0; i < nbrWinZ; i++) {
-      // //   for (j = 0; j < nbrWinY; j++) {
-      // //     // right
-      // //     winMesh = new THREE.Mesh(winGeom)
-      // //     winMesh.position.x = 0.5 * state.size.x
-      // //     winMesh.position.z = -0.5 * state.size.z + margin + winW * 0.5 + i * (winW + paddingZ)
-      // //     winMesh.position.y = 0.5 * state.size.y - margin - winH * 0.5 - j * (winH + paddingY)
-      // //     winBSP = new ThreeBSP(winMesh)
-      // //     rightBSP = rightBSP.subtract(winBSP)
-      // //   }
-      // // }
-      // // rightMesh = rightBSP.toMesh()
-
       let leftMesh = rightMesh.clone()
       leftMesh.position.x = -0.5 * state.size.x
       // leftMesh.position.z = 0.5 * state.size.z
       let leftBSP = new ThreeBSP(leftMesh)
 
-      // // let topGeom = new THREE.BoxGeometry(state.size.x, wallW, state.size.z)
-      // // let topMesh = new THREE.Mesh(topGeom)
-      // // // topMesh.position.y = -0.5 * state.size.y
-      // // // let topBSP = new ThreeBSP(topMesh)
-      // //
-      // // let floorGeom = new THREE.BoxGeometry(state.size.x, wallW, state.size.z)
-      // // let floorMesh = new THREE.Mesh(floorGeom)
-      // // // floorMesh.position.y = 0.5 * state.size.y
-      // // // let floorBSP = new ThreeBSP(floorMesh)
-
       let buildingBSP = backBSP.union(rightBSP)
       buildingBSP = buildingBSP.union(faceBSP)
       buildingBSP = buildingBSP.union(leftBSP)
@@ -261,24 +248,24 @@ export default {
       // // })
       // // building.material = buildingMat
 
-      // // create a classical material for building
-      // // let topColor = `hsla(201, 100%, 95%, 1)`
-      // let hTop = Math.round(195 + Math.random() * 10)
-      // let sTop = Math.round(100)
-      // let lTop = Math.round(95)
-      // let hFloor = Math.round(205 + Math.random() * 10)
-      // let sFloor = Math.round(40 + Math.random() * 20)
-      // 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(this.createGradientCanvas(topColor, bottomColor))
+      // create a classical material for building
+      // let topColor = `hsla(201, 100%, 95%, 1)`
+      let hTop = Math.round(195 + Math.random() * 10)
+      let sTop = Math.round(100)
+      let lTop = Math.round(95)
+      let hFloor = Math.round(205 + Math.random() * 10)
+      let sFloor = Math.round(40 + Math.random() * 20)
+      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
+        shininess: 30,
+        map: gradientTexture
         // wireframe: true,
         // transparent: true,
         // opacity: 0.6
@@ -288,31 +275,36 @@ export default {
 
       commit('setWalls3dObj', building)
 
-      let buildingPos = { ...state.position, ...{ z: 0.5 * state.size.z } }
+      let buildingPos = { ...state.position, ...{ z: state.position.z - 0.5 * state.size.z } }
       commit('setWallsPos', buildingPos)
 
-      // // TOP & FLOOR
-      // 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)
-      // let topPosition = { ...position }
-      // topPosition.y += 0.5 * state.size.y
-      //
-      // // 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)
-      // let floorPosition = { ...position }
-      // floorPosition.y -= 0.5 * state.size.y
+      // TOP & FLOOR
+      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 }
+      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 }
+      floorPosition.y -= 0.5 * state.size.y
+      commit('setFloorPos', floorPosition)
+
       //
       // // LEVELS
       // let levelGeom = new THREE.BoxGeometry(state.size.x, 1, state.size.z)

src/store/modules/projects.js

@@ -22,12 +22,12 @@ export default {
       return state.marginBetweenBuildings
     },
     projectID: (state) => (index) => {
-      console.log('getter projectID index', index)
+      // console.log('getter projectID index', index)
       return state.projects[index].id
     },
     getGridPos: (state) => (index) => {
       let popped = state.projects[index].grid.pop()
-      console.log('getGridPos: popped', popped)
+      // console.log('getGridPos: popped', popped)
       return popped
     }
   },
@@ -86,7 +86,7 @@ export default {
       // console.log('state.marginBetweenBuildings', state.marginBetweenBuildings)
       // console.log('state.count', state.count)
       commit('increaseTotalW', state.marginBetweenBuildings * (projects.length - 1))
-      console.log('PROJECTS state.totalW', state.totalW)
+      // console.log('PROJECTS state.totalW', state.totalW)
       projects.forEach((project, i) => {
         name = `project:${project.id}`
         // convert to number the project id
@@ -94,11 +94,11 @@ export default {
         if (!(this.state && this.state[name])) {
           // Randomly Define the size and position of each building as here we need to know the totalW (not so clean)
           w = Math.round(21 + Math.random() * 15)
-          console.log('w', w)
+          // console.log('w', w)
           commit('increaseTotalW', w)
           size = {
             x: w,
-            y: Math.round(100 + Math.random() * 250),
+            y: Math.round(150 + Math.random() * 50),
             z: Math.round(10 + Math.random() * 30)
           }
           // convert to number the project id