first draft of contents grid placing

src/components/objects/Project.vue

@@ -16,6 +16,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="visible"
         :data="item"
         />
@@ -24,6 +25,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="context"
         :data="item"
         />
@@ -32,6 +34,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="process"
         :data="item"
         />
@@ -40,6 +43,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="concept"
         :data="item"
         />
@@ -71,49 +75,23 @@ export default {
     // get size and positions from project store
     let size = { ...this.data.size }
     let position = { ...this.data.position }
-
+    let wall = { ...this.data.wall }
     // http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
     // console.log('ThreeBSP', ThreeBSP)
 
-    let wallW = 0.001
-
-    let backGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
+    let backGeom = new THREE.BoxGeometry(size.x, size.y, wall.wallW)
     let backMesh = new THREE.Mesh(backGeom)
     backMesh.position.z = -0.5 * size.z
     let backBSP = new ThreeBSP(backMesh)
 
-    // dig windows on face and back
-    let winW = 2 + Math.random() * 2
-    let winH = 4 + Math.random() * 4
-    let margin = 2
-    let nbrWinX = 0
-    let paddingX = 0
-    let a = 0
-    // removing windows until padding is enough
-    while (paddingX < 0.4) {
-      nbrWinX = Math.floor((size.x - 2 * margin) / winW) - a
-      paddingX = (size.x - 2 * margin - winW * nbrWinX) / (nbrWinX - 1)
-      a++
-    }
-    // console.log('paddingX', paddingX)
-    let nbrWinY = 0
-    let paddingY = 0
-    a = 0
-    // removing windows until padding is enough
-    while (paddingY < 0.4) {
-      nbrWinY = Math.floor((size.y - 2 * margin) / winH) - a
-      paddingY = (size.y - 2 * margin - winH * nbrWinY) / (nbrWinY - 1)
-      a++
-    }
-    let winGeom = new THREE.BoxGeometry(winW, winH, wallW)
-    let winMesh, winBSP
-    for (var i = 0; i < nbrWinX; i++) {
-      for (var j = 0; j < nbrWinY; j++) {
-        // back
-        winMesh = new THREE.Mesh(winGeom)
+    let winGeom = new THREE.BoxGeometry(wall.winW, wall.winH, wall.wallW)
+    let winMesh = new THREE.Mesh(winGeom)
+    let winBSP
+    for (var i = 0; i < wall.nbrWinX; i++) {
+      for (var j = 0; j < wall.nbrWinY; j++) {
         winMesh.position.z = -0.5 * size.z
-        winMesh.position.x = -0.5 * size.x + margin + winW * 0.5 + i * (winW + paddingX)
-        winMesh.position.y = 0.5 * size.y - margin - winH * 0.5 - j * (winH + paddingY)
+        winMesh.position.x = -0.5 * size.x + wall.margin + wall.winW * 0.5 + i * (wall.winW + wall.paddingX)
+        winMesh.position.y = 0.5 * size.y - wall.margin - wall.winH * 0.5 - j * (wall.winH + wall.paddingY)
         winBSP = new ThreeBSP(winMesh)
         backBSP = backBSP.subtract(winBSP)
       }
@@ -137,7 +115,7 @@ export default {
     faceMesh.position.z = 0.5 * size.z
     let faceBSP = new ThreeBSP(faceMesh)
 
-    let rightGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
+    let rightGeom = new THREE.BoxGeometry(wall.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
@@ -216,10 +194,11 @@ export default {
     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))
+
     let materialOpts = {
       color: 0xffffff,
       side: THREE.DoubleSide,
@@ -249,7 +228,7 @@ export default {
     // var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
     // sun.position.set(-150, 200, 110)
 
-    let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    let topGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
     let topOpts = {
       color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
       // side: THREE.DoubleSide,
@@ -260,7 +239,7 @@ export default {
     let topPosition = { ...position }
     topPosition.y += 0.5 * size.y
 
-    let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    let floorGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
     let floorOpts = {
       color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
       // side: THREE.DoubleSide,