123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320 |
- <template>
- <div>
- <!-- <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" />
- </mesh> -->
- <!-- <mesh
- ref="label3d"
- name="Content"
- :position="position"
- :rotation="{
- x:deg2rad(rotation.x),
- y:deg2rad(rotation.y),
- z:deg2rad(rotation.z)
- }"
- >
- <geometry type="Plane" :args="[size.x, size.y]" />
- <material type="MeshLambert" :options="label_opts">
- <texture :options="label_texture_opts" />
- </material>
- </mesh> -->
- <mesh
- v-if="img_canvas"
- ref="img3d"
- name="Content"
- :position="img_position"
- :rotation="{
- x:deg2rad(rotation.x),
- y:deg2rad(rotation.y),
- z:deg2rad(rotation.z)
- }"
- >
- <geometry type="Plane" :args="[img_size.width, img_size.height]" />
- <material type="MeshLambert" :options="img_opts">
- <texture :options="img_texture_opts" />
- </material>
- </mesh>
- <!-- </object3d> -->
- </div>
- </template>
- <script>
- import { mapInstanceState, mapInstanceMutations } from '@urbn/vuex-helpers'
- // import { mapState, mapGetters } from 'vuex'
- // import { VIMEO } from 'api/vimeo-axios'
- // import qs from 'querystring'
- import * as THREE from 'three'
- import mixins from 'components/mixins'
- // We'll determine our module based on the moduleName prop on this component
- // https://www.npmjs.com/package/@urbn/vuex-helpers
- const getModuleName = cmp => `project:${cmp.prtId}`
- export default {
- name: 'ContentBlock',
- mixins: [mixins],
- props: { prtId: Number, type: String, data: Object },
- data: () => ({
- // block3d: null,
- project: null,
- size: { x: 0, y: 0 },
- position: { x: 0, y: 0, z: 0 },
- rotation: { x: 0, y: 0, z: 0 },
- // opts: {
- // side: THREE.DoubleSide
- // // wireframe: false,
- // // transparent: false,
- // // opacity: 0.6
- // },
- isOpened: false,
- // label3d: null,
- // label_opts: {
- // side: THREE.DoubleSide,
- // // wireframe: false,
- // transparent: true
- // // opacity: 0.6
- // // renderOrder: 0
- // },
- img_opts: {
- // side: THREE.DoubleSide,
- // wireframe: false,
- // transparent: true
- // opacity: 0.6
- // renderOrder: 0
- },
- // label_position: { x: 5, y: 5, z: 6 },
- // label_canvas: null,
- // label_size: null,
- preview_img_url: null,
- img_canvas: null,
- img_size: { x: 0, y: 0 },
- img_position: { x: 0, y: 0, z: 0 },
- img_padding: 0.25,
- face: null
- }),
- computed: {
- ...mapInstanceState(getModuleName, {
- projSize: state => state.size,
- projPos: state => state.position,
- projWall: state => state.wall,
- gridsContentPlaced: state => state.gridsContentPlaced,
- contents_size_factor: state => state.contents_size_factor,
- faces_opaques: state => state.Faces_opaques,
- gridCel: state => state.gridCel
- }),
- color () {
- let color = 0x000000
- switch (this.type) {
- case 'visible':
- color = 0x0000ff
- break
- case 'context':
- color = 0x00ffff
- break
- case 'process':
- color = 0xff00ff
- break
- default:
- color = 0xdddddd
- }
- return color
- },
- // label_texture_opts () {
- // return {
- // canvas: this.label_canvas,
- // minFilter: THREE.LinearFilter,
- // wrapS: THREE.ClampToEdgeWrapping,
- // wrapT: THREE.ClampToEdgeWrapping
- // }
- // },
- img_texture_opts () {
- return {
- canvas: this.img_canvas,
- minFilter: THREE.LinearFilter,
- wrapS: THREE.ClampToEdgeWrapping,
- wrapT: THREE.ClampToEdgeWrapping
- }
- },
- id () {
- return this.data.id
- }
- },
- created () {
- if (this.data.Vimeo) {
- 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.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.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 !== '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 = 'right'
- break
- case 2:
- this.face = 'back'
- break
- case 3:
- this.face = 'left'
- break
- }
- } else {
- let face = Math.random()
- switch (this.faces_opaques) {
- case 1:
- this.face = 'back'
- break
- case 2:
- // RANDOMLY USE 2 FACES
- if (face < 0.5) {
- this.face = 'left'
- } else {
- this.face = 'right'
- }
- break
- case 3:
- // RANDOMLY USE 3 FACES
- if (face < 0.33) {
- this.face = 'left'
- } else if (face >= 0.33 && face < 0.66) {
- this.face = 'back'
- } else {
- this.face = 'right'
- }
- break
- case 4:
- // RANDOMLY USE 4 FACES
- if (face < 0.25) {
- this.face = 'left'
- } else if (face >= 0.25 && face < 0.5) {
- this.face = 'back'
- } else if (face >= 0.5 && face < 0.75) {
- this.face = 'right'
- } else {
- this.face = 'front'
- }
- break
- }
- }
- // this.face = 'left'
- // console.log('face', this.face)
- // define side
- let side
- switch (this.face) {
- case 'back':
- case 'front':
- side = 'x'
- break
- case 'left':
- case 'right':
- side = 'z'
- break
- }
- // Get GRID's CEL
- if (typeof this.gridsContentPlaced[side] === 'undefined' ||
- typeof this.gridsContentPlaced[side][this.face] === 'undefined' ||
- typeof this.gridsContentPlaced[side][this.face][this.type] === 'undefined' ||
- typeof this.gridsContentPlaced[side][this.face][this.type][this.id] === 'undefined') {
- // First shift grid place (will transfer it from free places to occupied places)
- this.shiftGrid({ face: this.face, type: this.type, id: this.id })
- }
- // rotation and position
- let gridPos = this.gridsContentPlaced[side][this.face][this.type][this.id]
- // 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)
- .then(({ img, canvas }) => {
- // console.log('THEN img loaded ok', this, img, canvas)
- // canvas is way bigger than displayable for good resolution
- // reduce it keeping good resolution
- // and fit the width and height to the screen
- let f
- if (canvas.width >= canvas.height) {
- 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.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.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
- switch (side) {
- case 'z':
- this.img_position.z = this.position.z + this.size.width / 2
- this.img_position.x = this.position.x
- break
- 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()
- })
- .catch(function () {
- console.warn('CATCH img load ERROR')
- })
- }
- // this.img_position = { ...this.position }
- // this.img_position.y -= this.size.height
- },
- mounted () {
- // this.block3d = this.$refs.block3d.curObj
- // this.block3d.castShadow = true
- // this.block3d.receiveShadow = true
- },
- updated () {
- if (!this.curObj && this.$refs.img3d) {
- this.curObj = this.$refs.img3d.curObj
- // record self references
- this.curObj.userData = {
- vnode: this
- }
- }
- },
- methods: {
- ...mapInstanceMutations(getModuleName, {
- shiftGrid: 'shiftGrid'
- }),
- open () {
- this.isOpened = true
- // this.loadContents()
- }
- }
- }
- </script>
|