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