camera is now orienting to target on click on contents

src/App.vue

@@ -186,8 +186,8 @@ export default {
         is_dragging: false,
         mouse: new THREE.Vector2(),
         mouse_start: new THREE.Vector2(),
-        lon: -91,
-        lat: 0,
+        lon: -90,
+        lat: -5.73,
         lon_start: 0,
         lat_start: 0,
         phi: 0,
@@ -286,6 +286,7 @@ export default {
       if (this.controls.user_interact) {
         this.controls.lon = (this.controls.mouse_start.x - e.clientX) * 0.1 + this.controls.lon_start
         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}`)
       }
     },
     onDocMouseup (e) {
@@ -314,7 +315,6 @@ export default {
         // if we clicked on 3Dobject
         if (intersects.length) {
           let cam = this.camera
-          let camPos = { ...this.camera.position }
           console.log('onDocMouseUp intersects', intersects)
           let object = intersects[0].object
           console.log('object[0].name', object.name)
@@ -337,29 +337,37 @@ export default {
           // get new camera target pos
           let toPos = { ...object.position }
           if (object.name === 'Content') {
+            this.controls.lat = 0
             switch (vnode.face) {
               case 'left':
                 toPos.x += 4
+                this.controls.lon = 180
                 break
-              case 'back':
-                toPos.z += 4
-                break
+              // case 'back':
+              //   toPos.z += 4
+              //   break
               case 'right':
                 toPos.x -= 4
+                this.controls.lon = 0
                 break
-              case 'front':
-                toPos.z -= 4
-                break
+              // case 'front':
+              //   toPos.z -= 4
+              //   break
             }
             // TODO: we need to update lon and lat accordingly when chaging camera orientation
-            // new TWEEN.Tween(this.controls.cam_target)
-            //   .to(object.position, 2000)
-            //   .start()
+            // let controls = this.controls
+            // let rad2deg = this.rad2deg
+            // let camTarget = { ...this.controls.cam_target }
+            new TWEEN.Tween(this.controls.cam_target)
+              .easing(TWEEN.Easing.Quadratic.InOut)
+              .to(object.position, 2000)
+              .start()
           } else if (object.name === 'Project') {
             toPos.z *= 0.5
             toPos.y = 2
           }
           // toPos.y = 5
+          let camPos = { ...this.camera.position }
           new TWEEN.Tween(camPos)
             .easing(TWEEN.Easing.Quadratic.InOut)
             .to(toPos, 3000)
@@ -381,17 +389,17 @@ export default {
     },
     animate (tt) {
       // CONTROLS
-      this.controls.lat = Math.max(-85, Math.min(85, this.controls.lat))
-      this.controls.phi = this.deg2rad(90 - this.controls.lat)
-      this.controls.theta = this.deg2rad(this.controls.lon)
-      // if (this.controls.user_interact === false) {
-      //   this.controls.lon += 0.1
-      // }
-      // if (this.controls.user_interact) {
-      this.controls.cam_target.x = 500 * Math.sin(this.controls.phi) * Math.cos(this.controls.theta)
-      this.controls.cam_target.y = 500 * Math.cos(this.controls.phi)
-      this.controls.cam_target.z = 500 * Math.sin(this.controls.phi) * Math.sin(this.controls.theta)
-      // }
+      if (this.controls.user_interact) {
+        this.controls.lat = Math.max(-85, Math.min(85, this.controls.lat))
+        this.controls.phi = this.deg2rad(90 - this.controls.lat)
+        this.controls.theta = this.deg2rad(this.controls.lon)
+        // if (this.controls.user_interact === false) {
+        //   this.controls.lon += 0.1
+        // }
+        this.controls.cam_target.x = 500 * Math.sin(this.controls.phi) * Math.cos(this.controls.theta)
+        this.controls.cam_target.y = 500 * Math.cos(this.controls.phi)
+        this.controls.cam_target.z = 500 * Math.sin(this.controls.phi) * Math.sin(this.controls.theta)
+      }
 
       if (this.camera) {
         this.camera.lookAt(this.controls.cam_target)

src/components/mixins.js

@@ -4,6 +4,9 @@ export default {
     deg2rad (deg) {
       return deg * (Math.PI / 180)
     },
+    rad2deg (rad) {
+      return rad * (180 / Math.PI)
+    },
     createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
       // console.log('createLabelCanvas', this.data.Titre)
       const size = fontsize

src/components/objects/ContentBlock.vue

@@ -225,8 +225,11 @@ export default {
     // this.face = 'left'
     // this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
     // this.rotation.y = 90
-    // First shift grid place (will transfer it from free places to occupied places)
-    this.shiftGrid({ type: this.type, id: this.id })
+    if (typeof this.gridContentPlaced[this.type] === 'undefined' ||
+      typeof this.gridContentPlaced[this.type][this.id] === 'undefined') {
+      // First shift grid place (will transfer it from free places to occupied places)
+      this.shiftGrid({ type: this.type, id: this.id })
+    }
     // Then get the right place for the current content
     let pos = this.gridContentPlaced[this.type][this.id]
     console.log('pos', pos)