如何将纹理图像映射到球体的一部分，或者如何切出(相交)球体表面的矩形? [英] How to map texture image onto a part of a sphere, or how to cut out (intersect) a rectangle of a sphere's surface?

问题描述

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

I am working with WebGL using three.js and I have an image that I want to project onto the (inner) surface of a sphere. The problem I am facing is how to limit the extent of that mapping to a horizontal and vertical field of view. Imagine projecting an image from the centre of a sphere onto a rectangular section of it.

我怀疑我可以通过 2 种方式之一执行此操作，但我不确定如何做...

I suspect I can do this one of 2 ways, but am unsure about how to do either...

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

1) Map the texture onto the sphere based on the field of view angles. Mapping the image straight onto the sphere as below does a 360x180 degree wrap. Is there a UV mapping trick involved, or some other technique available?

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

2) 切碎一个球体，使其仅具有给定角度覆盖的表面子集(即与矩形棱锥相交)，或产生等效的曲面.有什么想法吗?

2) Chop up a sphere so that it only has the subset of the surface covered by the angles given (ie intersecting with a rectangular pyramid), or producing an equivalent curved surface. Any ideas?

推荐答案

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

The easiest way to scale down the projection is to tweak the UV coords in the fragment shader:

// 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).

For THREE.SphereGeometry UVs the full field of view in radians is 2pi for x and pi for y. The scale factor for a reduced field is 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))

You can also do the UV scaling in the vertex shader. Other ways are to copypaste https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/SphereGeometry.js and change the generated UVs to match your scaling factors (uv*1/scale + 0.5*(1-1/scale))

让我知道这是否有帮助.

Lemme know if this helps.

这篇关于如何将纹理图像映射到球体的一部分，或者如何切出(相交)球体表面的矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！