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

better wall display

Browse Source
This commit is contained in:
bachir
2020-10-20 15:07:46 +02:00
parent 74909888c5
commit 33a351df86
4 changed files with 180 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/objects/ContentBlock.vue
+45 -78
View File
@@ -31,7 +31,7 @@
z:deg2rad(rotation.z)
}"
>
<geometry type="Plane" :args="[img_size.x, img_size.y]" />
<geometry type="Plane" :args="[img_size.width, img_size.height]" />
<material type="MeshLambert" :options="img_opts">
<texture :options="img_texture_opts" />
</material>
@@ -103,7 +103,8 @@ export default {
projWall: state => state.wall,
gridsContentPlaced: state => state.gridsContentPlaced,
contents_size_factor: state => state.contents_size_factor,
faces_opaques: state => state.Faces_opaques
faces_opaques: state => state.Faces_opaques,
gridCel: state => state.gridCel
}),
color () {
let color = 0x000000
@@ -147,36 +148,41 @@ export default {
this.preview_img_url = this.data.Vimeo.thumbnail_url_with_play_button
} else if (this.data.Media && this.data.Media.length) {
this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`
} else if (this.data.Images && this.data.Images.length) {
this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Images[0].url}`
}
// for now display only items that have img to preview
// TODO: what to do with items without images ?
if (this.preview_img_url) {
// this.size.x = this.projWall.winW * this.contents_size_factor
// this.size.y = this.projWall.winH * this.contents_size_factor
// this.size.width = this.projWall.winW * this.contents_size_factor
// this.size.height = this.projWall.winH * this.contents_size_factor
// get the right size depending on screen
let u
if (window.innerWidth > window.innerHeight) {
u = window.innerHeight / window.innerWidth
} else {
u = window.innerWidth / window.innerHeight
}
this.size.x = this.projWall.winW * this.contents_size_factor
this.size.y = this.projWall.winH * u * this.contents_size_factor
// console.log(`windowW :${window.innerWidth}, windowH :${window.innerHeight}, winW : ${this.projWall.winW}, winH : ${this.projWall.winH}, size.x :${this.size.x}, size.y :${this.size.y}`)
// // get the right size depending on screen
// let u
// if (window.innerWidth > window.innerHeight) {
// u = window.innerHeight / window.innerWidth
// } else {
// u = window.innerWidth / window.innerHeight
// }
// this.size.width = this.projWall.winW * this.contents_size_factor
// this.size.height = this.projWall.winH * u * this.contents_size_factor
this.size.width = this.gridCel.width
this.size.height = this.gridCel.height
// console.log(`windowW :${window.innerWidth}, windowH :${window.innerHeight}, winW : ${this.projWall.winW}, winH : ${this.projWall.winH}, size.x :${this.size.width}, size.y :${this.size.height}`)
if (typeof this.data.country.id !== 'undefined') {
console.log('this.data.country.id', this.data.country.id)
if (typeof this.data.country !== 'undefined' &&
typeof this.data.country.id !== 'undefined') {
// console.log('this.data.country.id', parseInt(this.data.country.id))
switch (parseInt(this.data.country.id)) {
case 1:
this.face = 'left'
this.face = 'right'
break
case 2:
this.face = 'back'
break
case 3:
this.face = 'right'
this.face = 'left'
break
}
} else {
@@ -217,7 +223,8 @@ export default {
break
}
}
console.log('face', this.face)
// this.face = 'left'
// console.log('face', this.face)
// define side
let side
switch (this.face) {
@@ -240,38 +247,11 @@ export default {
}
// rotation and position
let gridPos = this.gridsContentPlaced[side][this.face][this.type][this.id]
console.log('gridPos', gridPos)
switch (side) {
case 'x':
this.position.x = this.projPos.x - this.projSize.x / 2 + gridPos.x
this.position.y = this.projPos.y - this.projSize.y / 2 + gridPos.y
switch (this.face) {
case 'front':
this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
this.rotation.y = 180
break
case 'back':
this.position.z = this.projPos.z - this.projSize.z / 2 + 0.1
this.rotation.y = 0
break
}
break
case 'z':
this.position.z = this.projPos.z - this.projSize.z / 2 + gridPos.z
this.position.y = this.projPos.y - this.projSize.y / 2 + gridPos.y
switch (this.face) {
case 'left':
this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
this.rotation.y = 90
break
case 'right':
this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
this.rotation.y = -90
break
}
break
}
// console.log('gridPos', gridPos)
this.position.x = gridPos.x
this.position.z = gridPos.z
this.position.y = gridPos.y
this.rotation.y = gridPos.ry
// console.log(this.data.Media[0].url)
// create image object with a promise (async img loading)
this.createImgCanvas(this.preview_img_url)
@@ -282,49 +262,36 @@ export default {
// and fit the width and height to the screen
let f
if (canvas.width >= canvas.height) {
f = this.size.x / canvas.width
this.img_size.x = canvas.width * f - this.img_padding * 2
this.img_size.y = this.size.y = canvas.height * f - this.img_padding * 2
f = this.size.width / canvas.width
this.img_size.width = canvas.width * f - this.img_padding * 2
this.img_size.height = canvas.height * f - this.img_padding * 2
} else {
f = this.size.y / canvas.height
this.img_size.y = canvas.height * f - this.img_padding * 2
this.img_size.x = this.size.x = canvas.width * f - this.img_padding * 2
f = this.size.height / canvas.height
this.img_size.height = canvas.height * f - this.img_padding * 2
this.img_size.width = canvas.width * f - this.img_padding * 2
}
console.log(`size.x :${this.size.x}, size.y :${this.size.y}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
// console.log(`size.x :${this.size.width}, size.y :${this.size.height}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.width: ${this.img_size.width}, img_size.height: ${this.img_size.height}`)
this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
switch (this.face) {
case 'left':
this.img_position.z = this.position.z + this.size.x / 2 - this.img_size.x / 2
this.img_position.y = this.position.y
switch (side) {
case 'z':
this.img_position.z = this.position.z + this.size.width / 2
this.img_position.x = this.position.x
break
case 'back':
this.img_position.x = this.position.x - this.size.x / 2 + this.img_size.x / 2
this.img_position.z = this.position.z
break
case 'right':
this.img_position.z = this.position.z - this.size.x / 2 + this.img_size.x / 2
this.img_position.x = this.position.x
break
case 'front':
this.img_position.x = this.position.x + this.size.x / 2 - this.img_size.x / 2
case 'x':
this.img_position.x = this.position.x + this.size.width / 2
this.img_position.z = this.position.z
break
}
this.img_canvas = canvas
this.curObj.needsUpdate()
// this.imgObj = this.$refs.img3d.curObj
// // record self references
// this.imgObj.userData = {
// vnode: this
// }
})
.catch(function () {
console.warn('CATCH img load ERROR')
})
}
// this.img_position = { ...this.position }
// this.img_position.y -= this.size.y
// this.img_position.y -= this.size.height
},
mounted () {
// this.block3d = this.$refs.block3d.curObj
src/components/objects/Project.vue
+5 -2
View File
@@ -1,6 +1,7 @@
<template>
<div>
<object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
<!-- <object3d v-if="debug" ref="gridDebug3d" name="griddebug" :obj="gridBebug3dObj" :position="wallsPos" /> -->
<object3d ref="top" :obj="top3dObj" :position="topPos" />
<object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
<object3d ref="levels" :obj="levels3dObj" :position="levelsPos" />
@@ -105,7 +106,7 @@ export default {
mixins: [mixins],
props: { id: Number },
data () {
console.log('Project data()')
// console.log('Project data()')
return {
isOpened: false,
block3d: null,
@@ -126,6 +127,7 @@ export default {
},
computed: {
...mapInstanceState(getModuleName, {
debug: state => state.debug,
title: state => state.Titre,
size: state => state.size,
position: state => state.position,
@@ -138,6 +140,7 @@ export default {
floorPos: state => state.floorPos,
levels3dObj: state => state.levels3dObj,
levelsPos: state => state.levelsPos,
// gridBebug3dObj: state => state.gridBebug3dObj,
contents: state => state.contents,
activeLevel: state => state.activeLevel
}),
@@ -167,7 +170,7 @@ export default {
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_position', this.label_position)
// console.log('this.label_position', this.label_position)
},
mounted () {
console.log('project mounted', this)