如何在 A-Frame 纹理上设置各向异性过滤值？答案

【问题标题】：How can you set anisotropy filtering value on A-Frame textures?如何在 A-Frame 纹理上设置各向异性过滤值？
【发布时间】：2020-04-06 12:12:57
【问题描述】：

我正在处理一个 A-Frame 项目，该项目在远处具有小纹理，使用默认的 three.js 纹理各向异性设置 1 很难看到。如何在 A-Frame 中的纹理上设置此值项目？

【问题讨论】：

标签： three.js aframe

【解决方案1】：

这是一个包含建议的事件侦听器和最大各向异性值的修订组件。

AFRAME.registerComponent('max-anisotropy', {
  dependencies: ['material', 'geometry'],
  init: function () {
    // wait until this material is ready ...
    this.el.addEventListener('materialtextureloaded', () => {
      let myMap = this.el.getObject3D('mesh').material.map;
      myMap.anisotropy = this.el.sceneEl.renderer.capabilities.getMaxAnisotropy();
      myMap.needsUpdate = true;
    })
  }
})

【讨论】：

【解决方案2】：

这是我为解决这个问题而创建的一个非常简单的 A-Frame 组件：

AFRAME.registerComponent('af', {
  dependencies: ['material', 'geometry'],
  init: function () {
    // wait until this material is ready ...
    setTimeout(() => {
      this.el.getObject3D('mesh').material.map.anisotropy = 4;
      this.el.getObject3D('mesh').material.map.needsUpdate = true;
    }, 5000);
  },
})

我在这里使用setTimeout 作弊，因为我看到了一个错误，而没有延迟实施各向异性设置更改。

更新：根据 A-Frame 文档中的这个示例，可能可以侦听“materialtextureloaded”事件：https://aframe.io/docs/1.0.0/components/visible.html#hiding-entity-until-texture-loaded

【讨论】：

您可能希望这样做：map.anisotropy = renderer.capabilities.getMaxAnisotropy();，而不是为各向异性分配硬编码值。通过这种方式，您可以检索取决于用户设备的最大各向异性值。