bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

starting navigation inside projects

Browse Source
This commit is contained in:
bachir
2020-08-31 12:14:19 +02:00
parent 2a268a33b6
commit 643f857dd8
5 changed files with 178 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+96 -61
View File
@@ -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()
}
}
src/components/mixins.js
+33 -1
View File
@@ -1,8 +1,40 @@
// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
export default {
methods: {
deg2rad: function (deg) {
deg2rad (deg) {
return deg * (Math.PI / 180)
},
createLabelCanvas (text, fontsize) {
// console.log('createLabelCanvas', this.data.Titre)
const size = fontsize
const borderSize = 5
let lines = text.split('\n')
const ctx = document.createElement('canvas').getContext('2d')
const font = `${size}px bold noto_sans,sans-serif`
ctx.font = font
// measure how long the name will be
const doubleBorderSize = borderSize * 2
let width = 0
for (var i = 0; i < lines.length; i++) {
width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize)
}
const height = size * lines.length + doubleBorderSize
this.label_size = { x: width / 21, y: height / 21 }
ctx.canvas.width = width
ctx.canvas.height = height
// need to set font again after resizing canvas
ctx.font = font
ctx.textBaseline = 'top'
// ctx.fillStyle = 'red'
// ctx.fillRect(0, 0, width, height)
ctx.fillStyle = 'black'
for (var j = 0; j < lines.length; j++) {
ctx.fillText(lines[j], borderSize, borderSize + j * size)
}
// console.log('createLabelCanvas', ctx)
return ctx.canvas
}
}
}
src/components/objects/ContentBlock.vue
+21 -12
View File
@@ -1,5 +1,5 @@
<template>
<mesh name="ContentBlock" :position="position">
<mesh ref="block3d" name="ContentBlock" :position="position">
<geometry type="Box" :args="[size.x, size.y, size.z]" />
<material type="MeshLambert" :color="color" :options="opts" />
</mesh>
@@ -13,27 +13,36 @@ export default {
// mixins: [Object3D],
props: { prtPosition: Object, prtSize: Object },
data: () => ({
color: 0xffffff,
size: { x: 2, y: 2, z: 2 },
position: { x: 0, y: 5, z: 2 },
block3d: null,
size: { x: 2, y: 3, z: 0.1 },
position: { x: 0, y: 0, z: 0 },
opts: {
side: THREE.DoubleSide
// wireframe: false,
// transparent: false,
// opacity: 0.6
}
},
isOpened: false
}),
computed: {
color () {
return this.opened ? 0xff0000 : 0x0000ff
}
},
created () {
console.log('ContentBlock created', this.prtSize)
this.position.x = this.prtPosition.x - this.prtSize.x / 2 + Math.random() * this.prtSize.x
// console.log('this.position.y', this.position.y)
if (Math.random() > 0.5) {
this.position.y = this.prtPosition.y + this.prtSize.y / 2 + Math.random() * 20
} else {
this.position.y = this.prtPosition.y - this.prtSize.y / 2 - Math.random() * 20
this.position.y = this.prtPosition.y - this.prtSize.y / 2 + Math.random() * this.prtSize.y
this.position.z = this.prtPosition.z - this.prtSize.z / 2 + Math.random() * this.prtSize.z
},
mounted () {
this.block3d = this.$refs.block3d.curObj
// this.block3d.castShadow = true
// this.block3d.receiveShadow = true
// record self references
this.block3d.userData = {
vnode: this
}
// this.position.z = this.prtPosition.Z
}
}
</script>
src/components/objects/Project.vue
+20 -43
View File
@@ -22,6 +22,7 @@
import * as THREE from 'three'
// import { Base } from 'vue-threejs'
import mixins from 'components/mixins'
import ContentBlock from 'components/objects/ContentBlock'
export default {
@@ -29,17 +30,10 @@ export default {
components: {
ContentBlock
},
// mixins: [Base],
mixins: [mixins],
// props: { size: Object, texture: String, position: Object, color: Number },
props: { data: Object, len: Number, index: Number },
data: () => ({
// mesh_opts: {
// userData: {
// test: 'Hello!'
// },
// receiveShadow: true,
// castShadow: true
// },
block3d: null,
block_opts: {
side: THREE.DoubleSide
@@ -52,7 +46,7 @@ export default {
label_opts: {
side: THREE.DoubleSide,
// wireframe: false,
transparent: false
transparent: true
// opacity: 0.6
// renderOrder: 0
},
@@ -79,13 +73,19 @@ export default {
// randomize size and positions
this.size.y = 100 + Math.random() * 90
this.size.z = 10 + Math.random() * 30
this.position.x = this.label_position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
this.position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
this.position.y = -1 * this.size.y / 2 + 10 + Math.random() * 30// -10 + Math.random() * this.size.y / 2
this.position.z = -10 + Math.random() * 10
this.label_position.y = 5
this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48)
this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
this.label_position.z = this.position.z + this.size.z / 2 + 0.1
this.label_canvas = this.createLabelCanvas()
// console.log('this.label_canvas', this.label_canvas)
},
mounted () {
// console.log('project mounted', this)
// mesh options
this.block3d = this.$refs.block3d.curObj
this.block3d.castShadow = true
@@ -95,38 +95,15 @@ export default {
vnode: this
}
this.label3d = this.$refs.label3d.curObj
},
mounted () {
// console.log('project mounted', this)
},
methods: {
createLabelCanvas () {
// console.log('createLabelCanvas', this.data.Titre)
const size = 48
const borderSize = 5
const ctx = document.createElement('canvas').getContext('2d')
const font = `${size}px bold noto_sans`
ctx.font = font
// measure how long the name will be
const doubleBorderSize = borderSize * 2
const width = ctx.measureText(this.data.Titre).width + doubleBorderSize
const height = size + doubleBorderSize
this.label_size = { x: width / 21, y: height / 21 }
ctx.canvas.width = width
ctx.canvas.height = height
// need to set font again after resizing canvas
ctx.font = font
ctx.textBaseline = 'top'
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, width, height)
ctx.fillStyle = 'black'
ctx.fillText(this.data.Titre, borderSize, borderSize)
// console.log('createLabelCanvas', ctx)
return ctx.canvas
}
// light
// console.log('project mounted', this.$env3d)
// var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
// this.$env3d.scene.add(light)
}
// ,
// methods: {
//
// }
}
</script>
src/index.js
+8
View File
@@ -14,6 +14,14 @@ import 'assets/css/app.scss'
Vue.use(Meta)
Vue.use(VueThreejs)
// https://stackoverflow.com/a/43193455
var env3d = {
scene: null,
renderer: null,
camera: null
}
Vue.prototype.$env3d = env3d
// sync(store, router) // done. Returns an unsync callback fn
// sync(store)