comme back to home on title click
This commit is contained in:
+19
-8
@@ -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;
|
||||
|
||||
+83
-14
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user