Geometry coloring is not as expected

Questions
1

I am trying to create country polygons and color them.
Successful at creating the polygons based on the border coordinates data that i have.

So now problem is with coloring this ‘INDIA’ polygon

ind
ind1366×768 204 KB

The piece of code i used for generating the above images in the scene:

var shape = new window.THREE.Shape(points);
var colorLineGeometry = new window.THREE.ShapeBufferGeometry(shape);
countryMaterial = new window.THREE.MeshBasicMaterial({ 
    color: 0x00ff00, 
    opacity: 1,
    transparent: true
});
countryMesh = new window.THREE.Mesh(colorLineGeometry, countryMaterial);

So i understood internally buffer geometry triangulates to generate faces and color them. But the triangulation is making india geometry to shape out and coloring is not happening as expected.
Please, help me to finish this task

2

Do you mind sharing your code as a fiddle? https://jsfiddle.net/gzw7u9cv/

If this is a triangulation problem, it’s necessary to debug in order to find out what’s going wrong.

3

@Mugen87 you need the working example or just the code is fine??

4

@Mugen87 i cannot provide you any working example, as this the country border coordinates data is in json format…and couldnot load my json data file into jsfiddle

5

If you have JSON data, there is no need to load them into the fiddle. You can embed them as a simple JSON object.

A live example would be indeed more helpful than just code.

6

The below code generates the coloured india map:

‘points’ passed as an arguement to THREE.Shape is the array of Vector3’s which contains the polygon boundary coordinates.

var shape = new window.THREE.Shape(points);
var colorLineGeometry = new window.THREE.ShapeBufferGeometry(shape);
countryMaterial = new window.THREE.MeshBasicMaterial({
color: 0x00ff00,
opacity: 1,
transparent: true
});
countryMesh = new window.THREE.Mesh(colorLineGeometry, countryMaterial);

And i used ShapeBufferGeometry to create the india geometry, but when i create mesh for this geometry, the material.color of the geometry is not in sync with the geometry!

7

Sorry, this is not more informative than your first post. Please share a live example or your a GitHub repo with your code.

8

Somehow it reminded me about this:

9

Yeah I tried this and used earcut to generate the faces for the country geometry. But still the coloring is similar to the above shared image. I need to color the irregular geometries e.g. india map perfectly. Please help me out. Thanks in advance

10

@Sai_Charan_Dusa Have you read my comment there: https://stackoverflow.com/questions/40520463/how-can-i-draw-geojson-in-three-js-as-a-mesh-and-not-a-line-and-fill-with-color/40538143#comment68326926_40538143

11

@prisoner849 yes i have read it. and i tried earcut on a single poygon. The above shown image with india border is a single polygon.

12

Well, you’d better somehow break it in several polygons (if possible), and process each separately.

13

@prisoner849 yeah that will make the process static…and suppose if i could make this work for ‘india’ what about other countries? That would be time consuming sir

14

It starts from the point of where from and how you obtain the data for your polygons. Is it possible to get it already splitted into separate groups of points for polygons?

15

@prisoner849 @Mugen87 Is there is any function in three.js or any implemented algorithm to convert a concave polygon into convex subpolygons. If i could convert my concave polyogon into convex sets i could fix the issue. Thanks in advance.