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

Question

我目前正在使用Three.js尝试创建一些东西。我有一个球体，我正试图将眼球图像here映射到它上面。

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

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

    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

问题答案的关键是image you linked to。

该图像看起来像是球形环境贴图中使用的MatCap图像。您可以看到球形环境映射here的示例。

此类环境贴图的相应着色器是使用球体法线的（函数）作为纹理贴图中的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

Answer 2

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

Answer 3

查看纹理贴图以将纹理映射到半球上 http://solutiondesign.com/webgl-and-three-js-texture-mapping/

Answer 4

在不更改一行代码的情况下，解决方案是使用合适的图像，大小为 1024x512 而不是 512x512：

但实际上原始的平方图像代表了一个多于半个球体：半个球体只是中心的圆，半径为 256 像素：