如何在 A 帧纹理上设置各向异性过滤值？

Question

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

Answer 1

这是我为解决这个问题而创建的一个非常简单的 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

Answer 2

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

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;
    })
  }
})

如何在 A 帧纹理上设置各向异性过滤值？

How can you set anisotropy filtering value on A-Frame textures?

three.js

aframe