Webgl 如何将纹理图像映射到球体的一部分，或如何剪切（相交）球体的矩形'；什么是表面？

我正在使用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） 切碎一个球体，使其仅具有给定角度覆盖的曲面子集（即与矩形棱锥相交），或生成一个等效曲面。有什么想法吗？

缩小投影的最简单方法是调整片段着色器中的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);
}

//投影应该有多大
均匀向量2；
...
//这是贴图纹理外部像素的颜色
vec4 texColor=vec4（0.0,0.0,0.0,1.0）；
vec2标度=vec2（1.0/uScale.s，1.0/uScale.t）；
vec2 mappedUv=vUv*比例+vec2（0.5,0.5）*（vec2（1.0,1.0）-比例）；
//如果映射的uv位于纹理区域内，请从纹理读取
如果（mappedUv.s>=0.0&&mappedUv.s=0.0&&mappedUv.t）我理解了缩放部分。图像部分的平移仍然不清楚。如何在球体上稍微置换纹理？