bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

windows are back

Browse Source
This commit is contained in:
bachir
2020-09-16 11:48:06 +02:00
parent baa959d35e
commit 0814ee73c8
4 changed files with 130 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mixins.js
+11 -11
View File
@@ -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
+8 -4
View File
@@ -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
+106 -114
View File
@@ -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
+5 -5
View File
@@ -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