我怎样才能颠倒过来? [英] How I can turn a figure that is upside down?

问题描述

我正在使用json文件创建地图.d3.js到Three.js.当显示时，它显示为上下颠倒.我可以转他吗?我不确定哪种是最好的翻转方式.我想尽可能地推荐它，因为我是d3和Three.js的新手，所以不确定该怎么做.

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

所以我需要: http://vignette3.wikia.nocookie.net/inciclopedia/images/b/b4/Mapamundi.png/revision/20130430135955

我的代码是这样的:

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

推荐答案

不告诉您此代码段外部有多少参数，但是如果您在创建 material 例如

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

然后在调用 new THREE.Mesh()之前将其应用于 shape3d :

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

shape3d.applyMatrix(flip);

应该可以解决问题.

也:在此也要小心，当您实际上应该使用 MeshBasicMaterial 并设置侧面和线框属性时，您正在使用 LineBasicMaterial 适当地.

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.

这篇关于我怎样才能颠倒过来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！