Рисование граней над страной без перекрытия границ в тройке. js - PullRequest
Новая
       11

Рисование граней над страной без перекрытия границ в тройке. js

0 голосов
/ 17 марта 2020

Моя проблема заключается в том, что при создании граней для страны существуют грани, которые перекрывают границу.

Ниже показано изображение, когда все координаты используются при создании граней

изображение со всеми значениями (координатами)

values_axis1 содержит все координаты X [63.0613691022453, 65.1611029239906, 66.0721609548093, 68.8109022381195, 71.1822098033678 ..]

значения Yaxis2 содержит все значения Yaxis2 содержит все значения [34.37065245791981, 35.30003249470688, 38.11207931425505, 38.228254752215044 ..]

values_axis3 содержит все координаты Z 

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

изменение покупки i ++ до i = 2 мы получаем это изображение пропуска некоторых значений

Стрелка, очевидно, показывает нулевую точку, из которой нарисованы все треугольники. Ниже приведена часть кода для этого. 

object_geometry.faces.push(new THREE.Face3(DRAW_FROM_HERE, i + 1, i));

Это не проблема программирования, а скорее "есть ли алгоритм для этого".

Я мог бы проверить грани, которые сталкиваются с границей от точка ноль и пропускают их, но тогда будут дыры, которые нужно будет заполнить, рисуя из какого-то другого места. Это можно сделать вручную, но для всех стран мира потребуется много времени. Я уверен, что это можно сделать, посчитав, где находятся дыры, но я понятия не имею, как это можно сделать.

Если кто-то придет даже с очень плохой производительностью решения, это будет здорово! Я планирую поместить все результаты в файл, который затем можно было бы загрузить и нарисовать, поскольку нет необходимости выполнять эту обработку каждый раз, так как границы никогда не перемещаются.

РЕДАКТИРОВАТЬ: ShapeGeometry был предложено и было проверено. Я был неправ, когда сказал, что координаты Z не имеют значения, но, очевидно, они связаны с кривизной земного шара.

Изображение формы Геометрия. 2d, но в остальном идеально .

Вопрос отредактирован.

Редактировать: Решение

Спасибо @ Gilles-Philippe Paillé за предложение подрезание ушей. Найдена отличная библиотека https://github.com/mapbox/earcut

Вот обновленный код для тех, у кого может быть такая же проблема. 

function createVertexForEachPoint(object_geometry, values_axis1, values_axis2,
      values_axis3) {

        var values_x_y = []; // add x and y values to the same list [x,y,x,y,x,y..]
        for (var i = 0; i < values_axis1.length; i++) {
          values_x_y.push(values_axis1[i], values_axis2[i]);
        }

        // https://github.com/mapbox/earcut
        var triangles = earcut(values_x_y);
        // triangles = [37, 36, 35, 35, 34, 33, 32, 31, 30, 30, …] [a,b,c,a,b,c,a,b,c..]
        // triangles contain only the verticies that are needed
        // previously all possible faces were added which resulted in overlapping borders

        // add all points, in this case coordinates. Same as before
        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]));
        }

        // go through the list and pick the corners (a,b,c) of the triangles and add them to faces
        for (var i = 0; i < triangles.length; i += 3) {
          var point_1 = triangles[i];
          var point_2 = triangles[i+1];
          var point_3 = triangles[i+2];
          object_geometry.faces.push(new THREE.Face3(point_1, point_2, point_3));
        }
    }

Я использую geo JSON, который имеет формы 'многоугольника' и 'многоугольника'. Этот код работает для многоугольников atm, но не требует слишком много настроек для работы с мультиполигонами, поскольку библиотека поддерживает также отверстия earcut(vertices[, holes, dimensions = 2]).

изображение результата

...