changed material, lights on

src/App.vue

@@ -18,7 +18,8 @@
             </orbit-controls>
             <!-- <camera :position="{x:0, y:300, z:0}" :rotation="{x:deg2rad(-90), y:0, z:0}"/> -->
             <!-- <camera :position="{x:0,y:50,z:0}" :lookat="{x:0,y:0,z:0}" /> -->
-            <!-- <light :hex="0xff0000" :intensity="10" :position="{x:-100}" /> -->
+            <light :hex="0xffffff" :intensity="5" :position="{x:-100,y:150,z:50}" />
+            <light :hex="0xffffff" :intensity="2" :position="{x:100,y:-150,z:-50}" />
             <!-- <mesh :obj="mesh" :position="{ y: -200 }" /> -->
             <!-- <animation :fn="animate" :speed="3" /> -->
             <plan :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0xffffff" :rotation="{x:90,y:0,z:0}" />
@@ -74,11 +75,11 @@ export default {
 
     // scene obj is well overwrited but background color not visible
     let scene = new THREE.Scene()
-    scene.background = new THREE.Color(0x000000)
-    scene.fog = new THREE.Fog(scene.background, 50, 200)
+    scene.background = new THREE.Color(0x1a1a1a)
+    scene.fog = new THREE.Fog(scene.background, 50, 400)
     console.log('myScene', scene)
     return {
-      debug: true,
+      debug: false,
       myRenderer: renderer,
       myScene: scene,
       mouse: new THREE.Vector2(),

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