Terre en 3D

[carringtonW84]

Bonjour,

je souhaite faire une Terre en 3D pour visualiser des données propres aux pays, quelque chose qui ressemble à ça : http://visualiser.fr/Babylon/cloud/index.html

 

Je pense avoir (quasiment) tous les élements pour le faire :
 - BabylonJS
 - Poly2Tri.js
 - PEP.js
 - la carte du monde en SVG : https://upload.wikimedia.org/wikipedia/commons/0/03/BlankMap-World6.svg
 
 Le seul point qui me manque est : comment construire ma / mon mesh (correspondant à un pays) à partir d'un path SVG ? Est-ce possible ?
 

Extrait du SVG :

<g id="mv">
    <title>Maldives</title>
    <path class="landxx coastxx mv" d="M 1785.0883,736.35884 C 1785.1683,735.65884 1784.8993,734.78584 1784.0083,734.98884 1784.5423,735.26884 1784.9613,735.76284 1785.0883,736.35884" id="mv-"/>
    <circle class="circlexx mv" cx="1784.2205" cy="730.37396" id="mv." r="6.0130301"/>
</g>

 

Merci d'avance pour votre aide !

[jerome]

you have to translate the SVG path into a series of successive vertices. Then you can use this series as a contour for the PolygonMeshBuilder function : http://doc.babylonjs.com/classes/2.4/PolygonMeshBuilder

example : http://www.babylonjs.com/Demos/Polygon/

[carringtonW84]

Hello,

thank you for your help ! For information I managed to do that :

• a filled polygon but not extruded because the method "ExtrudeShape" requires a array of Vector3, not a mesh.
• a Vector3 array extruded but nor filled

Have you any idea please ?

Thank you !

        var createScene = function () {
        	var scene = new BABYLON.Scene(engine);
        	var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(-15, 8, -30), scene);
        	camera.attachControl(canvas, true);
        	var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

			//filled polygon not extruded
			var poly2 = BABYLON.Polygon.Parse("12 10 12 8 14 7 16 8 16 10");
			var pmb2 = new BABYLON.PolygonMeshBuilder("poly2", poly2, scene).build();
			
			//Vector3 array extruded but not filled
			var v3SVG = Vector3FromPath($("#path3344").get(0),240);
			var path = [
					BABYLON.Vector3.Zero(),
					new BABYLON.Vector3(0, 1, 0)];		
			var extruded = BABYLON.Mesh.ExtrudeShape("extruded", v3SVG, path, 1, 0, 0, scene);
			
        	return scene;
        }

		function Vector3FromPath(path,samples)
		{
		  var arrayVector3 = new Array();
		  var len  = path.getTotalLength();
		  var step = step=len/samples;
		  
			for (var i=0;i<=len;i+=step)
			{
				var p = path.getPointAtLength(i);
				
				var unitVector3 = new BABYLON.Vector3(p.x/10, p.y/10, 0);
				arrayVector3.push(unitVector3);
			}

		  return arrayVector3;
		}

 

[jerome]

and what do you intend to achieve : an extruded mesh with a cap having the shape of the coutnry ?

If yes, just set your plain polygon on to the extruded mesh to cap it ...

unless the CAP parameter of the extrusion already does the job correctly (so no need to triangulate a polygon before)

[carringtonW84]

Thanks ! It works

... But from a particular resolution, I have black vertex that appears

[jerome]

yep, the extrusion CAP method is really light (barycenter based, not triangulation-based) in order to keep really fast when dynamically morphing an extruded shape... this can lead to weird results with concave polygons

Maybe in your case, setting a triangulated polygon on to a un-capped extruded mesh (so 2 meshes : the extrusion + the polygon cap) will be better

 

[NOTE for myself] : maybe one day, implementing an option to choose the capping method (fast barycenter or accurate triangulation) to extrusion would be a nice idea

[carringtonW84]

Thank you but I didn't understand everything, can you explain

Quote

setting a triangulated polygon on to a un-capped extruded mesh (so 2 meshes : the extrusion + the polygon cap) will be better

please ?

[jerome]

build a polygon mesh with triangulation

build an extruded mesh with extrusion (no cap)

put the polygon on the extrusion

[carringtonW84]

Thank you very much !

 

It works however the polygon mesh with triangulation and the extruded mesh with extrusion haven't the same reference. I had to make a rotation and invert a coordinate (to make a mirror effect).

See in attachment.

 

Thanks again for your help !

 

[jerome]

really nice 

[carringtonW84]

alpha version : http://babylonjs-map.azurewebsites.net/