assets/css/app.scss

@@ -22,22 +22,25 @@ body{
 
 header[role="banner"]{
   padding:1em;
-  pointer-events: none;
+  // pointer-events: none;
+  cursor: pointer;
+  h2{
+    font-weight: 500;
+    font-size: 1em;
+    margin:0;
+  }
   h1{
     font-weight: 400;
     font-size: 1.323em;
+    margin:0.5em 0;
     sup{
       background-color: #1a1a1a;
       border-radius: 5px;
       color: #fff;
-      padding:0.1em 0.3em;
-      font-size: 0.5em;
+      padding:0.2em 0.5em 0.05em 0.5em;
+      font-size: 0.4em;
     }
   }
-  h2{
-    font-weight: 400;
-    font-size: 1em;
-  }
 }
 
 
@@ -98,6 +101,13 @@ section[role="main-content"]{
     }
 
   }
+  .modale-title{
+    position: absolute;
+    padding:0.5em;
+    margin: 0 0.5em 0.5em 0;
+    background-color: rgba(255,255,255,0.6);
+    border-radius: 3px;
+  }
 }
 
 
@@ -108,10 +118,11 @@ section[role="main-content"]{
   ul{
     padding:1em;
     background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 3px;
     li{
       padding:0.25em 0;
       text-align: right;
-      min-width: 5em;
+      min-width: 4em;
       cursor: pointer;
       &:hover, &.active{
         font-weight: bold;

src/App.vue

@@ -1,12 +1,18 @@
 <template>
   <div id="root">
-    <header role="banner">
+    <header
+      role="banner"
+      class="header-banner"
+      @click.stop="onClickSiteTitle"
+      @keyup.enter="onClickSiteTitle"
+    >
       <div class="wrapper">
+        <h2>Muntadas</h2>
         <h1
           class="site-title"
           tabindex="0"
         >
-          Muntadas Media Architecture Projects <sup>ALPHA</sup>
+          Media Architecture Projects <sup>ALPHA</sup>
         </h1>
       </div>
     </header>
@@ -47,6 +53,13 @@
           </scene>
         </renderer>
         <Content v-if="content_data" :data="content_data" @onClose="onCloseContent" />
+        <div
+          v-if="modale_title && !content_data"
+          class="modale-title"
+          :style="{ bottom: modale_title_pos.y+'px', right: modale_title_pos.x+'px' }"
+        >
+          <span class="title">{{ modale_title }}</span>
+        </div>
       </div>
     </section>
     <footer />
@@ -180,6 +193,7 @@ export default {
       // mouse_start: new THREE.Vector2(),
       // mouse: new THREE.Vector2(),
       camera: null,
+      modale_title_pos: { x: 0, y: 0 },
       mouse: new THREE.Vector2(),
       controls: {
         user_interact: false,
@@ -205,7 +219,8 @@ export default {
       //   castShadow: true
       // },
       opened_vnode: null,
-      content_data: null
+      content_data: null,
+      modale_title: null
     }
   },
   computed: {
@@ -245,9 +260,10 @@ export default {
     this.updatedInteractiveObjects()
     // CONTROLS
     // https://blogs.perficient.com/2020/05/21/3d-camera-movement-in-three-js-i-learned-the-hard-way-so-you-dont-have-to/
-    document.addEventListener('mousedown', this.onDocMouseDown)
-    document.addEventListener('mousemove', this.onDocMouseMove)
-    document.addEventListener('mouseup', this.onDocMouseup)
+
+    this.myRenderer.domElement.addEventListener('mousedown', this.onDocMouseDown)
+    this.myRenderer.domElement.addEventListener('mousemove', this.onDocMouseMove)
+    this.myRenderer.domElement.addEventListener('mouseup', this.onDocMouseup)
   },
   updated () {
     this.updatedInteractiveObjects()
@@ -278,6 +294,10 @@ export default {
       this.controls.user_interact = true
     },
     onDocMouseMove (e) {
+      this.modale_title_pos = {
+        x: window.innerWidth - e.clientX,
+        y: window.innerHeight - e.clientY
+      }
       // RAY CASTING : update the mouse variable
       this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
       this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
@@ -288,19 +308,38 @@ export default {
         this.controls.lat = (e.clientY - this.controls.mouse_start.y) * 0.1 + this.controls.lat_start
         // console.log(`lon: ${this.controls.lon}, lat: ${this.controls.lat}`)
       }
+
+      // 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.interactive_objects)
+      if (intersects.length) {
+        let object = intersects[0].object
+        if (object.name === 'Content') {
+          let vnode = object.userData.vnode
+          console.log('Name', vnode.data.Name)
+          this.modale_title = vnode.data.Name
+        } else {
+          this.modale_title = null
+        }
+      } else {
+        this.modale_title = null
+      }
     },
     onDocMouseup (e) {
       console.log('onDocumentMouseup', e)
       // CONTROLS
       this.controls.user_interact = false
 
-      // check if event is not a classic html link
-      // TODO: stopPropagation instead of that (but it does not work)
-      if (e.target.className === 'close-btn' || e.target.className === 'btn-level') {
-        // console.log('close-btn: vnode', this.opened_vnode)
-        // this.opened_vnode.isOpened = false
-        return
-      }
+      // // check if event is not a classic html link
+      // // TODO: stopPropagation instead of that (but it does not work)
+      // if (e.target.className === 'close-btn' ||
+      //   e.target.className === 'btn-level' ||
+      //   e.target.className === 'header-banner') {
+      //   // console.log('close-btn: vnode', this.opened_vnode)
+      //   // this.opened_vnode.isOpened = false
+      //   return
+      // }
 
       // INTERACTIONS
       this.updatedInteractiveObjects()
@@ -357,7 +396,6 @@ export default {
               //   toPos.z -= 4
               //   break
             }
-            // TODO: we need to update lon and lat accordingly when chaging camera orientation
             // let controls = this.controls
             // let rad2deg = this.rad2deg
             // let camTarget = { ...this.controls.cam_target }
@@ -391,6 +429,37 @@ export default {
         }
       } // end if dragging
     },
+    onClickSiteTitle (e) {
+      e.preventDefault()
+      let cam = this.camera
+      let camPos = { ...this.camera.position }
+      new TWEEN.Tween(camPos)
+        .easing(TWEEN.Easing.Quadratic.InOut)
+        .to(this.init_cam_pos, 5000)
+        .onUpdate(function () {
+          // console.log('tween update', this._object)
+          cam.position.set(this._object.x, this._object.y, this._object.z)
+        })
+        .start()
+      this.controls.lon = -90
+      this.controls.lat = -5.75
+      new TWEEN.Tween(this.controls.cam_target)
+        .easing(TWEEN.Easing.Quadratic.InOut)
+        .to({ x: 0, y: 0, z: 0 }, 5000)
+        .start()
+      // let camRot = { ...this.camera.rotation }
+      // console.log('camRot', camRot)
+      // new TWEEN.Tween(camRot)
+      //   .easing(TWEEN.Easing.Quadratic.InOut)
+      //   .to(this.init_cam_rot, 5000)
+      //   .onUpdate(function () {
+      //     // console.log('tween update', this._object)
+      //     cam.rotation.x = this._object.x
+      //     cam.rotation.y = this._object.y
+      //     cam.rotation.z = this._object.z
+      //   })
+      //   .start()
+    },
     onLift (toPos) {
       console.log('onLift', toPos)
       let cam = this.camera

src/store/modules/project.js

@@ -180,11 +180,11 @@ export default {
       let cols = state.wall.nbrWinZ / state.contents_size_factor
       let t
       for (var m = 0; m < rows; m++) { // rows
-        if (m > rows / 4 * 3) {
+        if (m > rows / 4 * 3 + 1) {
           t = state.contentTypes[0]
-        } else if (m > rows / 4 * 2) {
+        } else if (m > rows / 4 * 2 + 1) {
           t = state.contentTypes[1]
-        } else if (m > rows / 4) {
+        } else if (m > rows / 4 + 1) {
           t = state.contentTypes[2]
         } else {
           t = state.contentTypes[3]