Jump to content

Terre en 3D


Recommended Posts


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">
    <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"/>


Merci d'avance pour votre aide !
Link to comment
Share on other sites


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 = [
					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);

		  return arrayVector3;


Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...