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) 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 // * Converts an HSL color value to RGB. Conversion formula
src/components/objects/Project.vue
+8 -4
View File
@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" /> <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
<!-- <object3d ref="top" :obj="top_mesh" :position="top_position" /> <object3d ref="top" :obj="top3dObj" :position="topPos" />
<object3d ref="floor" :obj="floor_mesh" :position="floor_position" /> <object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
<object3d ref="level" :obj="level_mesh" :position="level_position" /> --> <!-- <object3d ref="level" :obj="level_mesh" :position="level_position" /> -->
<!-- <light :obj="light" :position="building_position" /> --> <!-- <light :obj="light" :position="building_position" /> -->
<!-- <mesh ref="label3d" name="Label" :position="label_position"> <!-- <mesh ref="label3d" name="Label" :position="label_position">
<geometry type="Plane" :args="[label_size.x, label_size.y]" /> <geometry type="Plane" :args="[label_size.x, label_size.y]" />
@@ -118,7 +118,11 @@ export default {
// size: state => state.size, // size: state => state.size,
// position: state => state.position, // position: state => state.position,
walls3dObj: state => state.walls3dObj, 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 () { // label_texture_opts () {
// return { // return {
src/store/modules/project.js
+106 -114
View File
@@ -17,6 +17,10 @@ export default {
position: { x: 0, y: 0, z: 0 }, position: { x: 0, y: 0, z: 0 },
walls3dObj: null, walls3dObj: null,
wallsPos: null, wallsPos: null,
top3dObj: null,
topPos: null,
floor3dObj: null,
floorPos: null,
wall: { wall: {
wallW: 0.001, wallW: 0.001,
// dig windows on face and back // dig windows on face and back
@@ -40,6 +44,17 @@ export default {
}, },
size: (state) => { size: (state) => {
return state.size 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) => { setPosition: (state, pos) => {
state.position = pos state.position = pos
}, },
setWalls3dObj: (state, obj) => { setWalls3dObj: (state, obj) => { state.walls3dObj = obj },
state.walls3dObj = obj setWallsPos: (state, pos) => { state.wallsPos = pos },
}, setTop3dObj: (state, obj) => { state.top3dObj = obj },
setWallsPos: (state, pos) => { setTopPos: (state, pos) => { state.topPos = pos },
state.wallsPos = pos setFloor3dObj: (state, obj) => { state.floor3dObj = obj },
} setFloorPos: (state, pos) => { state.floorPos = pos }
}, },
// actions // actions
@@ -67,11 +82,11 @@ export default {
dispatch('build3dObjs') dispatch('build3dObjs')
}, },
sizingBuilding ({ dispatch, commit, state, rootGetters }) { sizingBuilding ({ dispatch, commit, state, rootGetters }) {
console.log('sizingBuilding', state.index) console.log('sizingBuilding')
let totalW = rootGetters['Projects/totalW'] let totalW = rootGetters['Projects/totalW']
console.log('totalW', totalW) // console.log('totalW', totalW)
let margin = rootGetters['Projects/marginBetweenBuildings'] let margin = rootGetters['Projects/marginBetweenBuildings']
console.log('margin', margin) // console.log('margin', margin)
// positioning buildings on x regarding the widths // positioning buildings on x regarding the widths
// & setting up the window sizing // & setting up the window sizing
@@ -83,43 +98,43 @@ export default {
let x let x
if (state.index === 0) { if (state.index === 0) {
// if it's the first // if it's the first
x = -1 * totalW / 2 x = -1 * totalW / 2 + state.size.x / 2
} else { } else {
// else get the precedent pos // else get the precedent pos
let prevProjID = rootGetters['Projects/projectID'](state.index - 1) let prevProjID = rootGetters['Projects/projectID'](state.index - 1)
console.log('prevProjID', prevProjID) // console.log('prevProjID', prevProjID)
let prevProjPos = rootGetters[`project:${prevProjID}/position`] 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`] let prevProjSize = rootGetters[`project:${prevProjID}/size`]
console.log(`project:${prevProjID}/size.x`, prevProjSize.x) // console.log(`project:${prevProjID}/size.x`, prevProjSize.x)
console.log('state.size.x', state.size.x) // console.log('state.size.x', state.size.x)
// prev X + alf of prev size x + margin + half of current 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 x = prevProjPos.x + prevProjSize.x / 2 + margin + state.size.x / 2
} }
console.log('x', x) // console.log('x', x)
commit('setPosition', { commit('setPosition', {
x: x, x: x,
y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2 y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
z: -10 + Math.random() * 10 z: -10 + Math.random() * 10
}) })
// // WINDOWS // WINDOWS
// // removing windows on X until padding is enough let a = 0
// a = 0 state.wall.nbrWinX = Math.floor((state.size.x - 2 * state.wall.margin) / state.wall.winW)
// 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) { while (state.wall.paddingX < 0.4) {
// state.wall.nbrWinX -= a state.wall.nbrWinX -= a
// state.wall.paddingX = (state.size.x - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinX) / (state.wall.nbrWinX - 1) state.wall.paddingX = (state.size.x - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinX) / (state.wall.nbrWinX - 1)
// a++ a++
// } }
// // removing windows on Y until padding is enough a = 0
// a = 0 state.wall.nbrWinY = Math.floor((state.size.y - 2 * state.wall.margin) / state.wall.winH)
// 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) { while (state.wall.paddingY < 0.4) {
// state.wall.nbrWinY -= a state.wall.nbrWinY -= a
// state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1) state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1)
// a++ a++
// } }
// state.wall = { ...wall } // state.wall = { ...wall }
// //
// // CONTENTS GRID // // CONTENTS GRID
@@ -149,7 +164,8 @@ export default {
// } // }
// state.grid = [ ...grid ] // 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/ // 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 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 backMesh.position.z = -0.5 * state.size.z
let backBSP = new ThreeBSP(backMesh) let backBSP = new ThreeBSP(backMesh)
// TODO: use web workers
// https://medium.com/techtrument/multithreading-javascript-46156179cf9a // 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 // let winBSP
// for (var i = 0; i < state.wall.nbrWinX; i++) { // for (var i = 0; i < state.wall.nbrWinX; i++) {
// for (var j = 0; j < state.wall.nbrWinY; j++) { // for (var j = 0; j < state.wall.nbrWinY; j++) {
@@ -172,19 +200,6 @@ export default {
// backBSP = backBSP.subtract(winBSP) // 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() backMesh = backBSP.toMesh()
let faceMesh = backMesh.clone() let faceMesh = backMesh.clone()
@@ -197,39 +212,11 @@ export default {
// rightMesh.position.z = 0.5 * state.size.z // rightMesh.position.z = 0.5 * state.size.z
let rightBSP = new ThreeBSP(rightMesh) 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() let leftMesh = rightMesh.clone()
leftMesh.position.x = -0.5 * state.size.x leftMesh.position.x = -0.5 * state.size.x
// leftMesh.position.z = 0.5 * state.size.z // leftMesh.position.z = 0.5 * state.size.z
let leftBSP = new ThreeBSP(leftMesh) 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) let buildingBSP = backBSP.union(rightBSP)
buildingBSP = buildingBSP.union(faceBSP) buildingBSP = buildingBSP.union(faceBSP)
buildingBSP = buildingBSP.union(leftBSP) buildingBSP = buildingBSP.union(leftBSP)
@@ -261,24 +248,24 @@ export default {
// // }) // // })
// // building.material = buildingMat // // building.material = buildingMat
// // create a classical material for building // create a classical material for building
// // let topColor = `hsla(201, 100%, 95%, 1)` // let topColor = `hsla(201, 100%, 95%, 1)`
// let hTop = Math.round(195 + Math.random() * 10) let hTop = Math.round(195 + Math.random() * 10)
// let sTop = Math.round(100) let sTop = Math.round(100)
// let lTop = Math.round(95) let lTop = Math.round(95)
// let hFloor = Math.round(205 + Math.random() * 10) let hFloor = Math.round(205 + Math.random() * 10)
// let sFloor = Math.round(40 + Math.random() * 20) let sFloor = Math.round(40 + Math.random() * 20)
// let lFloor = Math.round(5 + Math.random() * 15) let lFloor = Math.round(5 + Math.random() * 15)
// let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)` let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
// let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)` let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
//
// let gradientTexture = new THREE.CanvasTexture(this.createGradientCanvas(topColor, bottomColor)) let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, bottomColor))
let materialOpts = { let materialOpts = {
color: 0xffffff, color: 0xffffff,
side: THREE.DoubleSide, side: THREE.DoubleSide,
shininess: 30 shininess: 30,
// map: gradientTexture map: gradientTexture
// wireframe: true, // wireframe: true,
// transparent: true, // transparent: true,
// opacity: 0.6 // opacity: 0.6
@@ -288,31 +275,36 @@ export default {
commit('setWalls3dObj', building) 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) commit('setWallsPos', buildingPos)
// // TOP & FLOOR // TOP & FLOOR
// let topGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z) let topGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
// let topOpts = { let topOpts = {
// color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`), color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
// // side: THREE.DoubleSide, // side: THREE.DoubleSide,
// shininess: 30 shininess: 30
// } }
// let topMat = new THREE.MeshPhongMaterial(topOpts) let topMat = new THREE.MeshPhongMaterial(topOpts)
// let topMesh = new THREE.Mesh(topGeom, topMat) let topMesh = new THREE.Mesh(topGeom, topMat)
// let topPosition = { ...position } commit('setTop3dObj', topMesh)
// topPosition.y += 0.5 * state.size.y let topPosition = { ...state.position }
// topPosition.y += 0.5 * state.size.y
// // let floorGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z) commit('setTopPos', topPosition)
// let floorOpts = {
// color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`), // let floorGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
// // side: THREE.DoubleSide, let floorOpts = {
// shininess: 10 color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
// } // side: THREE.DoubleSide,
// let floorMat = new THREE.MeshPhongMaterial(floorOpts) shininess: 10
// let floorMesh = new THREE.Mesh(topGeom, floorMat) }
// let floorPosition = { ...position } let floorMat = new THREE.MeshPhongMaterial(floorOpts)
// floorPosition.y -= 0.5 * state.size.y 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 // // LEVELS
// let levelGeom = new THREE.BoxGeometry(state.size.x, 1, state.size.z) // 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 return state.marginBetweenBuildings
}, },
projectID: (state) => (index) => { projectID: (state) => (index) => {
console.log('getter projectID index', index) // console.log('getter projectID index', index)
return state.projects[index].id return state.projects[index].id
}, },
getGridPos: (state) => (index) => { getGridPos: (state) => (index) => {
let popped = state.projects[index].grid.pop() let popped = state.projects[index].grid.pop()
console.log('getGridPos: popped', popped) // console.log('getGridPos: popped', popped)
return popped return popped
} }
}, },
@@ -86,7 +86,7 @@ export default {
// console.log('state.marginBetweenBuildings', state.marginBetweenBuildings) // console.log('state.marginBetweenBuildings', state.marginBetweenBuildings)
// console.log('state.count', state.count) // console.log('state.count', state.count)
commit('increaseTotalW', state.marginBetweenBuildings * (projects.length - 1)) 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) => { projects.forEach((project, i) => {
name = `project:${project.id}` name = `project:${project.id}`
// convert to number the project id // convert to number the project id
@@ -94,11 +94,11 @@ export default {
if (!(this.state && this.state[name])) { 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) // 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) w = Math.round(21 + Math.random() * 15)
console.log('w', w) // console.log('w', w)
commit('increaseTotalW', w) commit('increaseTotalW', w)
size = { size = {
x: w, x: w,
y: Math.round(100 + Math.random() * 250), y: Math.round(150 + Math.random() * 50),
z: Math.round(10 + Math.random() * 30) z: Math.round(10 + Math.random() * 30)
} }
// convert to number the project id // convert to number the project id