looking arround is quite working

src/components/objects/ContentBlock.vue

@@ -0,0 +1,39 @@
+<template>
+  <mesh name="ContentBlock" :position="position">
+    <geometry type="Box" :args="[size.x, size.y, size.z]" />
+    <material type="MeshLambert" :color="color" :options="opts" />
+  </mesh>
+</template>
+
+<script>
+import * as THREE from 'three'
+
+export default {
+  name: 'ContentBlock',
+  // mixins: [Object3D],
+  props: { prtPosition: Object, prtSize: Object },
+  data: () => ({
+    color: 0xffffff,
+    size: { x: 2, y: 2, z: 2 },
+    position: { x: 0, y: 5, z: 2 },
+    opts: {
+      side: THREE.DoubleSide
+      // wireframe: false,
+      // transparent: false,
+      // opacity: 0.6
+    }
+  }),
+  created () {
+    console.log('ContentBlock created', this.prtSize)
+    this.position.x = this.prtPosition.x - this.prtSize.x / 2 + Math.random() * this.prtSize.x
+
+    // console.log('this.position.y', this.position.y)
+    if (Math.random() > 0.5) {
+      this.position.y = this.prtPosition.y + this.prtSize.y / 2 + Math.random() * 20
+    } else {
+      this.position.y = this.prtPosition.y - this.prtSize.y / 2 - Math.random() * 20
+    }
+    // this.position.z = this.prtPosition.Z
+  }
+}
+</script>

src/components/objects/Plan.vue

@@ -7,9 +7,10 @@
       y:deg2rad(rotation.y),
       z:deg2rad(rotation.z)
     }"
+    :options="mesh_opts"
   >
     <geometry type="PlaneBuffer" :args="[size.w, size.h]" />
-    <material type="MeshBasic" :color="color" :options="opts" />
+    <material type="MeshLambert" :color="color" :options="opts" />
   </mesh>
 </template>
 
@@ -28,12 +29,15 @@ export default {
     rotation: Object
   },
   data: () => ({
+    mesh_opts: {
+      receiveShadow: true,
+      castShadow: true
+    },
     opts: {
       side: THREE.DoubleSide,
       wireframe: false,
       transparent: true,
-      opacity: 0.5,
-      renderOrder: 0
+      opacity: 0.4
     }
   })
 }

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)