如何仅将部分纹理投影到面部 threejs？

Question

我想通过绘制椭圆然后将 WebGlRenderTarget 纹理映射到其表面来使用 threejs 制作门户。我有那种工作的功能，但它试图将大矩形缓冲区从渲染目标拉伸到椭圆。我想要的是将纹理以其原始尺寸投影到椭圆上，然后像这样切掉任何没有碰到椭圆的东西：

投影前：

投影后：

这怎么用threejs来完成？我研究过纹理坐标，但不明白如何使用它们，甚至在 threejs 中看到了一个可能有效的投影光 PR？

编辑：我还在门户网站上观看了塞巴斯蒂安·拉格 (Sebastian Lague) 的视频，看到他使用“屏幕 space 坐标”来执行此操作。使用这些有什么建议吗？

感谢您的帮助！

Answer 1

在此处提供代码笔：
https://codepen.io/cdeep/pen/JjyjOqY

UV 映射让我们可以指定纹理的哪些部分对应于几何体的哪些顶点。此处有更多详细信息：https://www.spiria.com/en/blog/desktop-software/understanding-uv-mapping-and-textures/

你可以遍历顶点并设置相应的UV值。

const vertices = ellipseGeometry.attributes.position.array;
for(let i = 0; i < numPoints; i++) {
  const [x, y] = [vertices[3*i], vertices[3*i + 1]];
  uvPositions.push(0.5 + x * imageHeight / ((2 * yRadius) * imageWidth));
  uvPositions.push(0.5 + y / (2 * yRadius));
}
ellipseGeometry.setAttribute("uv", new THREE.Float32BufferAttribute(uvPositions, 2 ));

UV坐标从左下角到右上角从(0, 0)增加到(1, 1)。上面的代码有效是因为椭圆在 x-y 平面上。否则，您需要获取椭圆平面中的 x,y 值。

three.js 中有关纹理映射的更多信息：
https://discoverthreejs.com/book/first-steps/textures-intro/

编辑：请注意，该演示看起来并不像门户网站。为此，您需要根据相机视图移动纹理，这不是那么简单

如何仅将部分纹理投影到面部 threejs？

How to project only part of a texture to a face threejs?

javascript

three.js

webgl