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

发布于 2024-12-25 15:54:14 字数 493 浏览 1 评论 0原文

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

原文

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.

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

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) 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉酒的小男人 2025-01-01 15:54:14

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

让我知道这是否有帮助。

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);
}

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

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.

回复收藏 0 原文

~没有更多了~