basic geometry generation of limited polygon

index.html

@@ -27,7 +27,6 @@ var bbox = "" + position[0]
 		+ "," + (position[0]+0.001)
 		+ "," + (position[1]+0.001)
 var queryOSM = `https://overpass-api.de/api/interpreter?data=[out:json];nwr(${bbox});out;`
-console.log( bbox )
 // format https://overpass-api.de/output_formats.html#json
 // bounding box https://dev.overpass-api.de/overpass-doc/en/full_data/bbox.html
 // testing https://overpass-turbo.eu
@@ -35,7 +34,7 @@ fetch(queryOSM).then(response => response.json()).then(data => fromOSMTo3DElemen
 
 // fetch flood data of target location (should be only 2 available) as timeseries
 var queryCEREMA = "https://cerema.fr/api/"+position
-fetch(queryCEREMA).then(response => response.json()).then(data => console.log(data) )
+//fetch(queryCEREMA).then(response => response.json()).then(data => console.log(data) )
 
 // animate water based on flood data
 
@@ -56,12 +55,13 @@ function fromOSMTo3DElements( josm ){
 	var houses = josm.elements.filter( e => (e.type == "node" && e.tags && e.tags["addr:housenumber"]))
 	// does not give a polygon, might need further requests. Might also not be the right way.
 	addHouses( houses )
-	console.log( ways.length, houses.length )
 }
 
 function addHouses( houses ){
 	houses.map( h => {
 		var el = document.createElement("a-box")
+		// simplification, for a proper polygon see past work
+		// https://glitch.com/edit/#!/ar-room?path=README.md
 		el.setAttribute("position", 
 				(((h.lat*1000)-(Math.round(h.lat*1000)))*10).toFixed(3) 
 				+ " 0 " 
@@ -75,6 +75,85 @@ function geolocalized( pos ){
 	console.log( pos.coords )
 }
 
+function addWall(a, b, h, el){
+  var geometry = new THREE.BufferGeometry();
+  // create a simple rectangle shape. We duplicate the top left and bottom right
+  // vertices because each vertex needs to appear once per triangle.
+  var vertices = new Float32Array( [
+     a.x, a.y, a.z,
+     a.x, a.y+h, a.z,
+     b.x, b.y, b.z,
+
+     a.x, a.y+h, a.z,
+     b.x, b.y+h, b.z,
+     b.x, b.y, b.z,
+  ] );
+
+  // itemSize = 3 because there are 3 values (components) per vertex
+  geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
+  var material = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true, side: THREE.DoubleSide } );
+  var mesh = new THREE.Mesh( geometry, material );
+  var entity = document.createElement("a-entity");
+  entity.object3D.add( mesh );
+  el.appendChild( entity );
+  
+}
+
+function addFloorFan(a, b, c, el){
+  var geometry = new THREE.BufferGeometry();
+  var vertices = new Float32Array( [
+     a.x, a.y, a.z,
+     b.x, b.y, b.z,
+     c.x, c.y, c.z,
+  ] );
+
+  // itemSize = 3 because there are 3 values (components) per vertex
+  geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
+  var material = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true, side: THREE.DoubleSide } );
+  var mesh = new THREE.Mesh( geometry, material );
+  var entity = document.createElement("a-entity");
+  entity.object3D.add( mesh );
+  el.appendChild( entity );
+}
+
+function make3DFloor(points, el){ // assumes an array of threejs Vector3, not AFRAME elements anymore
+  var entity = document.createElement("a-entity")
+  var centroid = getCentroid( points )
+  entity.id = "roomcentroid"
+  entity.setAttribute("position", centroid)
+  el.appendChild( entity )
+  
+	points.map( (e,i,arr) => {
+		(i==arr.length-1) ? addFloorFan(arr[0], e, centroid, el) : addFloorFan(e, arr[i+1], centroid, el)
+	})
+  
+}
+
+function getCentroid(points){
+  var centroid = new THREE.Vector3(0,0,0);
+  // can probably be simplied now that we rely on threejs vectors rather than AFrame elements
+  for (var e of points) { 
+    centroid.add( e );
+  }
+  centroid.divideScalar(points.length);
+  return centroid;  
+}
+
+AFRAME.registerComponent('procgen', {
+  init: function () {
+	var el = this.el
+	var a = new THREE.Vector3(1,0,1)
+	var b = new THREE.Vector3(-1,0,1)
+	var c = new THREE.Vector3(-1,0,-1)
+	var d = new THREE.Vector3(0,0,-2)
+	var e = new THREE.Vector3(1,0,-1)
+	var poly = [a,b,c,d,e]
+	var h = 2
+	poly.map( (e,i,arr) => { (i==arr.length-1) ? addWall(arr[0], e, h, el) : addWall(e, arr[i+1], h, el) })
+	make3DFloor( poly, el )
+  }
+});
+
 </script>
     <a-scene osm>
       <!-- Quest available only during event, otherwise cardboard -->
@@ -82,6 +161,8 @@ function geolocalized( pos ){
       <a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
       <!-- for cardboard consider instead https://aframe.io/docs/1.3.0/components/cursor.html  -->
 
+      <a-entity procgen position="-4 0 -4"></a-entity>
+
       <!-- Default lighting injected by A-Frame. -->
       <a-entity light="type: ambient; color: #BBB"></a-entity>
       <a-entity animation="property: position; to: 5 1 1; dur: 20000; easing: linear; loop: true"