three.js-重复纹理图集的一部分

时间:2018-09-09 02:55:47

标签: three.js textures texture-mapping texture-atlas

因此,在three.js中,似乎我们需要使用texture.offset和texture.repeat属性提取纹理(图集)的各个部分以应用于不同的网格。效果很好,但据我所知不可能再选择重复纹理的那一部分?因为repeat属性已经用于定义纹理子部分的“边缘”。 我的使用texture.offset和texture.repeat提取纹理的一部分的代码:

var texture = atlasTexture.clone();
texture.repeat.set(section.w / atlasTexture.width, section.h / atlasTexture.height);
texture.offset.x = ((section.x) / atlasTexture.width);
texture.offset.y = 1 - (section.h / atlasTexture.height) - (section.y / atlasTexture.height);

1 个答案:

答案 0 :(得分:0)

简短的回答..您不能不使用自定义着色器...而使自定义着色器比IMO更加痛苦。您必须通过在UV坐标等中对图块索引进行编码,使区域信息对着色器可见。 要么通过使用固定大小的图块。。如果还希望纹理过滤不给您边缘伪像,您还必须担心对岛进行填充。我之前为一阵我编写的hexmap tile渲染引擎完成了此操作……这很容易进行,但是当我这样做时,它的表现确实不错。。我有4k / 4k tile的地图,运行速度为60fps, 3层。

如果您想进一步讨论它,我闲逛着闲逛的Three.js开发人员。我的昵称是Thrax。

https://join.slack.com/t/threejs/shared_invite/enQtMzYxMzczODM2OTgxLWE5OTU4OTYxZTZlODk1ZGNjODIyMDZlODM4ZmUyMzNiOWIxMmFjNTYwOTc4MjU0ZmNiODk5MzZiMGJhMTkzZWI