canvas text in 3d env ok

src/App.vue

@@ -83,7 +83,8 @@ export default {
       myScene: scene,
       mouse: new THREE.Vector2(),
       camera: null,
-      raycaster: new THREE.Raycaster()
+      raycaster: new THREE.Raycaster(),
+      interactive_objects: []
     }
   },
   computed: {
@@ -105,10 +106,13 @@ export default {
   mounted () {
     console.log('mounted', this)
     this.camera = this.$children[0].global.camera
-
+    this.updatedInteractiveObjects()
     document.addEventListener('mousemove', this.onMouseMove, false)
     document.addEventListener('click', this.onDocumentClick, false)
   },
+  updated () {
+    this.updatedInteractiveObjects()
+  },
   methods: {
     ...mapActions({
       getProjects: 'Projects/getProjects'
@@ -121,13 +125,22 @@ export default {
       this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
       this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
     },
+    updatedInteractiveObjects () {
+      this.interactive_objects = []
+      for (var i = 0; i < this.myScene.children.length; i++) {
+        if (this.myScene.children[i].name === 'Project') {
+          this.interactive_objects.push(this.myScene.children[i])
+        }
+      }
+      console.log('this.interactive_objects', this.interactive_objects)
+    },
     onDocumentClick (e) {
       console.log('onDocumentClick', e)
 
       // update the picking ray with the camera and mouse position
       this.raycaster.setFromCamera(this.mouse, this.camera)
       // calculate objects intersecting the picking ray
-      var intersects = this.raycaster.intersectObjects(this.myScene.children)
+      var intersects = this.raycaster.intersectObjects(this.interactive_objects)
 
       for (var i = 0; i < intersects.length; i++) {
         intersects[i].object.material.color.set(0xff0000)