将图像映射到Three.js中的球体上

Question

我目前正在使用Three.js尝试创建一些东西.我有一个球,而我试图映射眼球图像这里到它.

我遇到的问题是结果如下: -

如何在不拉伸的情况下正确映射？我创建球体和映射纹理的代码如下: -

    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 );

希望有人可以帮忙吗？

Answer 1

回答问题的关键是您链接的图像.

该图像看起来像是球形环境映射中使用的MatCap图像.您可以在此处查看球形环境映射的示例.

适用于此类环境贴图的着色器是使用球体法线的(函数)作为纹理贴图的UV索引的着色器.

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

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

就这么简单.:-)

小提琴:http://jsfiddle.net/zD2rH/184/

编辑:如果你想使用MeshPhongMaterial,那么你可以通过修改球体UV来达到同样的效果:

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

同样的想法.

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

编辑:更新为three.js r.74