diff --git a/public/index.html b/public/index.html index 96fd005..88d9271 100644 --- a/public/index.html +++ b/public/index.html @@ -36,7 +36,9 @@ // required for raytracing const mouse = { x:0, y:0 }; const names = ['Tim', 'Max', 'Tom', 'Kai', 'Sam', 'Jay', 'Guy', 'Jim']; + const name = names[Math.floor(Math.random() * names.length)]; const removeDelay = 10000; + const uid = new Date().getMilliseconds()+Math.floor(Math.random() * 1000); // add fps stats if (FPS_STATS) { @@ -59,9 +61,7 @@ firebase.initializeApp(config); // Get all markers and place them - getAllMarkerData().then((snapshot) => { - console.log(snapshot.val()); - }); + getAllMarkerData(); ////////////////////////////////////////////////////////////////////////////////// // Initialize a basic camera @@ -185,6 +185,48 @@ const raycaster = getRayCaster(); const vec = raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 1, 0))); + if (vec) { + const meshes = placeMarker({ + position: { + x: vec.x, + y: vec.y, + z: vec.z + }, + name: name + }); + + writeMarkerData({ + x: vec.x, + y: vec.y, + z: vec.z + }, name, uid); + } + } + + setInterval(() => { + getAllMarkerData(); + }, 1000); + + function getAllMarkerData () { + firebase.database().ref('/markers').once('value').then(function(snapshot) { + for (let id in snapshot.val()) { + placeMarker(snapshot.val()[id]); + } + }); + } + + // write marker to database + function writeMarkerData (position, name, uid) { + firebase.database().ref('markers/' + uid).set({ + position: position, + name: name + }); + } + + function placeMarker (marker) { + const vec = marker.position; + const name = marker.name; + const colorMat = new THREE.MeshBasicMaterial({ color: new THREE.Color( 0x000000 ), side: THREE.DoubleSide @@ -200,81 +242,44 @@ side: THREE.DoubleSide }); - if (vec) { - const uid = new Date().getMilliseconds()+Math.floor(Math.random()*1000); - - const cylGeo = new THREE.CylinderGeometry(0.05, 0.005, 0.25, 12); - const colorCylMesh = new THREE.Mesh( cylGeo, colorMat ); - colorCylMesh.position.x = vec.x + cylGeo.parameters.radiusTop; - colorCylMesh.position.y = cylGeo.parameters.height / 2; - colorCylMesh.position.z = vec.z; - scene.add( colorCylMesh ); - - const outlineCylMesh = new THREE.Mesh( cylGeo, outlineMat ); - outlineCylMesh.position.x = vec.x + cylGeo.parameters.radiusTop; - outlineCylMesh.position.y = cylGeo.parameters.height / 2; - outlineCylMesh.position.z = vec.z; - outlineCylMesh.scale.multiplyScalar(1.05); - scene.add( outlineCylMesh ); - - const loader = new THREE.FontLoader(); - - loader.load( '../assets/helvetiker_bold.typeface.json', function ( font ) { - - const size = 0.05; - - const currName = names[Math.floor(Math.random() * names.length)]; - const nameGeometry = new THREE.TextGeometry(currName, { - font: font, - size: size, - height: 0.001, - curveSegments: 12 - }); - - const colorMesh = new THREE.Mesh( nameGeometry, textMat ); - colorMesh.position.x = vec.x; - colorMesh.position.y = cylGeo.parameters.height + cylGeo.parameters.height / 2; - colorMesh.position.z = vec.z; - scene.add( colorMesh ); - - const backdropGeometry = new THREE.PlaneGeometry(0.15, 0.1, 1); - const backdropMesh = new THREE.Mesh(backdropGeometry, colorMat); - backdropMesh.position.x = vec.x + backdropGeometry.parameters.width / 2.4; - backdropMesh.position.y = cylGeo.parameters.height + backdropGeometry.parameters.height * 1.5; - backdropMesh.position.z = vec.z - 0.01; - scene.add(backdropMesh); - - writeMarkerData({ x: vec.x, y: vec.y, z: vec.z }, currName, uid); - - setTimeout(() => { - scene.remove(colorCylMesh); - scene.remove(outlineCylMesh); - scene.remove(colorMesh); - scene.remove(backdropMesh); - - removeMarkerData(uid); - }, removeDelay); + const cylGeo = new THREE.CylinderGeometry(0.05, 0.005, 0.25, 12); + const colorCylMesh = new THREE.Mesh( cylGeo, colorMat ); + colorCylMesh.position.x = vec.x + cylGeo.parameters.radiusTop; + colorCylMesh.position.y = cylGeo.parameters.height / 2; + colorCylMesh.position.z = vec.z; + scene.add( colorCylMesh ); + + const outlineCylMesh = new THREE.Mesh( cylGeo, outlineMat ); + outlineCylMesh.position.x = vec.x + cylGeo.parameters.radiusTop; + outlineCylMesh.position.y = cylGeo.parameters.height / 2; + outlineCylMesh.position.z = vec.z; + outlineCylMesh.scale.multiplyScalar(1.05); + scene.add( outlineCylMesh ); + + const loader = new THREE.FontLoader(); + + loader.load('../assets/helvetiker_bold.typeface.json', function (font) { + const size = 0.05; + + const nameGeometry = new THREE.TextGeometry(name, { + font: font, + size: size, + height: 0.001, + curveSegments: 12 }); - } - } - function getAllMarkerData () { - return new Promise((resolve, reject) => { - firebase.database().ref('/markers').once('value').then(function(snapshot) { - resolve(snapshot); - }); - }); - } - - function removeMarkerData (uid) { - firebase.database().ref('markers/' + uid).set(null); - } - - // write marker to database - function writeMarkerData (position, name, uid) { - firebase.database().ref('markers/' + uid).set({ - position: position, - name: name + const colorMesh = new THREE.Mesh(nameGeometry, textMat); + colorMesh.position.x = vec.x; + colorMesh.position.y = cylGeo.parameters.height + cylGeo.parameters.height / 2; + colorMesh.position.z = vec.z; + scene.add(colorMesh); + + const backdropGeometry = new THREE.PlaneGeometry(0.15, 0.1, 1); + const backdropMesh = new THREE.Mesh(backdropGeometry, colorMat); + backdropMesh.position.x = vec.x + backdropGeometry.parameters.width / 2.4; + backdropMesh.position.y = cylGeo.parameters.height + backdropGeometry.parameters.height * 1.5; + backdropMesh.position.z = vec.z - 0.01; + scene.add(backdropMesh); }); }