如何在geoJSON中将three.js绘制成网格而不是线条，并填充颜色？
我正在用three.js制作一个地球仪，并将添加一些数据层。所有的层都将从geoJSON创建。我已经设置了它，以便使全局(第一个国家的数据文件)显示为行。它使用ThreeGeoJSON。
然而，我不想仅仅概述。我想用颜色填充这些国家。
我当前的项目可以在这里看到：http://bl.ocks.org/jhubley/321232d4ccefefcdc53218fd0adccac5
代码在这里：https://gist.github.com/jhubley/321232d4ccefefcdc53218fd0adccac5
我试图创建一个新的功能，将多边形和多多边形呈现为网格而不是线条。这一职能如下：
function drawShape(x_values, y_values, z_values, options) {
var shape_geom = new THREE.BoxGeometry();
createVertexForEachPoint(shape_geom, x_values, y_values, z_values);
var shape_material = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
var shape = new THREE.Mesh(shape_geom, shape_material);
scene.add(shape);
clearArrays();
}不幸的是，当我用它的时候什么都没有。控制台中没有错误可以帮助我理解原因。
有谁能解释我怎样才能建立这些国家来填补这些国家呢？如有任何建议或建议，将不胜感激。
回答 2
Stack Overflow用户
发布于 2016-11-10 22:29:02
正如@mlkn所说，您必须使用三角形来填充网格。
我有点乱来：
function drawLine(x_values, y_values, z_values, options) {
// container
var obj = new THREE.Object3D();
// lines
var line_geom = new THREE.Geometry();
createVertexForEachPoint(line_geom, x_values, y_values, z_values);
var line_material = new THREE.LineBasicMaterial({
color: 'yellow'
});
var line = new THREE.Line(line_geom, line_material);
obj.add(line);
// mesh
var mesh_geom = new THREE.Geometry();
createVertexForEachPoint(mesh_geom, x_values, y_values, z_values);
var mesh_material = new THREE.MeshBasicMaterial({
color: 'blue',
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(mesh_geom, mesh_material);
obj.add(mesh);
scene.add(obj);
clearArrays();
}Object3D obj正在包装线条和网格。
在这里创建了面(三角形)：
function createVertexForEachPoint(object_geometry, values_axis1, values_axis2, values_axis3) {
for (var i = 0; i < values_axis1.length; i++) {
object_geometry.vertices.push(new THREE.Vector3(values_axis1[i],
values_axis2[i], values_axis3[i]));
object_geometry.faces.push(new THREE.Face3(0, i + 1, i)); // <- add faces
}
}结果是有点混乱，我不知道是因为数据还是顶点的顺序/生成。
演示：
- https://gist.github.com/marcopompili/f5e071ce646c5cf3d600828ace734ce7
- http://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7
threeGeoJSON写得很差，没有结构，举个例子，您只需要将var scene = ...的名称更改为var myscene = ...，整个库就停止工作了，这是糟糕的设计。
此外，CPU的使用率也很高，可能是太多的抽签调用。
Stack Overflow用户
发布于 2016-11-10 21:52:27
您有一些段，它们形成一个轮廓，并将它们画成直线。但填充形状必须由三角形构造(更多关于webgl绘图模式的那里)。
因此，为了渲染填充的国家，你需要对你的一组片段进行三角剖分。有多种方法可以这样做，并且可以使用代码(例如，这个耳垂的实现)。
但是，由于您想要在地球上映射形状，接下来的问题可能是生成多边形的大小。如果你用三角剖分产生大的三角形，你把顶点转换成球面的弦，那么大的三角形就会被注意到是平坦的。这里可以使用位移映射在片段着色器或进一步的三角形细分(基于三角形的面积，例如)。
最后但并非最不重要的是:三角剖分在计算上是昂贵的，所以如果不需要动态地进行，请考虑离线几何准备。如果您需要对动态数据进行三角化:考虑使用网工完成该任务(如果项目很大，则使用超高速的非javascript服务器)。
https://stackoverflow.com/questions/40520463
复制相似问题
腾讯云开发者
