【问题标题】:three.js - repeating a SECTION of a texture atlasthree.js - 重复纹理图集的一部分
【发布时间】:2023-03-11 04:07:01
【问题描述】:

所以在three.js 中,我们似乎需要使用texture.offset 和texture.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);

【问题讨论】:

  • 查看example 了解如何使用纹理 altas。

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


【解决方案1】:

简短的回答......你不能不使用自定义着色器......并且制作自定义着色器比 IMO 更痛苦。您必须通过在 UV 坐标中编码平铺索引或其他方式,使区域信息对着色器可见。 要么使用固定大小的图块。如果您希望纹理过滤不给您边缘伪影,您还必须担心填充岛屿。我之前已经为我不久前写的一个 hexmap 平铺渲染引擎做过这个......而且它开始工作很繁琐,但是当我这样做时,它表现得非常好......我有 4k/4k 平铺的地图以 60fps 的速度运行3 层。

如果您想进一步现场讨论,我会在这三个.js 开发人员的闲散中闲逛。我的昵称是 thrax。

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

【讨论】:

  • 该死的。我希望几何UV设置+纹理贴图偏移/重复的某种组合可以使这项工作。自定义着色器的唯一问题是我仍然想使用标准材质的所有其他重要方面(法线贴图、照明等)。也许有一种方法可以“扩展”标准材质着色器?而不是从头开始。
猜你喜欢
  • 2014-04-15
  • 1970-01-01
  • 2019-04-16
  • 1970-01-01
  • 1970-01-01
  • 2017-08-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多