Question

我使用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）切割球体使其仅具有由给定角度覆盖的表面子集（即与矩形金字塔相交），或产生等效的曲面。有什么想法吗？

Answer 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 UVs，弧度的完整视野为x，pi为2pi，y为pi。减少字段的比例因子是vec2（fovX / 2pi，fovY / pi）。

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

Lemme知道这是否有帮助。

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

1 个答案: