Aframe 如何在帧中动态创建纹理

我正在制作一个场景，在解析json文件后从代码生成实体。 除纹理加载外，所有操作都正常

为了简化问题，我在这个小故障中重新构建了最低要求

为什么它不能在较大的项目中加载，但在较小的项目中却可以正常工作

问题似乎在于纹理尚未准备好加载，或者可能有什么东西阻止了它加载。我很困惑

我注意到有两种方法可以在帧中加载纹理。
1） 在material:src属性中使用直接路径

material="src: texture.png"

2） 在中创建资产作为img元素，并在material:src属性中引用其id标记

<a-assets>
    <img id="my-texture" src="texture.png">
  </a-assets>
material="src: #my-texture"

但这会导致纹理无法加载，并在控制台中抛出“纹理失败”

预加载纹理、将其附加到a-assets并执行加载纹理时将运行的处理程序函数的最佳方法是什么

如果您有图像路径，可以将它们馈送到

THREE.TextureLoader

对象：

// assuming this.el is the entity
var mesh = this.el.getObject3D('mesh');
var loader = new THREE.TextureLoader();
loader.load(url, 
            //onLoadCallback
            function(texture) {
              // apply the texture here
              mesh.material.map = texture
            },
            // onProgressCallback - not sure if working
            undefined,
            // onErrorCallback
            function(err) {
               console.log("error:", err)
            });

当然，您不需要立即应用纹理，您可以存储它（预加载）并在必要时使用它

---

小提琴。

太棒了！你给我的几乎每一个见解都指向了用三种方法来做这件事。也许是时候把训练轮取下来了。它很有效！！我认为我最初的问题与坏路径有关（我的图像没有放在服务器托管的文件夹中）。尽管如此，我还是更喜欢这个加载程序解决方案，因为它有可靠的成功或错误回调。@ThomasWilliams我也很难深入研究三个，但用三个来补充/解决一个框架是多么简单：）

<a-assets>
    <img id="my-texture" src="texture.png">
  </a-assets>
material="src: #my-texture"

 // Create the image assets for the scene
 let assets = document.querySelector('a-assets');
 // Create the pano textures.
 let name = 'panotex_'+pano.id;

 let texture = document.createElement('img');
 texture.setAttribute('id', name);
 texture.onload = function(){
     console.log('texture loaded');
 }
 texture.onerror = function(){
      console.log('texture failed');
 }
 let texPath = "assets/"+pano.texture;
 texture.setAttribute('src', texPath);
 assets.appendChild(texture);

// assuming this.el is the entity
var mesh = this.el.getObject3D('mesh');
var loader = new THREE.TextureLoader();
loader.load(url, 
            //onLoadCallback
            function(texture) {
              // apply the texture here
              mesh.material.map = texture
            },
            // onProgressCallback - not sure if working
            undefined,
            // onErrorCallback
            function(err) {
               console.log("error:", err)
            });