Quantcast
Channel: Babylon.js
Viewing all articles
Browse latest Browse all 388

Texturing/UVmapping polygons in a complex shape generated by PolygonMeshBuilder()

$
0
0

Hello!

 

I'm having trouble figuring out the how to map specific parts of a larger image to specific polygons forming a complex shape created by through the PolygonMeshBuilder. After hours of researching the problem and finding only similar answers that either don't, or I can't figure out how to, apply to my specific situation, I'm turning to asking directly for help.

 

I was given code that generates a map of the US, where each state is a separate object generated from an XML file using the PolygonMeshBuilder class. The assignment is to take a provided image displaying a map of the entire US, and have each state object pull it's specific portion of the map image to texture it.

        $.each(polys, function( index, value ) {
            var pts = $(this).find('outerBoundaryIs').find('LinearRing').
                              find('coordinates').text().replace(/,0 /g," ").replace(/,/g, " ");
                             
            var groundMat = new BABYLON.StandardMaterial("red", scene);
            groundMat.diffuseTexture = new BABYLON.Texture("usa-physical-map2.jpg", scene);
            groundMat.specularColor = new BABYLON.Color3.Black();
            
            
            var ground = new BABYLON.PolygonMeshBuilder(stName + "_" + index, 
                                                        BABYLON.Polygon.Parse(pts), scene).build();
            ground.parent = state;
            
            ground.material = groundMat;
            //ground.material = new BABYLON.StandardMaterial("red", scene);
            //ground.material.diffuseTexture = new BABYLON.Texture("usa-physical-map2.jpg", scene);
            
            var ptCoords = ground.getVerticesData(BABYLON.VertexBuffer.PositionKind); 
            console.log("ptCoords: " + ptCoords);   
            var tCoords = ground.getVerticesData(BABYLON.VertexBuffer.UVKind);
            console.log("tCoords: " + tCoords);

This is the relevant code that generates the ground of the state which is what is drawn to the scene. I've added some bits in effort to complete the task, but so far all I can achieve is displaying the whole (or as much fits on the state) map on each state. I am able to pull the coordinates of where each map cutout should be, but I cannot figure out how to take that information and actually apply it to a polygon in the object.

 

Thank you in advance for your assistance. 


Viewing all articles
Browse latest Browse all 388

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>