|
@@ -2,7 +2,7 @@
|
|
|
<div>
|
|
|
<mesh name="Project" :position="position">
|
|
|
<geometry type="Box" :args="[size.x, size.y, size.z]" />
|
|
|
- <material type="MeshBasic" :color="color" :options="block_opts" />
|
|
|
+ <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]" />
|
|
@@ -25,10 +25,11 @@ export default {
|
|
|
data: () => ({
|
|
|
block_opts: {
|
|
|
side: THREE.DoubleSide,
|
|
|
- wireframe: false,
|
|
|
- transparent: true,
|
|
|
- opacity: 0.6
|
|
|
+ wireframe: false
|
|
|
+ // transparent: true,
|
|
|
+ // opacity: 0.6
|
|
|
// renderOrder: 0
|
|
|
+
|
|
|
},
|
|
|
label_opts: {
|
|
|
side: THREE.DoubleSide,
|
|
@@ -37,9 +38,9 @@ export default {
|
|
|
// opacity: 0.6
|
|
|
// renderOrder: 0
|
|
|
},
|
|
|
- size: { x: 10, y: 10, z: 10 },
|
|
|
+ size: { x: 35, y: 10, z: 10 },
|
|
|
position: { x: 5, y: 5, z: 0 },
|
|
|
- label_position: { x: 5, y: 5, z: 20 },
|
|
|
+ label_position: { x: 5, y: 5, z: 6 },
|
|
|
color: 0xffffff,
|
|
|
label_canvas: null,
|
|
|
label_size: null
|
|
@@ -56,9 +57,11 @@ export default {
|
|
|
},
|
|
|
created () {
|
|
|
// console.log('this.index', this.index)
|
|
|
- this.size.y = 20 + Math.random() * 90
|
|
|
- this.position.y = this.label_position.y = -10 + Math.random() * this.size.y / 2
|
|
|
- this.position.x = this.label_position.x = -this.len / 2 * 15 + 15 * 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)
|
|
|
},
|
|
@@ -74,7 +77,7 @@ export default {
|
|
|
const doubleBorderSize = borderSize * 2
|
|
|
const width = ctx.measureText(this.data.Titre).width + doubleBorderSize
|
|
|
const height = size + doubleBorderSize
|
|
|
- this.label_size = { x: width / 10, y: height / 10 }
|
|
|
+ this.label_size = { x: width / 21, y: height / 21 }
|
|
|
ctx.canvas.width = width
|
|
|
ctx.canvas.height = height
|
|
|
|
|
@@ -84,7 +87,7 @@ export default {
|
|
|
|
|
|
// ctx.fillStyle = 'green'
|
|
|
// ctx.fillRect(0, 0, width, height)
|
|
|
- ctx.fillStyle = 'white'
|
|
|
+ ctx.fillStyle = 'black'
|
|
|
ctx.fillText(this.data.Titre, borderSize, borderSize)
|
|
|
// console.log('createLabelCanvas', ctx)
|
|
|
return ctx.canvas
|