fixed camera's latitude, added nbr opaque faces option

src/App.vue

@@ -39,8 +39,8 @@
             <template v-if="projects.length">
               <project
                 v-for="(project) in projects"
-                :key="project.id"
                 :id="project.id"
+                :key="project.id"
               />
             </template>
 
@@ -317,7 +317,7 @@ export default {
           let cam = this.camera
           console.log('onDocMouseUp intersects', intersects)
           let object = intersects[0].object
-          console.log('object[0].name', object.name)
+          console.log('object[0]', object)
           let vnode = object.userData.vnode
           if (object.name === 'Content' && vnode.isOpened) {
             this.content_data = vnode.data
@@ -335,8 +335,9 @@ export default {
           this.opened_vnode = vnode
 
           // get new camera target pos
-          let toPos = { ...object.position }
+          let toPos
           if (object.name === 'Content') {
+            toPos = { ...object.position }
             this.controls.lat = 0
             switch (vnode.face) {
               case 'left':
@@ -363,7 +364,7 @@ export default {
               .to(object.position, 2000)
               .start()
           } else if (object.name === 'Project') {
-            toPos.z *= 0.5
+            toPos = { ...object.userData.position }
             toPos.y = 2
           }
           // toPos.y = 5
@@ -390,7 +391,7 @@ export default {
     animate (tt) {
       // CONTROLS
       if (this.controls.user_interact) {
-        this.controls.lat = Math.max(-85, Math.min(85, this.controls.lat))
+        this.controls.lat = Math.max(-25, Math.min(45, this.controls.lat))
         this.controls.phi = this.deg2rad(90 - this.controls.lat)
         this.controls.theta = this.deg2rad(this.controls.lon)
         // if (this.controls.user_interact === false) {

src/components/objects/Project.vue

@@ -125,6 +125,7 @@ export default {
     // record self references
     this.block3d = this.$refs.block3d.curObj
     this.block3d.userData.vnode = this
+    this.block3d.userData.position = this.position
     this.label3d = this.$refs.label3d.curObj
   },
   methods: {

src/store/modules/project.js

@@ -100,12 +100,12 @@ export default {
   // actions
   actions: {
     init ({ dispatch, commit, state, rootGetters }) {
-      console.log('Init Project module', state.id)
+      console.log(`Init Project module ${state.id}`, state)
       dispatch('sizingBuilding')
       dispatch('build3dObjs')
     },
     sizingBuilding ({ dispatch, commit, state, rootGetters }) {
-      console.log('sizingBuilding')
+      console.log('sizingBuilding, state', state)
       let totalW = rootGetters['Projects/totalW']
       // console.log('totalW', totalW)
       let margin = rootGetters['Projects/marginBetweenBuildings']
@@ -139,7 +139,7 @@ export default {
         x: x,
         // y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
         y: -state.size.y / 4,
-        z: -10 + Math.random() * 10
+        z: 0// -10 + Math.random() * 10
       })
 
       // WINDOWS
@@ -211,10 +211,10 @@ export default {
       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)
-      let backMesh = new THREE.Mesh(backGeom)
-      backMesh.position.z = -0.5 * state.size.z
-      let backBSP = new ThreeBSP(backMesh)
+      let frontGeom = new THREE.BoxGeometry(state.size.x, state.size.y, state.wall.wallW)
+      let frontMesh = new THREE.Mesh(frontGeom)
+      frontMesh.position.z = 0.5 * state.size.z
+      let frontBSP = new ThreeBSP(frontMesh)
 
       // https://medium.com/techtrument/multithreading-javascript-46156179cf9a
       let winGeom = new THREE.BoxGeometry(state.wall.winW, state.wall.winH, state.wall.wallW)
@@ -223,7 +223,7 @@ export default {
 
       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.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()
@@ -231,23 +231,18 @@ export default {
         }
       }
       let windowsBSP = new ThreeBSP(windowsGeom)
-      backBSP = backBSP.subtract(windowsBSP)
+      let frontWindowedBSP = frontBSP.subtract(windowsBSP)
 
-      // let winBSP
-      // 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)
-      //     winBSP = new ThreeBSP(winMesh)
-      //     backBSP = backBSP.subtract(winBSP)
-      //   }
-      // }
-
-      backMesh = backBSP.toMesh()
-      let faceMesh = backMesh.clone()
-      faceMesh.position.z = 0.5 * state.size.z
-      let faceBSP = new ThreeBSP(faceMesh)
+      // console.log('state.Faces_opaques', state.Faces_opaques)
+      let backWindowedMesh
+      if (state.Faces_opaques === 3) {
+        backWindowedMesh = frontMesh.clone()
+      } else {
+        let frontWindowedMesh = frontWindowedBSP.toMesh()
+        backWindowedMesh = frontWindowedMesh.clone()
+      }
+      backWindowedMesh.position.z = -0.5 * state.size.z
+      let backWindowedBSP = new ThreeBSP(backWindowedMesh)
 
       let rightGeom = new THREE.BoxGeometry(state.wall.wallW, state.size.y, state.size.z)
       let rightMesh = new THREE.Mesh(rightGeom)
@@ -260,11 +255,9 @@ export default {
       // leftMesh.position.z = 0.5 * state.size.z
       let leftBSP = new ThreeBSP(leftMesh)
 
-      let buildingBSP = backBSP.union(rightBSP)
-      buildingBSP = buildingBSP.union(faceBSP)
+      let buildingBSP = frontWindowedBSP.union(rightBSP)
+      buildingBSP = buildingBSP.union(backWindowedBSP)
       buildingBSP = buildingBSP.union(leftBSP)
-      // buildingBSP = buildingBSP.union(topBSP)
-      // buildingBSP = buildingBSP.union(floorBSP)
 
       // convert back to three.js mesh
       let building = buildingBSP.toMesh()
@@ -291,7 +284,7 @@ export default {
       building.material = new THREE.MeshPhongMaterial(materialOpts)
       // commiting walls
       commit('setWalls3dObj', building)
-      let buildingPos = { ...state.position, ...{ z: 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

src/store/modules/projects.js

@@ -48,6 +48,7 @@ export default {
             id
             Weight
             Titre
+            Faces_opaques
           }
         }` })
         .then(({ data: { data: { projects } = null } }) => {