How I can turn a figure that is upside down?

问题

I am creating a map using a json file. of d3.js to Three.js. When shown, it is shown upside down. As I can turn him?. I'm not sure which is the best way to flip. I want to recommend it as best he could do, since I'm new to d3 and Three.js not sure what to do.

Here you can see how it looks:

http://imgur.com/IFZ8F8h

so I need: http://vignette3.wikia.nocookie.net/inciclopedia/images/b/b4/Mapamundi.png/revision/20130430135955

my code is this:

            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;

            // convert to threejs meshes
            for (i = 0 ; i < data.features.length ; i++) {
                var geoFeature = data.features[i];

                var properties = geoFeature.properties;
                var feature = path(geoFeature);

                // we 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]);

回答1:

No telling what a lot of your parameters are external to this snippet, but if you create a flip matrix at the same time as you create material e.g.

var material= new Array(); // you already have this
var flip = new THREE.Matrix4().makeScale(1,-1,1);

then apply it to shape3d just before calling new THREE.Mesh():

shape3d.applyMatrix(flip);

That should do the trick.

Also: You should be careful also here, you are using LineBasicMaterial when really you should use MeshBasicMaterial and set the sides and wireframe attributes appropriately.

来源：https://stackoverflow.com/questions/32124250/how-i-can-turn-a-figure-that-is-upside-down

标签

javascript

d3.js

three.js