javascript 在 Three.js 中将图像映射到球体上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21663923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mapping image onto a sphere in Three.js
提问by Mat Richardson
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 hereonto it.
我目前正在使用 Three.js 来尝试创建一些东西。我有一个球体，我试图将这里的眼球图像映射到它上面。
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?
希望有人能帮忙？
回答by WestLangley
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.
适合此类环境贴图的着色器是使用球体法线（的函数）作为纹理贴图的 UV 索引的着色器。
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:
编辑：如果你想使用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;
Same idea.
同样的想法。
2nd Fiddle: http://jsfiddle.net/zD2rH/183/
第二小提琴：http: //jsfiddle.net/zD2rH/183/
EDIT: updated to three.js r.74
编辑：更新为three.js r.74
回答by gaitat
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.
您拥有的纹理仅代表眼睛的可见部分，而不是整个球体。您需要在现有纹理周围添加空白，以允许不可见的球体部分。
