looking arround is quite working

src/components/objects/Project.vue

@@ -1,40 +1,58 @@
 <template>
   <div>
-    <mesh name="Project" :position="position">
+    <mesh ref="block3d" name="Project" :position="position">
       <geometry type="Box" :args="[size.x, size.y, size.z]" />
-      <material type="MeshLambert" :color="color" :options="block_opts" />
+      <material type="MeshLambert" :color="color" :options="block_opts">
+        <!-- <texture :options="label_texture_opts" /> -->
+      </material>
     </mesh>
-    <mesh name="Label" :position="label_position">
+    <mesh ref="label3d" name="Label" :position="label_position">
       <geometry type="Plane" :args="[label_size.x, label_size.y]" />
-      <material type="MeshBasic" :options="label_opts">
+      <material type="MeshLambert" :options="label_opts">
         <texture :options="label_texture_opts" />
       </material>
     </mesh>
+    <div v-if="isOpened">
+      <ContentBlock v-for="n in 10" :key="n" :prtPosition="position" :prtSize="size" />
+    </div>
   </div>
 </template>
 
 <script>
 import * as THREE from 'three'
-// import { Object3D } from '@'
+// import { Base } from 'vue-threejs'
+
+import ContentBlock from 'components/objects/ContentBlock'
 
 export default {
   name: 'Project',
-  // mixins: [Object3D],
+  components: {
+    ContentBlock
+  },
+  // mixins: [Base],
   // props: { size: Object, texture: String, position: Object, color: Number },
   props: { data: Object, len: Number, index: Number },
   data: () => ({
+    // mesh_opts: {
+    //   userData: {
+    //     test: 'Hello!'
+    //   },
+    //   receiveShadow: true,
+    //   castShadow: true
+    // },
+    block3d: null,
     block_opts: {
       side: THREE.DoubleSide,
       wireframe: false
       // transparent: true,
       // opacity: 0.6
       // renderOrder: 0
-
     },
+    label3d: null,
     label_opts: {
       side: THREE.DoubleSide,
       // wireframe: false,
-      transparent: true
+      transparent: false
       // opacity: 0.6
       // renderOrder: 0
     },
@@ -43,7 +61,8 @@ export default {
     label_position: { x: 5, y: 5, z: 6 },
     color: 0xffffff,
     label_canvas: null,
-    label_size: null
+    label_size: null,
+    isOpened: false
   }),
   computed: {
     label_texture_opts () {
@@ -57,19 +76,31 @@ export default {
   },
   created () {
     // console.log('this.index', this.index)
+    // this.position = { x: 5, y: 5, z: 0 }
     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_position.z = this.size.z / 2 + 0.1
     this.label_canvas = this.createLabelCanvas()
-    console.log('this.label_canvas', this.label_canvas)
+    // console.log('this.label_canvas', this.label_canvas)
+  },
+  mounted () {
+    // console.log('project mounted', this)
+    this.block3d = this.$refs.block3d.curObj
+    this.block3d.castShadow = true
+    this.block3d.receiveShadow = true
+    this.block3d.userData = {
+      vnode: this
+    }
+    this.label3d = this.$refs.label3d.curObj
   },
   methods: {
     createLabelCanvas () {
-      console.log('createLabelCanvas', this.data.Titre)
+      // console.log('createLabelCanvas', this.data.Titre)
       const size = 48
-      const borderSize = 2
+      const borderSize = 5
       const ctx = document.createElement('canvas').getContext('2d')
       const font = `${size}px bold noto_sans`
       ctx.font = font
@@ -85,8 +116,8 @@ export default {
       ctx.font = font
       ctx.textBaseline = 'top'
 
-      // ctx.fillStyle = 'green'
-      // ctx.fillRect(0, 0, width, height)
+      ctx.fillStyle = 'white'
+      ctx.fillRect(0, 0, width, height)
       ctx.fillStyle = 'black'
       ctx.fillText(this.data.Titre, borderSize, borderSize)
       // console.log('createLabelCanvas', ctx)