将图像以3j映射到球体上

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?

希望有人能帮忙吗?

3 个解决方案

#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.

这个图像看起来像一个在球面环境映射中使用的MatCap图像。你可以在这里看到一个球形环境映射的例子。

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/

小提琴: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:

编辑:如果你想使用网格材料，那么你可以通过修改球体UVs来达到同样的效果:

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/

第二小提琴:http://jsfiddle.net/zD2rH/183/

EDIT: updated to three.js r.74

编辑:更新为3。js r.74

#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.

你拥有的纹理只代表眼睛可见的部分而不是整个球面。您需要在现有的纹理周围添加空白，以允许不可见的部分球面。

#3

Look at texture mapping to map your texture on a half sphere http://solutiondesign.com/webgl-and-three-js-texture-mapping/

查看纹理映射，将纹理映射到半个球体http://solutiondesign.com/webgl- three-js- tex-mapping/上