Mapping image onto a sphere in Three.js

The key to the answer to your question is the image you linked to.

That image looks like a MatCap image used in spherical environment mapping. You can see an example of spherical environment mapping here.

The appropriate shader for such an environment map is one that uses (a function of) the sphere's normal as the UV index into the texture map.

vec2 uv = normalize( vNormal ).xy * 0.5 + 0.5;

vec3 color = texture2D( texture, uv ).rgb;

It's as easy as that. :-)

Fiddle: http://jsfiddle.net/zD2rH/184/


EDIT: If you want to use MeshPhongMaterial, then you can achieve the same effect by modifying the sphere UVs like so:

faceVertexUvs[ face ][ j ].x = face.vertexNormals[ j ].x * 0.5 + 0.5;
faceVertexUvs[ face ][ j ].y = face.vertexNormals[ j ].y * 0.5 + 0.5;

Same idea.

2nd Fiddle: http://jsfiddle.net/zD2rH/183/

EDIT: updated to three.js r.74

Eye Rendered on Sphere from MatCap Texture