starting navigation inside projects
This commit is contained in:
+96
-61
@@ -6,7 +6,7 @@
|
||||
class="site-title"
|
||||
tabindex="0"
|
||||
>
|
||||
Muntadas
|
||||
Muntadas
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
@@ -33,7 +33,7 @@
|
||||
<cube :size="{x:1,y:1,z:30}" :position="{x:0,y:0,z:15}" :color="0x17d100" />
|
||||
</template>
|
||||
|
||||
<ground :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0x000011" :rotation="{x:90,y:0,z:0}" />
|
||||
<ground :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0x133f52" :rotation="{x:90,y:0,z:0}" />
|
||||
|
||||
<template v-if="projects.length">
|
||||
<project
|
||||
@@ -101,7 +101,7 @@ export default {
|
||||
var uniforms = {
|
||||
'topColor': { value: new THREE.Color(0x0077ff) },
|
||||
'horizontColor': { value: new THREE.Color(0xffffff) },
|
||||
'waterColor': { value: new THREE.Color(0x0000aa) },
|
||||
'waterColor': { value: new THREE.Color(0x13719a) },
|
||||
'bottomColor': { value: new THREE.Color(0x000000) },
|
||||
'offset': { value: 33 },
|
||||
'wateroffset': { value: 33 },
|
||||
@@ -124,20 +124,42 @@ export default {
|
||||
fragmentShader: WaterFragment,
|
||||
side: THREE.BackSide
|
||||
})
|
||||
var ground = new THREE.Mesh(bgGeo, waterMat)
|
||||
ground.rotateZ(this.deg2rad(180))
|
||||
scene.add(ground)
|
||||
var water = new THREE.Mesh(bgGeo, waterMat)
|
||||
water.rotateZ(this.deg2rad(180))
|
||||
scene.add(water)
|
||||
|
||||
// SEA
|
||||
|
||||
// lights
|
||||
var sun = new THREE.PointLight(0xffffff, 5)
|
||||
var sunGeo = new THREE.SphereBufferGeometry(1, 16, 8)
|
||||
var sunMat = new THREE.MeshBasicMaterial({ color: 0xffffff })
|
||||
sun.add(new THREE.Mesh(sunGeo, sunMat))
|
||||
sun.position.set(-150, 150, 50)
|
||||
var sun = new THREE.PointLight(0xfcfcf9, 2)
|
||||
sun.position.set(-150, 150, 110)
|
||||
sun.castShadows = true
|
||||
// sun.target.position.set(0, 0, 0)
|
||||
scene.add(sun)
|
||||
// scene.add(sun.target)
|
||||
|
||||
var sun2 = new THREE.PointLight(0xfcfcf9, 0.6)
|
||||
sun2.position.set(150, 150, 110)
|
||||
sun2.castShadows = true
|
||||
// sun2.target.position.set(0, 0, 0)
|
||||
scene.add(sun2)
|
||||
// scene.add(sun2.target)
|
||||
|
||||
var sun3 = new THREE.PointLight(0xfcfcf9, 0.6)
|
||||
sun3.position.set(0, 150, -110)
|
||||
sun3.castShadows = true
|
||||
// sun3.target.position.set(0, 0, 0)
|
||||
scene.add(sun3)
|
||||
// scene.add(sun2.target)
|
||||
|
||||
var sun4 = new THREE.PointLight(0xfcfcf9, 0.6)
|
||||
sun4.position.set(0, -150, -110)
|
||||
sun4.castShadows = true
|
||||
// sun4.target.position.set(0, 0, 0)
|
||||
scene.add(sun4)
|
||||
// scene.add(sun2.target)
|
||||
|
||||
// RETURN DATA
|
||||
return {
|
||||
debug: _debug,
|
||||
myRenderer: renderer,
|
||||
@@ -148,9 +170,10 @@ export default {
|
||||
mouse: new THREE.Vector2(),
|
||||
controls: {
|
||||
user_interact: false,
|
||||
is_dragging: false,
|
||||
mouse: new THREE.Vector2(),
|
||||
mouse_start: new THREE.Vector2(),
|
||||
lon: 0,
|
||||
lon: -91,
|
||||
lat: 0,
|
||||
lon_start: 0,
|
||||
lat_start: 0,
|
||||
@@ -161,6 +184,7 @@ export default {
|
||||
// cam_controls: null,
|
||||
init_cam_pos: { x: 0, y: 10, z: 100 },
|
||||
raycaster: new THREE.Raycaster(),
|
||||
interactive_objects_names: ['Project', 'ContentBlock'],
|
||||
interactive_objects: [],
|
||||
light_opts: {
|
||||
castShadow: true
|
||||
@@ -182,10 +206,14 @@ export default {
|
||||
if (!this.projects.length) {
|
||||
this.getProjects()
|
||||
}
|
||||
this.$env3d.scene = this.myScene
|
||||
this.$env3d.renderer = this.myRenderer
|
||||
},
|
||||
mounted () {
|
||||
console.log('mounted', this)
|
||||
this.camera = this.$refs.camera.curObj
|
||||
console.log('App mounted', this)
|
||||
console.log('App mounted $env3d', this.$env3d)
|
||||
|
||||
this.camera = this.$env3d.camera = this.$refs.camera.curObj
|
||||
// this.cam_controls = this.$refs.cam_controls.controls
|
||||
// console.log('cam_controls', this.cam_controls)
|
||||
|
||||
@@ -193,6 +221,8 @@ export default {
|
||||
// console.log('this.cam_controls', this.cam_controls)
|
||||
|
||||
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, false)
|
||||
document.addEventListener('mousemove', this.onDocMouseMove, false)
|
||||
document.addEventListener('mouseup', this.onDocMouseup, false)
|
||||
@@ -208,16 +238,17 @@ export default {
|
||||
console.log('handlescene', scene)
|
||||
},
|
||||
updatedInteractiveObjects () {
|
||||
console.log('updatedInteractiveObjects', this.myScene.children)
|
||||
this.interactive_objects = []
|
||||
for (var i = 0; i < this.myScene.children.length; i++) {
|
||||
if (this.myScene.children[i].name === 'Project') {
|
||||
if (this.interactive_objects_names.indexOf(this.myScene.children[i].name) !== -1) {
|
||||
this.interactive_objects.push(this.myScene.children[i])
|
||||
}
|
||||
}
|
||||
// console.log('this.interactive_objects', this.interactive_objects)
|
||||
},
|
||||
onDocMouseDown (e) {
|
||||
// controls
|
||||
// CONTROLS
|
||||
this.controls.mouse_start.x = e.clientX
|
||||
this.controls.mouse_start.y = e.clientY
|
||||
this.controls.lon_start = this.controls.lon
|
||||
@@ -231,9 +262,7 @@ export default {
|
||||
|
||||
// CONTROLS
|
||||
if (this.controls.user_interact) {
|
||||
// lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
|
||||
this.controls.lon = (this.controls.mouse_start.x - e.clientX) * 0.1 + this.controls.lon_start
|
||||
// lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
|
||||
this.controls.lat = (e.clientY - this.controls.mouse_start.y) * 0.1 + this.controls.lat_start
|
||||
}
|
||||
},
|
||||
@@ -243,65 +272,71 @@ export default {
|
||||
this.controls.user_interact = false
|
||||
|
||||
// INTERACTIONS
|
||||
// TODO: check if draging
|
||||
// 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)
|
||||
// console.log('intersects', intersects)
|
||||
this.updatedInteractiveObjects()
|
||||
|
||||
let object, vnode//, toPos
|
||||
// let cam = this.camera
|
||||
// let camPos = { ...this.camera.position }
|
||||
if (intersects.length) {
|
||||
for (var i = 0; i < intersects.length; i++) {
|
||||
object = intersects[i].object
|
||||
vnode = object.userData.vnode
|
||||
vnode.isOpened = true
|
||||
// check if draging
|
||||
if (Math.hypot(e.clientX - this.controls.mouse_start.x, e.clientY - this.controls.mouse_start.y) < 5) {
|
||||
// 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)
|
||||
// console.log('intersects', intersects)
|
||||
|
||||
// new TWEEN.Tween(this.controls.cam_target)
|
||||
// .to(object.position, 400)
|
||||
let object, vnode, toPos
|
||||
let cam = this.camera
|
||||
let camPos = { ...this.camera.position }
|
||||
if (intersects.length) {
|
||||
console.log('onDocMouseUp intersects', intersects)
|
||||
for (var i = 0; i < intersects.length; i++) {
|
||||
object = intersects[i].object
|
||||
vnode = object.userData.vnode
|
||||
vnode.isOpened = true
|
||||
|
||||
// new TWEEN.Tween(this.controls.cam_target)
|
||||
// .to(object.position, 400)
|
||||
// .start()
|
||||
//
|
||||
toPos = { ...object.position }
|
||||
if (object.name === 'ContentBlock') {
|
||||
toPos.z += 1
|
||||
}
|
||||
// toPos.y = 5
|
||||
new TWEEN.Tween(camPos)
|
||||
.easing(TWEEN.Easing.Quadratic.InOut)
|
||||
.to(toPos, 3000)
|
||||
.onUpdate(function () {
|
||||
// console.log('tween update', this._object)
|
||||
cam.position.set(this._object.x, this._object.y, this._object.z)
|
||||
// camControls.update()
|
||||
})
|
||||
.start()
|
||||
|
||||
// console.log('tween', tween)
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// new TWEEN.Tween(this.camera.position)
|
||||
// .to(this.init_cam_pos, 1000)
|
||||
// .start()
|
||||
//
|
||||
// toPos = { ...object.position }
|
||||
// toPos.z += 20
|
||||
// toPos.y = 5
|
||||
// new TWEEN.Tween(camPos)
|
||||
// .easing(TWEEN.Easing.Quadratic.InOut)
|
||||
// .to(toPos, 3000)
|
||||
// .onUpdate(function () {
|
||||
// // console.log('tween update', this._object)
|
||||
// cam.position.set(this._object.x, this._object.y, this._object.z)
|
||||
// // camControls.update()
|
||||
// })
|
||||
// .start()
|
||||
|
||||
// console.log('tween', tween)
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// new TWEEN.Tween(this.camera.position)
|
||||
// .to(this.init_cam_pos, 1000)
|
||||
// .start()
|
||||
}
|
||||
} // end if dragging
|
||||
},
|
||||
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
|
||||
// }
|
||||
|
||||
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.controls.user_interact) {
|
||||
this.camera.lookAt(this.controls.cam_target)
|
||||
// }
|
||||
|
||||
if (this.camera && this.controls.user_interact) {
|
||||
this.camera.lookAt(this.controls.cam_target)
|
||||
}
|
||||
|
||||
// TWEENS
|
||||
TWEEN.update()
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user