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

first draft of contents grid placing

Browse Source
This commit is contained in:
bachir
2020-09-14 15:56:44 +02:00
parent 41f558938a
commit 672af09e51
3 changed files with 149 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/objects/ContentBlock.vue
+59 -35
View File
@@ -1,6 +1,6 @@
<template>
<div>
<!-- <object3d ref="block3d" name="Content" :position="position"> -->
<!-- <object3d ref="block3d" name="Content" :position="position"> -->
<!-- <mesh ref="block3d" name="ContentBlock" :position="position">
<geometry type="Box" :args="[size.x, size.y, size.z]" />
<material type="MeshLambert" :color="color" :options="opts" />
@@ -43,14 +43,16 @@
<script>
import * as THREE from 'three'
import mixins from 'components/mixins'
import { mapState, mapGetters } from 'vuex'
export default {
name: 'ContentBlock',
mixins: [mixins],
props: { prtPosition: Object, prtSize: Object, type: String, data: Object },
props: { prtPosition: Object, prtSize: Object, prtIndex: Number, type: String, data: Object },
data: () => ({
// block3d: null,
size: { x: 4, y: 8 },
project: null,
size: { x: 0, y: 0 },
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
// opts: {
@@ -84,6 +86,12 @@ export default {
face: null
}),
computed: {
...mapState({
projects: state => state.Projects.projects
}),
...mapGetters({
getGridPos: 'Projects/getGridPos'
}),
color () {
let color = 0x000000
switch (this.type) {
@@ -119,6 +127,9 @@ export default {
}
},
created () {
this.project = this.projects[this.prtIndex]
this.size.x = this.project.wall.winW / 2
this.size.y = this.project.wall.winY / 2
// console.log('ContentBlock created', this.data)
// let txtcolor = '#000000'
// switch (this.type) {
@@ -139,26 +150,27 @@ export default {
// this.size.x = this.label_size.x + 0.2
// this.size.y = this.label_size.y + 0.2
let y = 0
let top = this.prtPosition.y + this.prtSize.y / 2
let floor = this.prtPosition.y - this.prtSize.y / 2
switch (this.type) {
case 'visible':
y = top * Math.random()
break
case 'context':
y = floor / 3 * Math.random()
break
case 'process':
y = floor / 3 + floor / 3 * Math.random()
break
case 'concept':
y = (floor / 3) * 2 + floor / 3 * Math.random()
break
}
this.position.y = y
// let y = 0
// let top = this.prtPosition.y + this.prtSize.y / 2
// let floor = this.prtPosition.y - this.prtSize.y / 2
// switch (this.type) {
// case 'visible':
// y = top * Math.random()
// break
// case 'context':
// y = floor / 3 * Math.random()
// break
// case 'process':
// y = floor / 3 + floor / 3 * Math.random()
// break
// case 'concept':
// y = (floor / 3) * 2 + floor / 3 * Math.random()
// break
// }
// this.position.y = y
let face = Math.random()
// let face = Math.random()
// // USES 4 FACES
// if (face < 0.25) {
// // gauche
// this.face = 'left'
@@ -183,19 +195,31 @@ export default {
// this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
// this.rotation.y = 180
// }
if (face < 0.5) {
// gauche
this.face = 'left'
this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
this.rotation.y = 90
} else {
// droite
this.face = 'right'
this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
this.rotation.y = -90
}
// // USES 2 FACES
// if (face < 0.5) {
// // gauche
// this.face = 'left'
// this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
// this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
// this.rotation.y = 90
// } else {
// // droite
// this.face = 'right'
// this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
// this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
// this.rotation.y = -90
// }
// With GRID
this.face = 'left'
this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
let pos = this.getGridPos(this.prtIndex)
console.log('pos', pos)
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + pos.z
this.position.y = this.prtPosition.y - this.prtSize.y / 2 + pos.y
this.rotation.y = 90
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
// this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1
// this.label_position.z = this.position.z + this.size.z / 2 + 0.01
src/components/objects/Project.vue
+18 -39
View File
@@ -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,
src/store/modules/projects.js
+72 -1
View File
@@ -9,7 +9,13 @@ export default {
},
// getters
getters: {},
getters: {
getGridPos: (state) => (index) => {
let popped = state.projects[index].grid.pop()
console.log('getGridPos: popped', popped)
return popped
}
},
// mutations
mutations: {
@@ -30,9 +36,15 @@ export default {
}
// 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
@@ -44,6 +56,65 @@ export default {
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 ]
}
}
},