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

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

我的问题是，结果如下： -

enter image description 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);

希望有人可以提供帮助吗？

来源

2014-02-09 Mat Richardson

在回答你的问题的关键是你的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/

编辑：

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

同样的想法：如果你想使用MeshPhongMaterial，那么你可以通过修改球体的UV像这样达到同样的效果。

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

编辑：更新到three.js所r.74

Eye Rendered on Sphere from MatCap Texture

来源

2014-02-12 23:46:24 WestLangley

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

来源

2014-02-09 20:20:33 gaitat

我认为有可能是坏了我的质地一般形状 - 在那里我会放白色空间？白色空间也（我认为）不会影响图像的虹膜/瞳孔部分的扭曲，是不是？ –

您的纹理是512x512，所以您可能需要在其周围（每边）添加尽可能多的空白区域，以便瞳孔占用更少的空间（作为纹理大小的百分比）。那么你将会减少失真。您可能会考虑的另一个选项是更改球体的UV坐标，以便您的图像（原样）落在正确的位置。 – gaitat

对不起，我是新来的，所以我不知道要添加多少空白空间，也不知道UV坐标是最佳的。 –

看纹理映射到地图上的一个半球 http://solutiondesign.com/webgl-and-three-js-texture-mapping/

来源

2014-02-10 13:00:16 Troopers

本教程与球体贴图无关。 – RedYetiCo

本教程是关于纹理贴图的，可以通过外推球体上的贴图帮助开发人员 – Troopers

骑兵队：我不同意。本教程是关于使用'var meshFaceMaterial = new THREE.MeshFaceMaterial（materials）'指示的脸部映射;'在对它进行评论之前请理解材质。 – RedYetiCo

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

回答

相关问题