three.js - 重复纹理图集的一部分
three.js - repeating a SECTION of a texture atlas
所以在 three.js 中，我们似乎需要使用 texture.offset 和 texture.repeat 属性来提取纹理（图集）的部分以应用于不同的网格。这工作正常，但据我所知，不可能选择重复纹理的那一部分？因为重复 属性 已经被用来定义纹理子部分的 "edge"。
我使用 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);
简短的回答.. 你不能不使用自定义着色器...而且制作自定义着色器比 IMO 更痛苦。您必须通过在 UV 坐标或其他东西中编码平铺索引，使区域信息对着色器可见。
要么通过使用固定大小的图块。如果您希望纹理过滤不给您带来边缘伪影，您还必须担心填充岛屿。我之前为我不久前写的 hexmap 瓦片渲染引擎做过这个......它开始工作很繁琐但是当我这样做时，它表现得非常好......我有 4k/4k 瓦片的地图 运行 60fps 3层。
如果你想进一步现场讨论，我会在 three.js 开发人员的闲暇时间闲逛。我的昵称是 thrax。
所以在 three.js 中，我们似乎需要使用 texture.offset 和 texture.repeat 属性来提取纹理（图集）的部分以应用于不同的网格。这工作正常，但据我所知，不可能选择重复纹理的那一部分？因为重复 属性 已经被用来定义纹理子部分的 "edge"。 我使用 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);
简短的回答.. 你不能不使用自定义着色器...而且制作自定义着色器比 IMO 更痛苦。您必须通过在 UV 坐标或其他东西中编码平铺索引，使区域信息对着色器可见。 要么通过使用固定大小的图块。如果您希望纹理过滤不给您带来边缘伪影，您还必须担心填充岛屿。我之前为我不久前写的 hexmap 瓦片渲染引擎做过这个......它开始工作很繁琐但是当我这样做时，它表现得非常好......我有 4k/4k 瓦片的地图 运行 60fps 3层。
如果你想进一步现场讨论，我会在 three.js 开发人员的闲暇时间闲逛。我的昵称是 thrax。