Three.js / WebGL-球形-场景可见的国家/颜色

Question

I had implemented a globe similar to this one But while trying to fetch the countries visible to the scene in Three.js when the globe is in a stationary position am stuck in a issue. I can retrieve the country color code when I mouse over / click on a specific country using readPixels and get the appropriate color code of the pixel as shown below

 var gl = renderer.context; var mx = ( mouseX + renderer.context.canvas.width/2 );//(mouseX + renderer.context.canvas.width/2) * 0.25; var my = ( -mouseY + renderer.context.canvas.height/2 );//(-mouseY + renderer.context.canvas.height/2) * 0.25; mx = Math.floor( mx ); my = Math.floor( my ); var buf = new Uint8Array( 4 ); gl.readPixels( mx, my, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf ); 

But when the globe stopped rotating then I need to get the list of user viewable countries from the scene, I tried to use Raycaster to get the mesh and scan through all the pixels and get the country code but seems to be a performance hit for us

Appreciate if someone can provide their views

Answer 1

You can render the scene to a texture (even with different shaders/uniforms). There are examples on the official site, like this: http://threejs.org/examples/webgl_rtt.html

For instance you could have a scene where the texture of the globe is country coded , and when the user clicks, you render that scene into a texture and read single pixel from that texture.

Be careful, when rendering to textures, you sometimes have to force update your textures by setting needsUpdate to true .

Hope I helped.