Three.js tile使用平面几何体具有多个纹理 [英] Three.js tile which has multiple textures using plane geometry
问题描述
所以我正在尝试建立一个由瓷砖组成的基于3D的世界。
So I am trying to build a 3D based world consisting of tiles.
我已经成功地使用平面几何和高度值等来做到这一点。但是现在我已经到了可能需要改变一切的地步。
I have successfully managed to do this using the plane geometry and height values etc. But now I have come to a point where I possibly have to change everything.
问题是我想要一个瓷砖有多个纹理（使用着色器，因为我想要混合他们）。我能够全局执行此操作（因此每个图块将具有相同的纹理+使用某些uv映射）。
The problem is that I want a tile to have multiple textures (using a shader because I want to blend them). I was able to do this globally (so each tile would have same textures + using some uv mapping).
但是我无法理解我将如何指定哪个tile具有哪些纹理（我有大约100个纹理），因为平面几何只有1个着色器材质。而且我也不确定通过着色器发送100个纹理是否是一个好主意？
However I fail to understand how I would be able to specify which tile has which textures (and I have about a 100 textures), since the plane geometry has only 1 shader material. And I am also not sure if it is a good idea to send 100 textures through a shader?
所以我的问题基本归结为：
是否有一种体面/高效的方式将瓷砖/顶点链接到纹理，所以我可以保持平面几何。
Is there a decent/performant way to link the tile/vertices to the textures, so I can keep the plane geometry.
- 如果是：如何？
- 如果不是：我应该单独创建每个图块（所以a 1x1的平面并将它们以某种方式合并在一起（性能/顶点混合？）因此它充当单个平面（在这种情况下，合并平面由许多1x1平面组成）并使用每个平铺的着色器（1x1平面）？
这些事情一般如何完成？
How are these things generally done?
一些额外的信息，因为似乎我的问题不是很清楚：
我想要的是一块瓷砖（ 2面）有多个materialIndexes这样说。目前我需要有1个图块才能有3个纹理，所以我可以使用特定算法将它们混合在着色器中。
What I want is that a tile (2 faces) has multiple "materialIndexes" to say so. Currently I need to have 1 tile to have 3 textures, so I can blend them in a shader with a specific algorithm.
例如我想要一个心形（红色的心/黑色背景）作为纹理，而不是基于我想要混合的颜色/更改其他2个纹理所以我可以得到例如木心和蓝色背景。或者例如，我应该能够在正方形上均匀地混合4个纹理，每个纹理占正方形的1/4。但这里的重点不在于纹理必须做什么，而是如何为我的面孔/瓷砖指定这样的3,4或更多纹理。
For example I want to have a heart shape (red heart/black background) as texture and than based on the colors I want to blend/change the other 2 textures so I can get for example wooden heart and a blue background. Or for example I should be able to blend 4 textures evenly on the square, each take 1/4 of the square. But the point here is not what has to be done with the textures, but how that i can specify such 3, 4, or more textures for my faces/tiles.
推荐答案
我认为你必须看一下所谓的多物质对象。
I think you have to take a look at what is called a multi material object.
THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
如果你谷歌那些你找到几个例子。像关于类似问题的答案。
If you google for those you find several examples. Like this answer on a similar question.
或者查看 THREE.MeshFaceMaterial 。您可以使用它为同一几何体分配多种材质。
Or take a look at THREE.MeshFaceMaterial. You can use it to assign multiple materials for the same geometry.
var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
其中，材料是一系列材料，面部使用 materialIndex 获得指定正确材料的参数
Where materials is an array of materials and the faces use a materialIndex paramater to get appointed the right material
< a href =http://jsfiddle.net/wilt/x4ne06cx/ =nofollow noreferrer>这是一个小提琴，以证明它是可能的。我使用了其中一个链接的代码。
Here is a fiddle to demonstrate that it is possible. I used the code from one of the links.
这篇关于Three.js tile使用平面几何体具有多个纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
