|
@@ -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)
|