diff --git a/src/App.vue b/src/App.vue
index a1d4278..d1ac1a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,8 @@
-
+
+
@@ -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(),
diff --git a/src/components/objects/Plan.vue b/src/components/objects/Plan.vue
index ef42b5c..163450c 100644
--- a/src/components/objects/Plan.vue
+++ b/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
}
})
}
diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue
index 0c58fe4..45df07d 100644
--- a/src/components/objects/Project.vue
+++ b/src/components/objects/Project.vue
@@ -2,7 +2,7 @@
-
+
@@ -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