|
@@ -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)
|