javascript - 使用 d3.js 和 Three.js 绘制轮廓图

Question

我携带了 GeoJSON :

(country.json -> https://github.com/johan/world.geo.json/blob/master/countries.geo.json )

在名为 data 的变量中包含全局坐标。然后我应用一个.mesh。我想将轮廓添加到国家的数字中，即添加一条新的三线，但不知道如何添加。我很困惑，因为我不怎么驱动 d3.js，然后就不知道如何了。非常感谢。

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

            // extrude paths and add color
            for (i = 0 ; i < countries.length ; i++) {

                // create material color based on average       
                var material = new THREE.MeshPhongMaterial({
                    color: "#000000", 
                    opacity:0.5
                }); 
                console.log(mesh)       
                // extrude mesh
                var shape3d = countries[i].mesh.extrude({
                    amount: 1, 
                    bevelEnabled: false
                });

                // create a mesh based on material and extruded shape
                var toAdd = new THREE.Mesh(shape3d, material);

                //set name of mesh
                toAdd.name = countries[i].data.name;

                // rotate and position the elements
                toAdd.rotation.x = Math.PI/2;
                toAdd.translateX(-490);
                toAdd.translateZ(50);
                toAdd.translateY(20);

                // add to scene
                scene.add(toAdd);
            }

我在 map 上有所有国家的数字，我放了轮廓，即在上面放了一条线: http://postimg.org/image/3v9mc2jet/

我想要轮廓线，如示例所示(新的三线..):

http://postimg.org/image/qo5bqaon7/

Answer 1

如果您有一个 THREE.Shape，并且您想要创建一个轮廓，那么要遵循的模式如下所示:

var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

var geometry = shape.createPointsGeometry();

var line = new THREE.Line( geometry, material );

line.position.set( x, y, z );

scene.add( line );

如果要渲染形状和轮廓，如果设置 renderOrder 以便最后渲染线条，效果可能会更好:

line.renderOrder = 2; // the default renderOrder for all objects is 0

在当前版本的 Three.js 中，如果形状有孔，则此功能将无法正常工作。

三.js r.71