Mapping image onto a sphere in Three.js

Question

I\'m currently using Three.js to try and create something. I\'ve got a sphere, and I\'m trying to map the eyeball image here onto it.

The problem I have is that the res

Answer 1

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