使用Three.js制作由粒子组成的3d地球

Question

I am trying to replicate this effect: http://www.hys-inc.jp/ The only difference is that I want the particles to be positioned in such a way, that they resemble the Earth - a 'textured face' if you will.

Browsing through their code, this is what they use to set up the particles group:

var map = THREE.ImageUtils.loadTexture('/admin/wp-content/themes/hys/assets/img/particle.png');

    var m = new THREE.ParticleSystemMaterial({
      color: 0x000000,
      size: 1.5,
      map: map,
      //blending: THREE.AdditiveBlending,
      depthTest: false,
      transparent: true
    });

    var p = new THREE.ParticleSystem(g, m);
    scene.add(p);

This is all great, but how do I position them along a sphere to resemble the planet? I know how to do it in 2d rendering context, using a picture and pixels scanning to get the right coordinates for the particles' position, but I am clueless how to do it in 3d...

Any help is more then welcome

Answer 1

If you have a grid of pixels that represents color values showing the surface of the earth in 2 dimensions as particles, to project it to 3 dimensions requires a sphere projection method. You can take a look at this question for the implementation of mercator projection.

how map 2d grid points (x,y) onto sphere as 3d points (x,y,z)

There are many methods for accomplishing this with a good deal of variation. Stereographic is another common approach : http://en.wikipedia.org/wiki/List_of_map_projections