我目前正在创建一个 Web 配置工具来创建非常简单的建筑物。我已经设法创建了一个布局编辑器，您可以使用它通过拖放来排列建筑物的 4 面墙，然后以 3D 形式查看结果。布局编辑器是一个简单的 2D 画布，3D 的东西是用 WebGL 完成的。我从之前创建的 2D 布局和默认高度创建 3D 网格。
现在我想更进一步，提供添加门窗的功能。因此，我还想使用 2D 画布，您可以通过拖放在其上添加和移动它们（每面墙）。然后我再次想在 3D 模型上显示结果。我不需要门窗成为网格的实际部分。如果它们只是正确放置在模型上的纹理就足够了。
基本模型已经有石膏纹理。我现在想将门窗的图像放在“基础”纹理的顶部（参见图像）。在 WebGL 中实现这一目标的最佳方法是什么？我实际上不知道如何开始，因为通常的纹理概念不适用于这种情况。
这是 3D 模型的当前状态：
这就是我希望它在添加一个窗口后的样子（当然还有一个实际的窗口纹理）：
提前致谢！
没有真正“简单”的方法。只有各种方法及其权衡。
一种是使用投影纹理。
这种方法的缺点是每个额外的图像都需要一个新的着色器。换句话说，你需要一个没有投影纹理的着色器，一个用于 1 的不同着色器，但一个用于 2 的不同着色器，最终你会用完制服并达到极限。
另一种是使用贴花。贴花类似于投影纹理，不同之处在于您通过投影生成一个新模型，该模型仅由图像将接触到的那些三角形组成。然后将图像应用到该模型。这样做的好处是每个图像都变成了要绘制的单独事物，因此不需要额外的着色器。这里有一个有效的贴花示例。这是一个 three.js 示例，但您可以深入研究源代码以了解它如何适用于您自己的 WebGL 内容。
另一种方法是使用在正确位置绘制的窗口来更新立方体本身的纹理。这说起来容易做起来难，因为要将新图像应用到需要通过 UV 坐标投影的纹理。这也不需要模型的任何部分来重用纹理的任何部分，否则当您应用图像时，不相关的部分会受到影响。此示例显示了从投射光线计算 UV 坐标。同样是three.js，但您可以挖掘源代码以找出适用于您自己的WebGL的数学
当然，如果您只想在盒子的侧面放一张图片，您可以为图片制作一个平面并让用户拖动它。