123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <template>
- <div>
- <!-- <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.x, img_size.y]" />
- <material type="MeshLambert" :options="img_opts">
- <texture :options="img_texture_opts" />
- </material>
- </mesh>
- </div>
- </template>
- <script>
- import * as THREE from 'three'
- import mixins from 'components/mixins'
- export default {
- name: 'ContentBlock',
- mixins: [mixins],
- props: { prtPosition: Object, prtSize: Object, type: String, data: Object },
- data: () => ({
- // block3d: null,
- size: { x: 2, y: 3, z: 0.1 },
- 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,
- img_canvas: null,
- img_size: { x: 2, y: 3, z: 0.1 },
- img_position: { x: 0, y: 0, z: 0 },
- face: null
- }),
- computed: {
- 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
- }
- }
- },
- created () {
- // console.log('ContentBlock created', this.data)
- let txtcolor = '#000000'
- // switch (this.type) {
- // case 'visible':
- // txtcolor = '#0000ff'
- // break
- // case 'context':
- // txtcolor = '#ff0000'
- // break
- // case 'process':
- // txtcolor = '#00ff00'
- // break
- // default:
- // }
- this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
- 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 face = Math.random()
- // if (face < 0.25) {
- // // 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 if (face >= 0.25 && face < 0.5) {
- // // fond
- // this.face = 'back'
- // this.position.z = this.prtPosition.z - this.prtSize.z / 2 + 0.1
- // this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
- // } else if (face >= 0.5 && face < 0.75) {
- // // 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
- // } else {
- // // face
- // this.face = 'front'
- // this.position.z = this.prtPosition.z + this.prtSize.z / 2 - 0.1
- // 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
- }
- // 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
- // console.log()
- if (this.data.Media && this.data.Media.length) {
- console.log(this.data.Media[0].url)
- this.createImgCanvas(`https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`)
- .then(({ img, canvas }) => {
- // console.log('THEN img loaded ok', this, img, canvas)
- let f = 3 / canvas.width
- this.img_size.x = canvas.width * f
- this.img_size.y = canvas.height * f
- 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.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
- this.img_position.z = this.position.z
- break
- }
- this.img_canvas = canvas
- })
- .catch(function () {
- console.warn('CATCH img load ERROR')
- })
- }
- // this.img_position = { ...this.position }
- // this.img_position.y -= this.size.y
- },
- mounted () {
- // this.block3d = this.$refs.block3d.curObj
- // this.block3d.castShadow = true
- // this.block3d.receiveShadow = true
- this.label3d = this.$refs.label3d.curObj
- // record self references
- this.label3d.userData = {
- vnode: this
- }
- }
- }
- </script>
|