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

【问题标题】：How to map texture image onto a part of a sphere, or how to cut out (intersect) a rectangle of a sphere's surface?如何将纹理图像映射到球体的一部分，或如何切出（相交）球体表面的矩形？
【发布时间】：2013-02-15 17:26:22
【问题描述】：

我正在使用 three.js 使用 WebGL，并且我有一个图像，我想将其投影到球体的（内）表面上。我面临的问题是如何将该映射的范围限制为水平和垂直视野。想象一下将图像从球体的中心投影到球体的矩形截面上。

我怀疑我可以通过以下两种方式中的一种来做，但我不确定如何做...

1) 根据视野角度将纹理映射到球体上。如下所示将图像直接映射到球体上进行 360x180 度环绕。是否涉及 UV 映射技巧或其他可用技术？

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

2) 切割一个球体，使其仅具有由给定角度覆盖的表面子集（即与矩形金字塔相交），或产生等效的曲面。有什么想法吗？

【问题讨论】：

标签： webgl three.js

【解决方案1】：

缩小投影的最简单方法是在片段着色器中调整 UV 坐标：

// 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，以弧度表示的完整视野对于 x 为 2pi，对于 y 为 pi。缩小场的比例因子是 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))

让我知道这是否有帮助。

【讨论】：

我理解了缩放部分。关于图像部分的翻译仍然不清楚。如何在球体上稍微置换纹理？