Javascript 使用d3.js和Three.js的等高线图

我带着一个GeoJSON：

（country.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);
            }

var国家=[]；
varⅠ，j；
//转换为3JS网格
对于（i=0；i

我把所有国家的数字都放在地图上，我在上面画了一条线：

我希望轮廓线如示例所示（新的三线..）：

---

如果您有一个

三个.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中，如果形状有孔，则此操作将无法正常工作

---

three.js r.71

如果您有一个

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中，如果形状有孔，则此操作将无法正常工作

---

three.js r.71

是

EdgeHelper

你想要什么？看。@WestLangley不，我需要这个图形的轮廓（新的三行..）。如下图所示，黑色线条勾勒出每个国家的颜色。@WestLangley在我的代码中，我想知道如何添加坐标以生成每个国家的线条（新的3.Line..），每个国家是一个单独的拉伸形状吗？如果是，则

EdgeHelper

将执行您想要的操作。试试看。如果你只想在图形前面画线，那么就使用

geo=shape.createPointsGeometry（）；var线=新的三条线（地质、材料）；直线位置设定（x，y，z）将线作为拉伸网格的子对象添加。另请参见。您想要什么？看。@WestLangley不，我需要这个图形的轮廓（新的三行..）。如下图所示，黑色线条勾勒出每个国家的颜色。@WestLangley在我的代码中，我想知道如何添加坐标以生成每个国家的线条（新的3.Line..），每个国家是一个单独的拉伸形状吗？如果是，则
EdgeHelper
将执行您想要的操作。试试看。如果你只想在图形前面画线，那么就使用
geo=shape.createPointsGeometry（）；var线=新的三条线（地质、材料）；直线位置设定（x，y，z）将线作为拉伸网格的子对象添加。另见。