As I embark on my journey with three.js, I am encountering challenges when it comes to extruding certain 2D shapes. Currently, I am working with a GeoJSON file that includes data on all the counties in the US. Using d3.js along with a d3.geo.albersUSa() projection, I am transforming latitude and longitude coordinates into X/Y coordinates to create a THREE.Shape, which I then extrude and render. While this process works smoothly for most counties, there are specific cases where issues arise.
The problem arises when attempting to extrude some counties, resulting in the following warning sequences:
Warning, unable to triangulate polygon!
Duplicate point 653.4789181355854:204.0166729191409
Either infinite or no solutions!
Its finite solutions.
Either infinite or no solutions!
Too bad, no solutions.
I'm struggling to pinpoint the exact cause of these errors – as far as I can tell, there is nothing peculiar about the shapes causing these discrepancies. Could this be an issue with the extrusion code within three.js, or perhaps an error on my part?
For example, here are some of the missing counties:
Another observation pertains to the triangular 'hourglass' shapes missing from Texas; these seem to represent counties that were partially rendered as triangles instead of rectangles or squares.
Apologies for the length of the code provided – I have attempted to condense it as much as possible.
Setup:
/* Initializing the scene, camera, light, and background plane */
var Map = function(params) {
// Initialize parameters for map creation
};
// Code snippet for rendering
Map.prototype.renderCounties = function() {
// Fetch GeoJSON data
};