Three.js 瓦片，它有多个使用平面几何的纹理答案

【问题标题】：Three.js tile which has multiple textures using plane geometryThree.js 瓦片，它有多个使用平面几何的纹理
【发布时间】：2014-11-23 02:54:30
【问题描述】：

所以我正在尝试构建一个由瓷砖组成的基于 3D 的世界。

我已经成功地使用平面几何和高度值等来做到这一点。但现在我已经到了可能不得不改变一切的地步。

问题是我希望一个图块有多个纹理（使用着色器，因为我想混合它们）。我能够在全局范围内执行此操作（因此每个图块将具有相同的纹理 + 使用一些 uv 映射）。

但是我无法理解如何指定哪个图块具有哪些纹理（我有大约 100 个纹理），因为平面几何只有 1 个着色器材质。而且我也不确定通过着色器发送 100 个纹理是否是个好主意？

所以我的问题基本上可以归结为：

是否有一种体面/高性能的方式将图块/顶点链接到纹理，以便我可以保留平面几何形状。

- 如果是：如何？

- 如果不是：我是否应该分别创建每个图块（因此是 1x1 的平面）并以某种方式将它们合并在一起（性能/顶点混合？）所以它充当单个平面（在这种情况下，合并的平面由许多 1x1 平面）并使用每个图块（1x1 平面）的着色器？

这些事情一般是怎么做的？

编辑：

一些额外的信息，因为我的问题似乎不是很清楚：

我想要的是一个瓦片（2个面）有多个“materialIndexes”这样说。目前，我需要 1 个图块才能拥有 3 个纹理，因此我可以使用特定算法将它们混合到着色器中。

例如，我想要一个心形（红心/黑色背景）作为纹理，而不是基于我想要混合/更改其他 2 个纹理的颜色，这样我就可以获得木心和蓝色背景。或者例如我应该能够在正方形上均匀混合 4 个纹理，每个纹理占正方形的 1/4。但这里的重点不是必须对纹理做什么，而是如何为我的面/瓷砖指定这样的 3、4 或更多纹理。

【问题讨论】：

【解决方案1】：

我觉得你得看看所谓的多材质对象。

THREE.SceneUtils.createMultiMaterialObject( geometry, materials );

如果你用谷歌搜索那些你会发现几个例子。喜欢this answer on a similar question。

或者看看THREE.MeshFaceMaterial。您可以使用它为同一几何体分配多种材质。

var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

materials 是一系列材料，而面使用materialIndex 参数来指定正确的材料

类似问题here 和here

Here is a fiddle 证明这是可能的。我使用了其中一个链接中的代码。

【讨论】：

我不认为他们都可以帮助我..我需要知道的是我怎么能说哪个瓷砖在一个平面上有哪些纹理让我们说 64*64 瓷砖.. 所以我只有一个着色器需要传递属性？告诉着色器哪些贴图/顶点有哪些纹理，但我不知道该怎么做，或者这是否可能......也许我需要将平面分割成许多 1x1 平面？
@CaptainObvious 我添加了一个小提琴来告诉你这是可能的。您必须使用 materialIndex 属性将材质指定给您的脸部。
您好，感谢您的努力，尽管我认为您没有正确理解我的意思。我想要的是一个瓷砖（2faces）有多个materialIndexes可以这么说。目前，我需要 1 个图块才能拥有 3 个纹理，因此我可以使用特定算法将它们混合到着色器中。例如，我想要一个心形（红心/黑色背景）作为纹理，而不是基于它的颜色，我想混合/更改其他 2 个纹理，这样我就可以获得例如木心和蓝色背景。或者例如我应该能够在正方形上均匀混合 4 个纹理，每个纹理占正方形的 1/4。
但是这里的重点不是纹理是怎么做的，而是我如何为我的面/瓷砖指定这样的 3,4,.. 任何纹理

【解决方案2】：

如果您的纹理具有相同的大小，您可以执行以下操作：

创建一个 10 倍于单个纹理大小的纹理（您可以自动执行此操作，创建一个画布，在画布上以正确的坐标绘制纹理文件，从画布获取纹理）。这允许 100 (10x10) 个纹理。
为图块分配一个 0 - 0.1 范围内的基本 uv 坐标（因为单个纹理占据全局纹理的 1/10），

【讨论】：