first draft of openenings content in html

src/App.vue

@@ -47,6 +47,7 @@
 
           </scene>
         </renderer>
+        <Content v-if="content_data" :data="content_data" @onClose="onCloseContent" />
       </div>
     </section>
     <footer />
@@ -66,6 +67,7 @@ import WaterFragment from 'assets/glsl/WaterFragment'
 import Ground from './components/objects/Ground'
 import Cube from './components/objects/Cube'
 import Project from './components/objects/Project'
+import Content from './components/Content'
 
 // const TWEEN = require('@tweenjs/tween.js')
 const _debug = false
@@ -80,7 +82,8 @@ export default {
   components: {
     Cube,
     Project,
-    Ground
+    Ground,
+    Content
   },
   mixins: [mixins],
   data () {
@@ -188,7 +191,9 @@ export default {
       interactive_objects: [],
       light_opts: {
         castShadow: true
-      }
+      },
+      opened_vnode: null,
+      content_data: null
     }
   },
   computed: {
@@ -267,10 +272,17 @@ export default {
       }
     },
     onDocMouseup (e) {
-      // console.log('onDocumentMouseup', e)
+      console.log('onDocumentMouseup', e)
       // CONTROLS
       this.controls.user_interact = false
 
+      // check if event is not a classic html link
+      if (e.target.className === 'close-btn') {
+        // console.log('close-btn: vnode', this.opened_vnode)
+        // this.opened_vnode.isOpened = false
+        return
+      }
+
       // INTERACTIONS
       this.updatedInteractiveObjects()
 
@@ -290,7 +302,19 @@ export default {
           // for (var i = 0; i < intersects.length; i++) {
           object = intersects[0].object
           vnode = object.userData.vnode
+          if (object.name === 'Content' && vnode.isOpened) {
+            this.content_data = vnode.data
+          }
+
+          // close precedent vnode
+          if (this.opened_vnode && this.opened_vnode.$options._componentTag === 'ContentBlock') {
+            // console.log('opened_vnode', this.opened_vnode)
+            this.opened_vnode.isOpened = false
+          }
+          // opene current vnode
           vnode.isOpened = true
+          // recorde vnode as precedent vnode
+          this.opened_vnode = vnode
 
           toPos = { ...object.position }
           if (object.name === 'Content') {
@@ -354,6 +378,9 @@ export default {
 
       // TWEENS
       TWEEN.update()
+    },
+    onCloseContent () {
+      this.content_data = null
     }
   }
 }