如何在three.js中将geoJSON绘制为网格而不是线条，并用颜色填充? [英] How can I draw geoJSON in three.js as a mesh and not a line, and fill with color?

问题描述

我正在Three.js中创建一个地球仪，并将添加一些数据层.所有图层都将从geoJSON创建.我已经进行了设置，以使地球(第一个数据文件，属于国家)显示为线.这使用 ThreeGeoJSON .

I'm making a globe in three.js and will be adding some data layers. All of the layers will be created from geoJSON. I have set it up so that the globe (the first data file, which is of countries) shows up as lines. This uses ThreeGeoJSON.

但是，我不想仅是轮廓.我想用彩色填充这些国家.

However, I do not want just outlines. I'd like to fill the countries with color.

我当前的项目可以在这里看到: http://bl.ocks.org/jhubley/321232d4ccefefcdc53218fd0adccac5

My current project can be seen here: http://bl.ocks.org/jhubley/321232d4ccefefcdc53218fd0adccac5

代码在这里: https://gist.github.com/jhubley/321232d4ccefefcdc53218fd0adccac5

我试图创建一个新函数，将多边形和多面多边形渲染为网格而不是直线.该功能如下:

I tried to create a new function that would render the polygons and multipolygons as meshes instead of lines. That function is as follows:

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

不幸的是，当我使用它时没有任何显示.控制台中没有错误可以帮助我理解原因.

Unfortunately, nothing shows up when I use that. There are no errors in the console to help me understand why.

任何人都可以解释我如何设置这些国家，以便可以填补这些国家吗?任何建议或指示将不胜感激.

Can anyone explain how I could set up the countries so that they can be filled? Any advice or pointers would be very much appreciated.

推荐答案

正如@mlkn所说，您必须使用三角形来填充网格.

As @mlkn said you have to use triangles to fill a mesh.

我有些混乱:

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包裹了线条和网格.

The Object3D obj is wrapping both lines and meshes.

在此处创建面(三角形)

Faces (triangles) are created here:

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
    }
}

结果有点混乱，我不知道是因为数据还是顶点顺序/生成.

The result is bit of a mess, I don't know if because of the data or the vertex order/generation.

演示:

• https://gist.github.com/marcopompili/f5e071ce646c5cf3d600828ace734ce7
• http://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7

• https://gist.github.com/marcopompili/f5e071ce646c5cf3d600828ace734ce7
• http://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7

threeGeoJSON的IMO编写不佳，没有结构，例如，您只需将var scene = ...的名称更改为var myscene = ...并且整个lib停止工作，那是糟糕的设计.

That threeGeoJSON is poorly written IMO, without structure, as an example you just need to change the name of var scene = ... to var myscene = ... and the whole lib stop working, that's poor design.

此外，CPU使用率很高，可能调用调用过多.

Also there's a high amount of CPU usage, probably too many draw calls.

这篇关于如何在three.js中将geoJSON绘制为网格而不是线条，并用颜色填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！