|
@@ -19,6 +19,22 @@
|
|
<texture :options="label_texture_opts" />
|
|
<texture :options="label_texture_opts" />
|
|
</material>
|
|
</material>
|
|
</mesh>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -50,9 +66,19 @@ export default {
|
|
// opacity: 0.6
|
|
// opacity: 0.6
|
|
// renderOrder: 0
|
|
// 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_position: { x: 5, y: 5, z: 6 },
|
|
label_canvas: null,
|
|
label_canvas: null,
|
|
label_size: 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
|
|
face: null
|
|
}),
|
|
}),
|
|
computed: {
|
|
computed: {
|
|
@@ -80,23 +106,31 @@ export default {
|
|
wrapS: THREE.ClampToEdgeWrapping,
|
|
wrapS: THREE.ClampToEdgeWrapping,
|
|
wrapT: THREE.ClampToEdgeWrapping
|
|
wrapT: THREE.ClampToEdgeWrapping
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ img_texture_opts () {
|
|
|
|
+ return {
|
|
|
|
+ canvas: this.img_canvas,
|
|
|
|
+ minFilter: THREE.LinearFilter,
|
|
|
|
+ wrapS: THREE.ClampToEdgeWrapping,
|
|
|
|
+ wrapT: THREE.ClampToEdgeWrapping
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created () {
|
|
created () {
|
|
- console.log('ContentBlock created', this.prtSize)
|
|
|
|
|
|
+ console.log('ContentBlock created', this.data)
|
|
let txtcolor = '#000000'
|
|
let txtcolor = '#000000'
|
|
- switch (this.type) {
|
|
|
|
- case 'visible':
|
|
|
|
- txtcolor = '#0000ff'
|
|
|
|
- break
|
|
|
|
- case 'context':
|
|
|
|
- txtcolor = '#ff0000'
|
|
|
|
- break
|
|
|
|
- case 'process':
|
|
|
|
- txtcolor = '#00ff00'
|
|
|
|
- break
|
|
|
|
- default:
|
|
|
|
- }
|
|
|
|
|
|
+ // 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.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
|
|
|
|
|
|
@@ -146,6 +180,44 @@ export default {
|
|
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
|
|
// 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.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
|
|
// 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 () {
|
|
mounted () {
|
|
// this.block3d = this.$refs.block3d.curObj
|
|
// this.block3d = this.$refs.block3d.curObj
|