# Terre en 3D

## Recommended Posts

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 !
##### Share on other sites

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

##### Share on other sites

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;
}``````

##### 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)

##### Share on other sites

Thanks ! It works

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

##### 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

##### Share on other sites

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

##### Share on other sites

build a polygon mesh with triangulation

build an extruded mesh with extrusion (no cap)

put the polygon on the extrusion

##### Share on other sites

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 !

really nice

## 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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.