Three.js tile使用平面几何体具有多个纹理

Cap*_*ous 4 javascript textures tile three.js

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

我已经成功地使用平面几何和高度值等设法做到了这一点.但是现在我已经到了可能需要改变一切的地步.

问题是我想要一个瓷砖有多个纹理(使用着色器因为我想要混合它们).我能够全局地做到这一点(因此每个图块将具有相同的纹理+使用一些uv映射).

但是我无法理解我将如何指定哪个图块具有哪些纹理(并且我有大约100个纹理),因为平面几何图形只有1个着色器材质.而且我也不确定通过着色器发送100个纹理是否是一个好主意?

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

有没有一种体面/高效的方式将平铺/顶点链接到纹理,所以我可以保持平面几何.

- 如果是的话:怎么样?

- 如果不是:我应该单独创建每个图块(因此是1x1的平面)并将它们合并在一起(性能/顶点混合?)因此它充当单个平面(在这种情况下,合并平面由许多1x1平面组成)和每块瓷砖使用着色器(1x1平面)?

这些事情一般如何完成?

编辑:

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

我想要的是一个瓷砖(2个面)有多个"materialIndexes"来表示.目前我需要有1个图块才能有3个纹理,所以我可以使用特定算法将它们混合在着色器中.

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

Wil*_*ilt 7

我想你必须看一下所谓的多材料对象.

THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
Run Code Online (Sandbox Code Playgroud)

如果你谷歌那些你找到几个例子.就像这个回答类似的问题.


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

var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
Run Code Online (Sandbox Code Playgroud)

如果材料是一系列材料,并且面部使用materialIndex参数来获得正确的材料

类似的问题在这里这里


编辑:

这是一个小提琴,以证明它是可能的.我使用了其中一个链接的代码.