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 result looks like this:-

How can I get it to map properly without looking stretched? My code for creating the sphere and mapping the texture is below:-

    var geometry = new THREE.SphereGeometry(0.5,100,100);
    var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('eyeballmap.jpg',THREE.SphericalRefractionMapping) } );
    var eyeball = new THREE.Mesh( geometry, material );
    eyeball.overdraw = true;
    eyeball.castShadow = true;
    scene.add( eyeball );

Hopefully somebody can help?

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

Answer 2

The texture that you have represents only the visible part of the eye which is not the entire sphere. You need to add white space around your existing texture to allow for the part of the sphere that is not visible.