Mapbox GL JS on a Three.js texutre

Questions
,
1

Hi All.

I use a call to MapBox static maps api to craft a static image and apply to a mesh using THREE.TextureLoader

There are some feature in MapBox GL JS I’d like to use which mean I’m trying to figure out if I can apply the same process using MapBox GL instead .

As an example, let say my static maps url is:

var mapurl = "https://api.mapbox.com/styles/v1/user/" + mapid + "/static/" + center[0].toFixed(6) + "," + center[1].toFixed(6) + "," + zoominfo.zoom + "/1024x1024?access_token=" + mbaccesstoken;

This can be directly applied to the mesh using:

	var loader = new THREE.TextureLoader();
	scene = globalscene;
	loader.load(mapurl, 
		function(texture){
			var material = new THREE.MeshBasicMaterial({
				map: texture
			});
	  		mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(basemapXY.value,basemapXY.value,5,5), material);
			mesh.position.z = 0.068;
			scene.remove(basemap_mesh);
			scene.add(mesh);
			basemap_mesh = mesh;
			render();
		},
   	);

This gives me a nice square mesh with the map loaded onto is as a texture.

Can I do the same thing with MapBox GL JS? I’ve played with it and it required an HTML container ID to render the map. I can’t fiugre out how I can redirect this to the three mesh.

2

I’m not 100% sure I get the question. If the map consists of HTML elements, then it’s not possible to use it as a texture. However, if the map is rendered on a canvas element, you could try to create an instance of THREE.CanvasTexture and apply it to your material. Something like:

const texture = THREE.CanvasTexture( mapboxCanvas );

const material = new THREE.MeshBasicMaterial( {
    map: texture
} );
1 Like
3

That’s probably the wrong API (to embed the viewer). With the static one you directly load tiles or a snapshot of a area and deal with the images yourself (as textures).