What is the best way to render geoJSON as a mesh instead of a line in three.js, and apply a color fill to it?

Question

What is the best way to render geoJSON as a mesh instead of a line in three.js, and apply a color fill to it?

Currently working on a three.js globe project that involves adding data layers using geoJSON. The initial layer, representing countries, is displayed as lines thanks to ThreeGeoJSON.

https://i.sstatic.net/nuBkR.png

However, I am aiming to go beyond just outlines and fill the countries with color.

You can view my ongoing project here: http://bl.ocks.org/jhubley/321232d4ccefefcdc53218fd0adccac5

The code for this project can be found here: https://gist.github.com/jhubley/321232d4ccefefcdc53218fd0adccac5

I have attempted to create a new function that would render polygons and multipolygons as meshes instead of lines. Here is the function:

    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 appears when using this function. There are no console errors to provide insight into the issue.

If anyone has suggestions on how I could successfully fill the countries, I would greatly appreciate any advice or guidance.

javascript three.js geojson

Answer 1

Answer №1

According to @mlkn, utilizing triangles is essential for filling a mesh.

I experimented with the concept:

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

The Object3D obj serves as a wrapper for both lines and meshes.

This is where faces (triangles) are generated:

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 outcome appears somewhat chaotic, possibly due to issues with the data or vertex arrangement/generation.

Check out the demo links below:

In my opinion, the threeGeoJSON code lacks structure, evidenced by minor changes causing it to stop functioning. This indicates poor design.

Furthermore, there seems to be excessive CPU usage, potentially stemming from an abundance of draw calls.

Answer 2

According to @mlkn, utilizing triangles is essential for filling a mesh.

I experimented with the concept:

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

The Object3D obj serves as a wrapper for both lines and meshes.

This is where faces (triangles) are generated:

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 outcome appears somewhat chaotic, possibly due to issues with the data or vertex arrangement/generation.

Check out the demo links below:

In my opinion, the threeGeoJSON code lacks structure, evidenced by minor changes causing it to stop functioning. This indicates poor design.

Furthermore, there seems to be excessive CPU usage, potentially stemming from an abundance of draw calls.

Answer 3

Answer №2

Creating a filled shape from segments involves outlining them and connecting them with triangles, as explained further in webgl draw modes here.

To display a filled country on a globe, you must triangulate the set of segments. There are various methods to achieve this, with pre-written code like the earcut implementation found here.

One potential challenge is the size of the resulting polygons after triangulation. If large triangles are produced and then transformed into spherical coordinates, they may appear flat. One solution could involve using displacement mapping or subdividing triangles based on their area.

It's important to note that triangulation can be resource-intensive, so if it doesn't need to be done in real-time, consider preparing geometry offline. For dynamic data, utilizing a webworker or an efficient non-JavaScript server can help optimize performance.

Answer 4

Creating a filled shape from segments involves outlining them and connecting them with triangles, as explained further in webgl draw modes here.

To display a filled country on a globe, you must triangulate the set of segments. There are various methods to achieve this, with pre-written code like the earcut implementation found here.

One potential challenge is the size of the resulting polygons after triangulation. If large triangles are produced and then transformed into spherical coordinates, they may appear flat. One solution could involve using displacement mapping or subdividing triangles based on their area.

It's important to note that triangulation can be resource-intensive, so if it doesn't need to be done in real-time, consider preparing geometry offline. For dynamic data, utilizing a webworker or an efficient non-JavaScript server can help optimize performance.

What is the best way to render geoJSON as a mesh instead of a line in three.js, and apply a color fill to it?

Answer №1

Answer №2

Similar questions

Submitting form by clicking a link on the page

The continual appearance of "No file found" persists when utilizing the $redirectRoute

javascript detect when two div elements are overlapping

Exploring the intricacies of managing nested data in a Firebase Database (web)

Create PDF and Excel files using Javascript on the client side

Creating a custom event for every reference within a Vuejs for loop

Clearing Time Field Input in Safari

Incorporate a corner box feature to bring attention to the typed.js functionality

Creating a JSON array using looping technique

Incorporate new class into preexisting modules from external library

What is the method to obtain the content height of individual pages in Android, with or without the use of JavaScript?

Mastering the Art of Mocking DOM Methods with Jest

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

Checking the efficiency of Graphql API

"JavaScript that doesn't rely on a specific browser

Numerous instances of Codemirror

Steps to implementing a function just before a form is submitted

What is the process for changing the output paper size to A4 in React Native (expo android)?

Implement Clip Function with Gradient Effect in JavaScript on Canvas

Receiving reliable information from an API in my Node server without experiencing any disruptions