moved all project sizings and positiongs on project store, creating my own geometry

src/components/objects/Project.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <mesh ref="block3d" name="Project" :position="position">
-      <geometry type="Box" :args="[size.x, size.y, size.z]" />
+      <!-- <geometry type="Box" :args="[size.x, size.y, size.z]" /> -->
       <material type="MeshLambert" :color="color" :options="block_opts">
         <!-- <texture :options="label_texture_opts" /> -->
       </material>
@@ -56,32 +56,42 @@ export default {
   mixins: [mixins],
   // props: { size: Object, texture: String, position: Object, color: Number },
   props: { data: Object, len: Number, index: Number },
-  data: () => ({
-    block3d: null,
-    block_opts: {
-      side: THREE.DoubleSide
-      // wireframe: true,
-      // transparent: true,
-      // opacity: 0.6
-      // renderOrder: 0
-    },
-    label3d: null,
-    label_opts: {
-      side: THREE.DoubleSide,
-      // wireframe: false,
-      transparent: true
-      // opacity: 0.6
-      // renderOrder: 0
-    },
-    // size and positions are defined in store project
-    size: { x: 0, y: 0, z: 0 },
-    position: { x: 0, y: 0, z: 0 },
-    label_position: { x: 0, y: 0, z: 0 },
-    color: 0xffffff,
-    label_canvas: null,
-    label_size: null,
-    isOpened: false
-  }),
+  data () {
+    console.log('Project data() : data', this.data)
+    // get size and positions from project store
+    let size = { ...this.data.size }
+    let position = { ...this.data.position }
+
+    let geometry = new THREE.BoxBufferGeometry(size.x, size.y, size.z)
+
+    return {
+      block3d: null,
+      block_opts: {
+        side: THREE.DoubleSide
+        // wireframe: true,
+        // transparent: true,
+        // opacity: 0.6
+        // renderOrder: 0
+      },
+      label3d: null,
+      label_opts: {
+        side: THREE.DoubleSide,
+        // wireframe: false,
+        transparent: true
+        // opacity: 0.6
+        // renderOrder: 0
+      },
+      // size and positions are defined in store project
+      size: size,
+      position: position,
+      geometry: geometry,
+      label_position: { x: 0, y: 0, z: 0 },
+      color: 0xffffff,
+      label_canvas: null,
+      label_size: null,
+      isOpened: false
+    }
+  },
   computed: {
     label_texture_opts () {
       return {
@@ -93,16 +103,7 @@ export default {
     }
   },
   created () {
-    console.log('Project created: data', this.data)
-    // randomize size and positions
-    // this.size.x = ... // it's
-    this.size = { ...this.data.size }
-    // this.size.y = 100 + Math.random() * 90
-    // this.size.z = 10 + Math.random() * 30
-
-    this.position.x = this.data.position.x// (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
-    this.position.y = -1 * this.size.y / 2 + 10 + Math.random() * 30// -10 + Math.random() * this.size.y / 2
-    this.position.z = -10 + Math.random() * 10
+    console.log('Project created: data', this, this.data)
 
     this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000')
     this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
@@ -114,6 +115,7 @@ export default {
     // console.log('project mounted', this)
     // mesh options
     this.block3d = this.$refs.block3d.curObj
+    this.block3d.geometry = this.geometry
     this.block3d.castShadow = true
     this.block3d.receiveShadow = true
     // record self references

src/store/modules/projects.js

@@ -40,7 +40,9 @@ export default {
         x += margin * j
         x += state.projects[j].size.x / 2
         state.projects[j].position = {
-          x: x
+          x: x,
+          y: -1 * state.projects[j].size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
+          z: -10 + Math.random() * 10
         }
       }
     }