我想通过绘制一个椭圆然后将 WebGlRenderTarget 纹理映射到其面部来使用threejs 制作门户。我有那种功能，但它试图将大矩形缓冲区从渲染目标拉伸到椭圆。我想要的是将原始尺寸的纹理投影到椭圆上，然后像这样剪掉任何没有碰到椭圆的东西：
投影前：
投影后：
怎么用threejs做到这一点？ 我研究过纹理坐标，但不明白如何使用它们，甚至在threejs中看到了一个投影灯PR可能会起作用？
编辑：我还在门户网站上观看了 Sebastian Lague 的视频，并看到他使用“屏幕空间坐标”进行此操作。对使用这些有什么建议吗？
感谢您的帮助！
【问题讨论】：
标签： javascript three.js webgl
在此处提供了一个 codepen：
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/
编辑：请注意，该演示看起来并不像一个门户。为此，您需要根据相机视图移动纹理，这并不简单
【讨论】：