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

Question

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

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

Answer 2

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

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