I'm currently working on creating a map using a json file to go from d3.js to Three.js. However, when the map is displayed, it appears upside down. I'm wondering if there is a way to flip it so that it displays correctly. As a newcomer to d3 and Three.js, I'm unsure of the best approach to take.
Here's how the current map looks:
This is what I aim for:
Below is the code snippet I have been using:
mercator = d3.geo.equirectangular();
path = d3.geo.path().projection(mercator);
var translate = mercator.translate();
translate[0] = 500;
translate[1] = 0;
mercator.translate(translate);
mercator.scale(200);
var data=jsonCountrys;
var countries = [];
var i, j;
// converting to threejs meshes
for (i = 0 ; i < data.features.length ; i++) {
var geoFeature = data.features[i];
var properties = geoFeature.properties;
var feature = path(geoFeature);
// only need to convert it to a three.js path
var mesh = transformSVGPathExposed(feature);
// add to array
for (j = 0 ; j < mesh.length ; j++) {
countries.push({"data": properties, "mesh": mesh[j]});
}
}
var material= new Array();
// extrude paths and add color
for (i = 0 ; i < countries.length ; i++) {
// create material color based on average
material[i] = new THREE.MeshBasicMaterial( { color: "#FF0000" });
// var material = new THREE.MeshPhongMaterial({
color: "#FF0000"/*,
opacity:0.5*/
// extrude mesh
var shape3d = countries[i].mesh.extrude({
amount: 2,
bevelEnabled: false
});
var materialSide = new THREE.LineBasicMaterial( { color: "#000000"} );
country[i] = new THREE.Mesh(shape3d, material[i]);