changed material, lights on

src/components/objects/Plan.vue

@@ -32,8 +32,8 @@ export default {
       side: THREE.DoubleSide,
       wireframe: false,
       transparent: true,
-      opacity: 0.1,
-      renderOrder: 1
+      opacity: 0.5,
+      renderOrder: 0
     }
   })
 }

src/components/objects/Project.vue

@@ -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