在 Three.js 中将图像映射到球体上答案

【问题标题】：Mapping image onto a sphere in Three.js在 Three.js 中将图像映射到球体上
【发布时间】：2014-03-07 00:00:15
【问题描述】：

我目前正在使用 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 );

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

答案的关键是image you linked to。

该图像看起来像用于球形环境映射的 MatCap 图像。可以看一个球面环境映射的例子here。

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

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

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

小提琴：http://jsfiddle.net/0upgt78k/

编辑：更新到 three.js r.130

【讨论】：

【解决方案2】：

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

【讨论】：

我认为我的纹理的一般形状可能有问题 - 我应该把空白放在哪里？空白也（我认为）不会影响图像的虹膜/瞳孔部分的失真，对吗？？
您的纹理为 512x512，因此您可能需要在其周围（在每一侧）添加尽可能多的空白空间，以便瞳孔占用更少的空间（作为纹理大小的百分比）。然后你会有更少的失真。您可能会考虑的另一个选项是更改球体的 UV 坐标，以便您的图像（原样）落在正确的位置。
抱歉，我是新手，所以我不知道要添加多少空白区域，也不知道最佳的 UV 坐标。
创建一个 2048x2048 纹理并将你的纹理放在中心。
那行不通。我只是在我的球体中得到一个包含图像的矩形。

【解决方案3】：

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

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

【讨论】：