javascript - Three.js 瓦片，它具有使用平面几何的多个纹理

Question

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

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

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

但是我无法理解我如何能够指定哪个图 block 具有哪些纹理(我有大约 100 个纹理)，因为平面几何体只有 1 个着色器 Material 。而且我也不确定通过着色器发送 100 个纹理是否是个好主意？

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

是否有一种合适/高效的方式将平铺/顶点链接到纹理，以便我可以保持平面几何形状。

- 如果是:如何？

- 如果否:我是否应该单独创建每个图 block (所以一个 1x1 的平面)并以某种方式将它们合并在一起(性能/顶点混合？)以便它充当单个平面(在这种情况下，合并的平面包括许多 1x1 平面)并使用每个图 block (一个 1x1 平面)的着色器？

这些事情通常是如何完成的？

编辑:

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

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

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

Answer 1

我想你得看看什么叫多 Material 对象。

THREE.SceneUtils.createMultiMaterialObject( geometry, materials );

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

---

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

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

其中 Material 是一组 Material ，面使用 materialIndex 参数来指定正确的 Material

类似问题here和 here

---

编辑:

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