Triangulating polygons on a spherical globe

Can all polygons be filled realistically? Take a look at this Codepen. It seems that the ThreeGeoJSON plugin is only able to create outlines for polygons, not fill them. I also experimented with using Earcut for triangulation.

drawThreeGeo(data, radius, 'sphere', {color: 'yellow' // Would like to change fill color of lands, rather than outline color})

javascripthtmlcssthree.js

Answer №1

If you're looking for a more enhanced map, I recommend utilizing this resource: countries.geojson

This proposed solution involves the following steps for each shape:

  1. Embed vertices within the shape to allow bending around the globe when triangulated,
  2. Utilize https://github.com/mapbox/delaunator for constructing a triangulated mesh,
  3. As step 2 may generate triangles outside the shape, it's vital to eliminate them by inspecting each triangle and determining if it belongs to the shape or not,
  4. Apply the convertCoordinates function to bend the triangulated mesh

You can test the implementation on jsfiddle here: http://jsfiddle.net/mmalex/pg5a4132/

Please Note: Due to the high level of detail in the input, execution might be slow.

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

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

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

The overall solution is detailed below:

(Code block has been preserved as-is; no changes made)

Answer №2

To effectively differentiate each country, you must divide them into individual geometries and utilize a raycaster to determine which country the mouse hovers over, followed by adjusting its material.color. For a practical demonstration of raycasting, refer to this example, where you can find the source code at the bottom-right corner. The crucial sections in that particular scenario include:

function onDocumentMouseMove( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

function render() {
    // detecting intersections
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );
    if ( intersects.length > 0 ) {
        if ( INTERSECTED != intersects[ 0 ].object ) {
            if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
            INTERSECTED = intersects[ 0 ].object;
            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
            INTERSECTED.material.emissive.setHex( 0xff0000 );
        }
    } else {
        if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
        INTERSECTED = null;
    }
    renderer.render( scene, camera );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

Swapping out a style sheet within a intricate header

I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target ...

jqueryhtmlcssstylesheet

Tips for optimizing jQuery for use on mobile devices

My webpage functions correctly on IE, Chrome, and Firefox, as well as on my friend's Galaxy phone. The code is very simple: <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> function ...

jqueryhtmlcssajaxmobile

Enveloping an immediate search within a JavaScript throttle function

Below is a code snippet for a cloud tag (Goat1000) with an instant query. The query part should be enclosed within the throttle function from the underscore.js library to prevent server crashes. <script src="underscore-min.js"></script> &l ...

javascriptphpjquerymysqlunderscore.js

React element failing to appear on webpage

I'm having trouble loading the snippetInfo.js file in the HTML, and I can't seem to figure out why. I've searched online extensively for solutions, but none of them have worked for me. Whenever I try adding type='text/javascript' t ...

javascripthtmlreactjs

Is it possible to pass image data response from jQuery .ajax into a new AJAX call?

Currently, I am attempting to combine the ImageOptim API with the OCR.space API. Both APIs are exceptional, and I cannot recommend them highly enough! However, a challenge arises as the OCR API only accepts images under 1mb or 2600x2600 px in the free tier ...

javascriptjqueryajaximage

Tips for Designing a Custom Footer Layout for KoGrid

Is it possible to create a footer template for a koGrid that displays the sum of a column? gridOptions : { displaySelectionCheckbox: false, data: items, // selectedItems: self.selectedItems, multiSelect: false, ena ...

javascriptjqueryknockout.jsdurandalkogrid

Waiting with Protractor's browser.wait can lead to Angular timeouts

I've been working on this code snippet: browser.sleep(5000).then(function() {console.log('rotel:' + browser.rootEl)}); browser.ignoreSynchronization = true; browser.rootEl = 'div#overview'; browser.driver.switchTo( ...

javascriptangularjsseleniumselenium-webdriverprotractor

What steps are necessary to enable two-way binding in Angular using the latest controllerAs syntax and Object-Oriented Controllers?

Concerned about "scope soup" where too much functionality is added to the $scope, I am currently exploring Object-Oriented controllers, the new controllerAs syntax, and using EC5 style getter/setters in my controller. While this approach is effective, I am ...

javascriptangularjsecmascript-5

Enable Parse5's case sensitivity

Recently, I've attempted to parse Angular Templates into AST using the powerful parse5 library. It seemed like the perfect solution, until I encountered an issue - while parsing HTML, it appears that the library transforms everything to lowercase. Fo ...

javascriptangularabstract-syntax-tree

Using React Native to display an SVG path inside an SVG viewbox

I'm working on incorporating a barcode scanner viewfinder with an SVG icon to enhance its appearance. However, I am facing difficulty in making the path element within the SVG take up the full width and height of the SVG. In my React Native project, I ...

javascripthtmlcssreactjssvg

Alert from Webpack regarding a critical dependency in the view.js file of the Express library located in the node_modules directory: an expression is being used

Currently, I'm in the process of working on my inaugural full stack application (a simplistic notepad app) and while bundling webpack, I've encountered an issue that is a cause for concern: WARNING in ./node_modules/express/lib/view.js 81:13-2 ...

javascriptnode.jsmongodbexpresswebpack

The error message "Uncaught TypeError: Unable to retrieve the 'lat' property of an undefined object when serializing leaflet data using $.param()" is displayed

Being a complete novice in JavaScript, I am experimenting with posting user location and map bounds using Leaflet and an AJAX call. While my event handler stateUpdater.onLocationFound successfully logs the user coordinates and map bounds, I encounter an is ...

javascriptjqueryajaxleaflet

Encountering a broken image icon while attempting to the text alignment with an image in a React application

Working on a React app, I'm facing an issue aligning text with an image. Currently, it's showing a broken icon which makes me question if the path to the image is correct. Check out my file structure below.https://i.sstatic.net/zQ4Xd.png The ima ...

htmlreactjsimagebootstrap-4

Angular2 recursive template navigation

Is it possible to create a recursive template in Angular 2 without using ng-include? It's puzzling why this feature seems to be missing in Angular 2... HTML: <div ng-app="app" ng-controller='AppCtrl'> <script type="text/ng-templat ...

javascriptrecursionangular

Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disapp ...

javascriptjqueryhtmlcss

What is causing the lack of rendering in a React component after modifying the state?

Let me show you the compressed version of my code for a quick look const PropertiesList: FC = (estatesObject) => { const [estates, setEstates] = useState(Object.values(estatesObject)) const filterEstatesUp = () => { // sorting an arr ...

javascriptreactjs

${resource} and ${promise} are both returning undefined values

Encountering the following error: TypeError: Cannot call method 'then' of undefined while working with the code below: App.controller('MainCtrl', ['$scope', 'Main', 'MainFilter', function($scope, Main, M ...

javascriptangularjsasynchronousngresource

What could be the reason behind the failure of my inner div to successfully implement the flex-row

I'm currently trying to position two divs next to each other horizontally, and my concept was to utilize flexbox, but including the property flex-row doesn't seem to yield any results and I can't comprehend the reason behind it. How can I a ...

htmlcsstailwind-css

"Explore the endless possibilities of Prototyp JavaScript with an array of innovative new features

I recently created a collection form using Symfony, consisting of a Mainform and Subforms within it. The functionality allows me to add new Mainforms and corresponding Subforms, which is working perfectly with my current script. However, the issue I&apos ...

javascriptjquerysymfonyprototype