如何将纹理图像映射到球体的一部分，或如何切出（相交）球体表面的矩形？

我正在使用three.js使用WebGL，并且我想要将图像投影到球体的（内部）表面上。我面临的问题是如何将该映射的范围限制为水平和垂直视野。想象一下，将一个图像从一个球体的中心投影到它的一个矩形部分上。如何将纹理图像映射到球体的一部分，或如何切出（相交）球体表面的矩形？

我怀疑我可以做2种方式这一个，但我不知道如何做要么...

）网友贴图到基于视角领域的球体。将图像直接映射到球体上，如下所示，进行360x180度的包装。是否存在涉及UV映射技巧或其他一些技术？

var sphere = new THREE.Mesh( 
    new THREE.SphereGeometry(radius, 60, 40), 
    new THREE.MeshBasicMaterial( 
     { map: THREE.ImageUtils.loadTexture(filename) } 
    ) 
);

2）剁碎的球体，使得其仅具有由给定的角度覆盖（即具有矩形棱锥相交的表面的子集），或者产生一个等效的弯曲表面。有任何想法吗？

来源

2012-01-08 Rog

按比例缩小投影最简单的方法是调整UV COORDS在片段着色器：

// how large the projection should be 
uniform vec2 uScale; 
... 

// this is the color for pixels outside the mapped texture 
vec4 texColor = vec4(0.0, 0.0, 0.0, 1.0); 

vec2 scale = vec2(1.0/uScale.s, 1.0/uScale.t); 
vec2 mappedUv = vUv*scale + vec2(0.5,0.5)*(vec2(1.0,1.0)-scale); 

// if the mapped uv is inside the texture area, read from texture 
if (mappedUv.s >= 0.0 && mappedUv.s <= 1.0 && 
    mappedUv.t >= 0.0 && mappedUv.t <= 1.0) { 
    texColor = texture2D(map, mappedUv); 
}

对于THREE.SphereGeometry UV的视图以弧度为单位的全视场是2PI对于x和pi y的。缩小字段的比例因子是vec2（fovX/2pi，fovY/pi）。

您也可以在顶点着色器中进行UV缩放。其他方法是复制https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/SphereGeometry.js并更改生成的UV以匹配您的缩放因子（uv * 1/scale + 0.5 *（1-1/scale））

了解这是否有帮助。

来源

2012-02-20 15:51:38

我明白了缩放部分。它仍然不清楚图像部分的翻译..我如何取代球体上的纹理？ – 2013-04-11 08:11:53

如何将纹理图像映射到球体的一部分，或如何切出（相交）球体表面的矩形？

回答

相关问题