refactoring in progress: vuex submodules
This commit is contained in:
+7
-8
@@ -41,7 +41,6 @@
|
||||
v-for="(project) in projects"
|
||||
:key="project.id"
|
||||
:id="project.id"
|
||||
:title="project.Titre"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -220,14 +219,14 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
projects (n, o) {
|
||||
console.log(`watch projects new, old`, n, o)
|
||||
}
|
||||
},
|
||||
// watch: {
|
||||
// projects (n, o) {
|
||||
// console.log(`watch projects new, old`, n, o)
|
||||
// }
|
||||
// },
|
||||
created () {
|
||||
if (!this.projects.length) {
|
||||
this.getProjects()
|
||||
this.loadProjects()
|
||||
}
|
||||
this.$env3d.scene = this.myScene
|
||||
this.$env3d.renderer = this.myRenderer
|
||||
@@ -255,7 +254,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
getProjects: 'Projects/getProjects'
|
||||
loadProjects: 'Projects/loadProjects'
|
||||
}),
|
||||
handleScene (scene) {
|
||||
console.log('handlescene', scene)
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<object3d ref="block3d" name="Project" :obj="building" :position="building_position" />
|
||||
<object3d ref="top" :obj="top_mesh" :position="top_position" />
|
||||
<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="level" :obj="level_mesh" :position="level_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]" />
|
||||
<material type="MeshLambert" :options="label_opts">
|
||||
<texture :options="label_texture_opts" />
|
||||
</material>
|
||||
</mesh>
|
||||
</mesh> -->
|
||||
<!-- <div v-if="isOpened">
|
||||
<ContentBlock
|
||||
v-for="item in data.visibles"
|
||||
@@ -57,8 +57,7 @@
|
||||
import { mapInstanceState } from '@urbn/vuex-helpers'
|
||||
|
||||
import * as THREE from 'three'
|
||||
// import { toCSG, fromCSG } from 'three-csg'
|
||||
import { ThreeBSP } from 'three-js-csg-es6'
|
||||
// import { ThreeBSP } from 'three-js-csg-es6'
|
||||
|
||||
import mixins from 'components/mixins'
|
||||
|
||||
@@ -77,202 +76,11 @@ export default {
|
||||
// ContentBlock
|
||||
},
|
||||
mixins: [mixins],
|
||||
props: { id: Number, title: String },
|
||||
props: { id: Number },
|
||||
data () {
|
||||
console.log('Project data() : data', this.data)
|
||||
// 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 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)
|
||||
|
||||
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 + 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)
|
||||
}
|
||||
}
|
||||
|
||||
// let abovewWaterH = position.y + size.y / 2
|
||||
// let underWaterHThd = (-1 * position.y - size.y / 2) / 3
|
||||
// let levelH = 4
|
||||
// let levelGeom = new THREE.BoxGeometry(size.x, levelH, wallW)
|
||||
// let levelMesh, levelBSP
|
||||
// for (var l = 0; l < 2; l++) {
|
||||
// levelMesh = new THREE.Mesh(levelGeom)
|
||||
// levelMesh.position.z = -0.5 * size.z
|
||||
// levelMesh.position.y = 0.5 * size.y - abovewWaterH - underWaterHThd - underWaterHThd * l + levelH * 0.5
|
||||
// levelBSP = new ThreeBSP(levelMesh)
|
||||
// backBSP = backBSP.union(levelBSP)
|
||||
// }
|
||||
|
||||
backMesh = backBSP.toMesh()
|
||||
let faceMesh = backMesh.clone()
|
||||
faceMesh.position.z = 0.5 * size.z
|
||||
let faceBSP = new ThreeBSP(faceMesh)
|
||||
|
||||
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
|
||||
let rightBSP = new ThreeBSP(rightMesh)
|
||||
|
||||
// WE MAY NO NEED TO DIG WINDOWS ON SIDE WALLS
|
||||
// // dig windows on right
|
||||
// let nbrWinZ = Math.floor((size.z - 2 * margin) / winW)
|
||||
// let paddingZ = (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 * size.x
|
||||
// winMesh.position.z = -0.5 * size.z + margin + winW * 0.5 + i * (winW + paddingZ)
|
||||
// winMesh.position.y = 0.5 * 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 * size.x
|
||||
// leftMesh.position.z = 0.5 * size.z
|
||||
let leftBSP = new ThreeBSP(leftMesh)
|
||||
//
|
||||
// let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
// let topMesh = new THREE.Mesh(topGeom)
|
||||
// // topMesh.position.y = -0.5 * size.y
|
||||
// // let topBSP = new ThreeBSP(topMesh)
|
||||
//
|
||||
// let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
// let floorMesh = new THREE.Mesh(floorGeom)
|
||||
// // floorMesh.position.y = 0.5 * size.y
|
||||
// // let floorBSP = new ThreeBSP(floorMesh)
|
||||
|
||||
let buildingBSP = backBSP.union(rightBSP)
|
||||
buildingBSP = buildingBSP.union(faceBSP)
|
||||
buildingBSP = buildingBSP.union(leftBSP)
|
||||
// buildingBSP = buildingBSP.union(topBSP)
|
||||
// buildingBSP = buildingBSP.union(floorBSP)
|
||||
|
||||
// convert back to three.js mesh
|
||||
let building = buildingBSP.toMesh()
|
||||
console.log('building.faces', building)
|
||||
|
||||
// create a custom shaderMaterial to had gradian colors
|
||||
// var uniforms = THREE.UniformsUtils.merge([
|
||||
// THREE.UniformsLib['lights'],
|
||||
// {
|
||||
// 'topColor': { value: new THREE.Color(0xffffff) },
|
||||
// 'groundColor': { value: new THREE.Color(0xbcd6e4) },
|
||||
// 'bottomColor': { value: new THREE.Color(0x07223b) },
|
||||
// // 'bottomColor': { value: new THREE.Color(0x000000) },
|
||||
// // 'groundColor': { value: new THREE.Color(0xff0000) },
|
||||
// // 'bottomColor': { value: new THREE.Color(0x00ff00) },
|
||||
// lightIntensity: { type: 'f', value: 1.0 }
|
||||
// }
|
||||
// ])
|
||||
// var buildingMat = new THREE.ShaderMaterial({
|
||||
// uniforms: uniforms,
|
||||
// vertexShader: BgVertex,
|
||||
// fragmentShader: BuildingFragment,
|
||||
// side: THREE.DoubleSide,
|
||||
// lights: true
|
||||
// })
|
||||
// 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))
|
||||
|
||||
let materialOpts = {
|
||||
color: 0xffffff,
|
||||
side: THREE.DoubleSide,
|
||||
shininess: 30,
|
||||
map: gradientTexture
|
||||
// wireframe: true,
|
||||
// transparent: true,
|
||||
// opacity: 0.6
|
||||
// renderOrder: 0
|
||||
}
|
||||
building.material = new THREE.MeshPhongMaterial(materialOpts)
|
||||
|
||||
// building.castShadow = true
|
||||
// building.receiveShadow = true
|
||||
|
||||
// let buildingGeom = fromCSG(boxCSG)
|
||||
// buildingGeom.computeVertexNormals()
|
||||
|
||||
// result
|
||||
// let subtractCSG = boxMeshCSG.subtract(holeMeshCSG)
|
||||
// let building = fromCSG(boxMeshCSG) // converting CSG back into ThreeJS object
|
||||
//
|
||||
let buildingPos = { ...position }
|
||||
buildingPos.z -= 0.5 * size.z
|
||||
|
||||
// TOP & FLOOR
|
||||
let topGeom = new THREE.BoxGeometry(size.x, wall.wallW, 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 * size.y
|
||||
|
||||
// let floorGeom = new THREE.BoxGeometry(size.x, wall.wallW, 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 * size.y
|
||||
|
||||
// LEVELS
|
||||
let levelGeom = new THREE.BoxGeometry(size.x, 1, size.z)
|
||||
let levelMesh = new THREE.Mesh(levelGeom)
|
||||
let levelBSP = new ThreeBSP(levelMesh)
|
||||
let levelHoleGeom = new THREE.BoxGeometry(size.x - 3, 1, size.z - 3)
|
||||
let levelHoleMesh = new THREE.Mesh(levelHoleGeom)
|
||||
let levelHoleBSP = new ThreeBSP(levelHoleMesh)
|
||||
levelBSP = levelBSP.subtract(levelHoleBSP)
|
||||
levelMesh = levelBSP.toMesh()
|
||||
let levelOpts = {
|
||||
color: 0xff0000,
|
||||
shininess: 10
|
||||
}
|
||||
let levelMat = new THREE.MeshPhongMaterial(levelOpts)
|
||||
levelMesh.material = levelMat
|
||||
console.log('Project data()')
|
||||
|
||||
return {
|
||||
modName: null,
|
||||
block3d: null,
|
||||
// block_opts: materialOpts,
|
||||
label3d: null,
|
||||
@@ -284,20 +92,20 @@ export default {
|
||||
// renderOrder: 0
|
||||
},
|
||||
// size and positions are defined in store project
|
||||
size: size,
|
||||
position: position,
|
||||
// size: size,
|
||||
// position: position,
|
||||
|
||||
// geometry: geometry,
|
||||
// light: light,
|
||||
building: building,
|
||||
building_position: buildingPos,
|
||||
top_mesh: topMesh,
|
||||
top_position: topPosition,
|
||||
floor_mesh: floorMesh,
|
||||
floor_position: floorPosition,
|
||||
level_mesh: levelMesh,
|
||||
level_position: { ...position },
|
||||
label_position: { x: 0, y: 0, z: 0 },
|
||||
// building: building,
|
||||
// building_position: buildingPos,
|
||||
// top_mesh: topMesh,
|
||||
// top_position: topPosition,
|
||||
// floor_mesh: floorMesh,
|
||||
// floor_position: floorPosition,
|
||||
// level_mesh: levelMesh,
|
||||
// level_position: { ...position },
|
||||
// label_position: { x: 0, y: 0, z: 0 },
|
||||
color: 0xffffff,
|
||||
label_canvas: null,
|
||||
label_size: null,
|
||||
@@ -306,30 +114,28 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapInstanceState(getModuleName, {
|
||||
storeID: state => state.id
|
||||
}),
|
||||
label_texture_opts () {
|
||||
return {
|
||||
canvas: this.label_canvas,
|
||||
minFilter: THREE.LinearFilter,
|
||||
wrapS: THREE.ClampToEdgeWrapping,
|
||||
wrapT: THREE.ClampToEdgeWrapping
|
||||
}
|
||||
}
|
||||
title: state => state.Titre,
|
||||
// size: state => state.size,
|
||||
// position: state => state.position,
|
||||
walls3dObj: state => state.walls3dObj,
|
||||
wallsPos: state => state.wallsPos
|
||||
})
|
||||
// label_texture_opts () {
|
||||
// return {
|
||||
// canvas: this.label_canvas,
|
||||
// minFilter: THREE.LinearFilter,
|
||||
// wrapS: THREE.ClampToEdgeWrapping,
|
||||
// wrapT: THREE.ClampToEdgeWrapping
|
||||
// }
|
||||
// }
|
||||
},
|
||||
created () {
|
||||
console.log('Project created: data', this, this.data)
|
||||
console.log('Project created: getModuleName', getModuleName)
|
||||
|
||||
// TODO: create dynamic vuex module for each project
|
||||
// this.modNameSpace = `project:${this.data.id}`
|
||||
|
||||
// this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
this.label_canvas = this.createLabelCanvas(this.storeID.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
|
||||
this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
|
||||
this.label_position.z = this.position.z + this.size.z / 2 + 0.5
|
||||
// console.log('this.label_canvas', this.label_canvas)
|
||||
// this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
|
||||
// this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
|
||||
// this.label_position.z = this.position.z + this.size.z / 2 + 0.5
|
||||
// // console.log('this.label_canvas', this.label_canvas)
|
||||
},
|
||||
mounted () {
|
||||
console.log('project mounted', this)
|
||||
@@ -342,7 +148,7 @@ export default {
|
||||
this.block3d.userData = {
|
||||
vnode: this
|
||||
}
|
||||
this.label3d = this.$refs.label3d.curObj
|
||||
// this.label3d = this.$refs.label3d.curObj
|
||||
|
||||
// light
|
||||
// console.log('project mounted', this.$env3d)
|
||||
|
||||
@@ -4,22 +4,331 @@
|
||||
// import qs from 'querystring'
|
||||
// import { REST } from 'api/rest-axios'
|
||||
|
||||
import * as THREE from 'three'
|
||||
import { ThreeBSP } from 'three-js-csg-es6'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
|
||||
// initial state
|
||||
state: {
|
||||
obj3d: null,
|
||||
size: { x: 0, y: 0, z: 0 },
|
||||
position: { x: 0, y: 0, z: 0 },
|
||||
walls3dObj: null,
|
||||
wallsPos: null,
|
||||
wall: {
|
||||
wallW: 0.001,
|
||||
// dig windows on face and back
|
||||
winW: 2 + Math.random() * 2,
|
||||
winH: 4 + Math.random() * 4,
|
||||
margin: 2,
|
||||
nbrWinX: 0,
|
||||
paddingX: 0,
|
||||
nbrWinY: 0,
|
||||
paddingY: 0,
|
||||
nbrWinZ: 0,
|
||||
paddingZ: 0
|
||||
},
|
||||
grid: []
|
||||
},
|
||||
|
||||
// getters
|
||||
getters: {
|
||||
position: (state) => {
|
||||
return state.position
|
||||
},
|
||||
size: (state) => {
|
||||
return state.size
|
||||
}
|
||||
},
|
||||
|
||||
// mutations
|
||||
mutations: {
|
||||
setSize: (state, size) => {
|
||||
state.size = size
|
||||
},
|
||||
setPosition: (state, pos) => {
|
||||
state.position = pos
|
||||
},
|
||||
setWalls3dObj: (state, obj) => {
|
||||
state.walls3dObj = obj
|
||||
},
|
||||
setWallsPos: (state, pos) => {
|
||||
state.wallsPos = pos
|
||||
}
|
||||
},
|
||||
|
||||
// actions
|
||||
actions: {
|
||||
init ({ dispatch, commit, state, rootGetters }) {
|
||||
console.log('Init Project module', state.id)
|
||||
dispatch('sizingBuilding')
|
||||
dispatch('build3dObjs')
|
||||
},
|
||||
sizingBuilding ({ dispatch, commit, state, rootGetters }) {
|
||||
console.log('sizingBuilding', state.index)
|
||||
let totalW = rootGetters['Projects/totalW']
|
||||
console.log('totalW', totalW)
|
||||
let margin = rootGetters['Projects/marginBetweenBuildings']
|
||||
console.log('margin', margin)
|
||||
|
||||
// positioning buildings on x regarding the widths
|
||||
// & setting up the window sizing
|
||||
// & setting up the content grid
|
||||
// let wall, a
|
||||
// let grid
|
||||
|
||||
// X POS
|
||||
let x
|
||||
if (state.index === 0) {
|
||||
// if it's the first
|
||||
x = -1 * totalW / 2
|
||||
} else {
|
||||
// else get the precedent pos
|
||||
let prevProjID = rootGetters['Projects/projectID'](state.index - 1)
|
||||
console.log('prevProjID', prevProjID)
|
||||
let prevProjPos = rootGetters[`project:${prevProjID}/position`]
|
||||
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)
|
||||
// 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)
|
||||
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++
|
||||
// }
|
||||
// state.wall = { ...wall }
|
||||
//
|
||||
// // CONTENTS GRID
|
||||
// a = 0
|
||||
// state.wall.nbrWinZ = Math.floor((state.size.z - 2 * state.wall.margin) / state.wall.winW)
|
||||
// while (state.wall.paddingZ < 0.4) {
|
||||
// state.wall.nbrWinZ -= a
|
||||
// state.wall.paddingZ = (state.size.z - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinZ) / (state.wall.nbrWinZ - 1)
|
||||
// a++
|
||||
// }
|
||||
//
|
||||
// grid = []
|
||||
// for (var l = 0; l < state.wall.nbrWinZ * 2; l++) { // cols
|
||||
// for (var m = 0; m < state.wall.nbrWinY * 2; m++) { // rows
|
||||
// grid.push({
|
||||
// z: margin + state.wall.winW / 2 * l,
|
||||
// y: margin + state.wall.winH / 2 * m
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// // shuffle the grid
|
||||
// for (let n = grid.length - 1; n > 0; n--) {
|
||||
// const o = Math.floor(Math.random() * n)
|
||||
// const temp = grid[n]
|
||||
// grid[n] = grid[o]
|
||||
// grid[o] = temp
|
||||
// }
|
||||
// state.grid = [ ...grid ]
|
||||
},
|
||||
build3dObjs ({ dispatch, commit, state, rootGetters }) {
|
||||
// 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)
|
||||
|
||||
// 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 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)
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// // 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()
|
||||
faceMesh.position.z = 0.5 * state.size.z
|
||||
let faceBSP = new ThreeBSP(faceMesh)
|
||||
|
||||
let rightGeom = new THREE.BoxGeometry(state.wall.wallW, state.size.y, state.size.z)
|
||||
let rightMesh = new THREE.Mesh(rightGeom)
|
||||
rightMesh.position.x = 0.5 * state.size.x
|
||||
// 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)
|
||||
// buildingBSP = buildingBSP.union(topBSP)
|
||||
// buildingBSP = buildingBSP.union(floorBSP)
|
||||
|
||||
// convert back to three.js mesh
|
||||
let building = buildingBSP.toMesh()
|
||||
|
||||
// // create a custom shaderMaterial to had gradian colors
|
||||
// // var uniforms = THREE.UniformsUtils.merge([
|
||||
// // THREE.UniformsLib['lights'],
|
||||
// // {
|
||||
// // 'topColor': { value: new THREE.Color(0xffffff) },
|
||||
// // 'groundColor': { value: new THREE.Color(0xbcd6e4) },
|
||||
// // 'bottomColor': { value: new THREE.Color(0x07223b) },
|
||||
// // // 'bottomColor': { value: new THREE.Color(0x000000) },
|
||||
// // // 'groundColor': { value: new THREE.Color(0xff0000) },
|
||||
// // // 'bottomColor': { value: new THREE.Color(0x00ff00) },
|
||||
// // lightIntensity: { type: 'f', value: 1.0 }
|
||||
// // }
|
||||
// // ])
|
||||
// // var buildingMat = new THREE.ShaderMaterial({
|
||||
// // uniforms: uniforms,
|
||||
// // vertexShader: BgVertex,
|
||||
// // fragmentShader: BuildingFragment,
|
||||
// // side: THREE.DoubleSide,
|
||||
// // lights: true
|
||||
// // })
|
||||
// // 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))
|
||||
|
||||
let materialOpts = {
|
||||
color: 0xffffff,
|
||||
side: THREE.DoubleSide,
|
||||
shininess: 30
|
||||
// map: gradientTexture
|
||||
// wireframe: true,
|
||||
// transparent: true,
|
||||
// opacity: 0.6
|
||||
// renderOrder: 0
|
||||
}
|
||||
building.material = new THREE.MeshPhongMaterial(materialOpts)
|
||||
|
||||
commit('setWalls3dObj', building)
|
||||
|
||||
let buildingPos = { ...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
|
||||
//
|
||||
// // LEVELS
|
||||
// let levelGeom = new THREE.BoxGeometry(state.size.x, 1, state.size.z)
|
||||
// let levelMesh = new THREE.Mesh(levelGeom)
|
||||
// let levelBSP = new ThreeBSP(levelMesh)
|
||||
// let levelHoleGeom = new THREE.BoxGeometry(state.size.x - 3, 1, state.size.z - 3)
|
||||
// let levelHoleMesh = new THREE.Mesh(levelHoleGeom)
|
||||
// let levelHoleBSP = new ThreeBSP(levelHoleMesh)
|
||||
// levelBSP = levelBSP.subtract(levelHoleBSP)
|
||||
// levelMesh = levelBSP.toMesh()
|
||||
// let levelOpts = {
|
||||
// color: 0xff0000,
|
||||
// shininess: 10
|
||||
// }
|
||||
// let levelMat = new THREE.MeshPhongMaterial(levelOpts)
|
||||
// levelMesh.material = levelMat
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+61
-113
@@ -8,11 +8,23 @@ export default {
|
||||
|
||||
// initial state
|
||||
state: {
|
||||
projects: []
|
||||
projects: [],
|
||||
marginBetweenBuildings: 5,
|
||||
totalW: 0
|
||||
},
|
||||
|
||||
// getters
|
||||
getters: {
|
||||
totalW: (state) => {
|
||||
return state.totalW
|
||||
},
|
||||
marginBetweenBuildings: (state) => {
|
||||
return state.marginBetweenBuildings
|
||||
},
|
||||
projectID: (state) => (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)
|
||||
@@ -23,125 +35,21 @@ export default {
|
||||
// mutations
|
||||
mutations: {
|
||||
setProjects (state, projects) {
|
||||
// record the retrieved data
|
||||
// record the projects
|
||||
state.projects = projects
|
||||
console.log('setProjects', this)
|
||||
// register a new module only if doesn't exist
|
||||
let name
|
||||
projects.forEach((project, i) => {
|
||||
name = `project:${project.id}`
|
||||
if (!(this.state && this.state[name])) {
|
||||
projectMod.state = { ...project }
|
||||
this.registerModule(name, projectMod)
|
||||
} else {
|
||||
// re-use the already existing module
|
||||
console.log(`reusing module poject:${project.id}`)
|
||||
}
|
||||
})
|
||||
|
||||
// randomly define building sizes
|
||||
let totalW = 0
|
||||
for (var i = 0; i < state.projects.length; i++) {
|
||||
let w = Math.round(21 + Math.random() * 15)
|
||||
totalW += w
|
||||
state.projects[i].size = {
|
||||
x: w,
|
||||
y: Math.round(100 + Math.random() * 250),
|
||||
z: Math.round(10 + Math.random() * 30)
|
||||
}
|
||||
}
|
||||
|
||||
// positioning buildings on x regarding the widths
|
||||
// & setting up the window sizing
|
||||
// & setting up the content grid
|
||||
let margin = 5
|
||||
totalW += margin * (state.projects.length - 1)
|
||||
let wall, a
|
||||
let grid
|
||||
// fro each PROJECTS
|
||||
for (var j = 0; j < state.projects.length; j++) {
|
||||
// X POS
|
||||
let x = -1 * totalW / 2// + state.projects[0].size.x / 2
|
||||
for (var k = 0; k < j; k++) {
|
||||
x += state.projects[k].size.x
|
||||
}
|
||||
x += margin * j
|
||||
x += state.projects[j].size.x / 2
|
||||
state.projects[j].position = {
|
||||
x: x,
|
||||
y: -1 * state.projects[j].size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
|
||||
z: -10 + Math.random() * 10
|
||||
}
|
||||
|
||||
// WINDOWS
|
||||
wall = {
|
||||
wallW: 0.001,
|
||||
// dig windows on face and back
|
||||
winW: 2 + Math.random() * 2,
|
||||
winH: 4 + Math.random() * 4,
|
||||
margin: 2,
|
||||
nbrWinX: 0,
|
||||
paddingX: 0,
|
||||
nbrWinY: 0,
|
||||
paddingY: 0,
|
||||
nbrWinZ: 0,
|
||||
paddingZ: 0
|
||||
}
|
||||
// removing windows on X until padding is enough
|
||||
a = 0
|
||||
wall.nbrWinX = Math.floor((state.projects[j].size.x - 2 * wall.margin) / wall.winW)
|
||||
while (wall.paddingX < 0.4) {
|
||||
wall.nbrWinX -= a
|
||||
wall.paddingX = (state.projects[j].size.x - 2 * wall.margin - wall.winW * wall.nbrWinX) / (wall.nbrWinX - 1)
|
||||
a++
|
||||
}
|
||||
// removing windows on Y until padding is enough
|
||||
a = 0
|
||||
wall.nbrWinY = Math.floor((state.projects[j].size.y - 2 * wall.margin) / wall.winH)
|
||||
while (wall.paddingY < 0.4) {
|
||||
wall.nbrWinY -= a
|
||||
wall.paddingY = (state.projects[j].size.y - 2 * wall.margin - wall.winH * wall.nbrWinY) / (wall.nbrWinY - 1)
|
||||
a++
|
||||
}
|
||||
state.projects[j].wall = { ...wall }
|
||||
|
||||
// CONTENTS GRID
|
||||
a = 0
|
||||
wall.nbrWinZ = Math.floor((state.projects[j].size.z - 2 * wall.margin) / wall.winW)
|
||||
while (wall.paddingZ < 0.4) {
|
||||
wall.nbrWinZ -= a
|
||||
wall.paddingZ = (state.projects[j].size.z - 2 * wall.margin - wall.winW * wall.nbrWinZ) / (wall.nbrWinZ - 1)
|
||||
a++
|
||||
}
|
||||
|
||||
grid = []
|
||||
for (var l = 0; l < wall.nbrWinZ * 2; l++) { // cols
|
||||
for (var m = 0; m < wall.nbrWinY * 2; m++) { // rows
|
||||
grid.push({
|
||||
z: margin + wall.winW / 2 * l,
|
||||
y: margin + wall.winH / 2 * m
|
||||
})
|
||||
}
|
||||
}
|
||||
// shuffle the grid
|
||||
for (let n = grid.length - 1; n > 0; n--) {
|
||||
const o = Math.floor(Math.random() * n)
|
||||
const temp = grid[n]
|
||||
grid[n] = grid[o]
|
||||
grid[o] = temp
|
||||
}
|
||||
state.projects[j].grid = [ ...grid ]
|
||||
}
|
||||
},
|
||||
increaseTotalW (state, w) {
|
||||
state.totalW += w
|
||||
}
|
||||
},
|
||||
|
||||
// actions
|
||||
actions: {
|
||||
// async get authors
|
||||
getProjects ({ dispatch, commit, state }) {
|
||||
loadProjects ({ dispatch, commit, state }) {
|
||||
// GRAPHQL
|
||||
GRAPHQL.post('', { query: `query {
|
||||
projects {
|
||||
projects(sort: "Weight:asc") {
|
||||
id
|
||||
Weight
|
||||
Titre
|
||||
@@ -149,7 +57,7 @@ export default {
|
||||
}` })
|
||||
.then(({ data: { data: { projects } = null } }) => {
|
||||
console.log('graphql projects', projects)
|
||||
commit('setProjects', projects)
|
||||
dispatch('computeProjects', projects)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('Issue with getProjects', error)
|
||||
@@ -171,8 +79,48 @@ export default {
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
},
|
||||
build3dBuilding ({ dispatch, commit, state }) {
|
||||
computeProjects ({ dispatch, commit, state }, projects) {
|
||||
console.log('computeProjects', this)
|
||||
// register a new module only if doesn't exist
|
||||
let name, size, w
|
||||
// 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)
|
||||
projects.forEach((project, i) => {
|
||||
name = `project:${project.id}`
|
||||
// convert to number the project id
|
||||
projects[i].id = parseInt(projects[i].id, 10)
|
||||
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)
|
||||
commit('increaseTotalW', w)
|
||||
size = {
|
||||
x: w,
|
||||
y: Math.round(100 + Math.random() * 250),
|
||||
z: Math.round(10 + Math.random() * 30)
|
||||
}
|
||||
// convert to number the project id
|
||||
project.id = parseInt(project.id, 10)
|
||||
// fill the dynamic store module with data
|
||||
// merge default sate with loaded data, with calculated size, with index
|
||||
projectMod.state = { ...projectMod.state, ...project, size: size, index: i }
|
||||
// register the module
|
||||
this.registerModule(name, projectMod)
|
||||
} else {
|
||||
// re-use the already existing module
|
||||
console.log(`reusing module project:${project.id}`)
|
||||
}
|
||||
})
|
||||
|
||||
// record loaded projects
|
||||
commit('setProjects', projects)
|
||||
|
||||
// init each dynamic modules
|
||||
state.projects.forEach((project, i) => {
|
||||
dispatch(`project:${project.id}/init`, null, { root: true })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user