12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <template>
- <div>
- <mesh name="Project" :position="position">
- <geometry type="Box" :args="[size.x, size.y, size.z]" />
- <material type="MeshLambert" :color="color" :options="block_opts" />
- </mesh>
- <mesh name="Label" :position="label_position">
- <geometry type="Plane" :args="[label_size.x, label_size.y]" />
- <material type="MeshBasic" :options="label_opts">
- <texture :options="label_texture_opts" />
- </material>
- </mesh>
- </div>
- </template>
- <script>
- import * as THREE from 'three'
- // import { Object3D } from '@'
- export default {
- name: 'Project',
- // mixins: [Object3D],
- // props: { size: Object, texture: String, position: Object, color: Number },
- props: { data: Object, len: Number, index: Number },
- data: () => ({
- block_opts: {
- side: THREE.DoubleSide,
- wireframe: false
- // transparent: true,
- // opacity: 0.6
- // renderOrder: 0
- },
- label_opts: {
- side: THREE.DoubleSide,
- // wireframe: false,
- transparent: true
- // opacity: 0.6
- // renderOrder: 0
- },
- size: { x: 35, y: 10, z: 10 },
- position: { x: 5, y: 5, z: 0 },
- label_position: { x: 5, y: 5, z: 6 },
- color: 0xffffff,
- label_canvas: null,
- label_size: null
- }),
- computed: {
- label_texture_opts () {
- return {
- canvas: this.label_canvas,
- minFilter: THREE.LinearFilter,
- wrapS: THREE.ClampToEdgeWrapping,
- wrapT: THREE.ClampToEdgeWrapping
- }
- }
- },
- created () {
- // console.log('this.index', this.index)
- this.size.y = 30 + Math.random() * 90
- this.position.y = -10 + Math.random() * this.size.y / 2
- // this.label_position.y = this.position.y + this.size.y / 2 - 5
- this.label_position.y = 5
- this.position.x = this.label_position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
- this.label_canvas = this.createLabelCanvas()
- console.log('this.label_canvas', this.label_canvas)
- },
- methods: {
- createLabelCanvas () {
- console.log('createLabelCanvas', this.data.Titre)
- const size = 48
- const borderSize = 2
- const ctx = document.createElement('canvas').getContext('2d')
- const font = `${size}px bold noto_sans`
- ctx.font = font
- // measure how long the name will be
- const doubleBorderSize = borderSize * 2
- const width = ctx.measureText(this.data.Titre).width + doubleBorderSize
- const height = size + doubleBorderSize
- this.label_size = { x: width / 21, y: height / 21 }
- ctx.canvas.width = width
- ctx.canvas.height = height
- // need to set font again after resizing canvas
- ctx.font = font
- ctx.textBaseline = 'top'
- // ctx.fillStyle = 'green'
- // ctx.fillRect(0, 0, width, height)
- ctx.fillStyle = 'black'
- ctx.fillText(this.data.Titre, borderSize, borderSize)
- // console.log('createLabelCanvas', ctx)
- return ctx.canvas
- }
- }
- }
- </script>
|