safari 不会在 A-Frame 中加载具有跨源的动态资产

Question

我正在尝试创建一个图像，将其添加到 A-Frame 的资产系统中，然后将其用作平面上的纹理。

这里有2个相关函数：

 function createImage (src, id){                              
     img = new Image();                                   
     img.src = src;                                       
     img.id = id;                                         
     img.crossOrigin = "anonymous";                       
     img.addEventListener('load', function(){             
         console.log('load: '+src);                   
     });                                                  
     img.addEventListener('error', function(){            
         console.log('error: '+src);                  
     });                                                  
     document.querySelector('a-assets').appendChild(img)  
}                                                            

function addImage (plane, id){                               
     plane.setAttribute('material', {src: id});           
}

以后再做

var pathToImage = 'https://stuff.amazonaws.com/path/to/image.jpg';
var planeEntity = document.getElementById('myplane');

createImage(pathToImage, 'myuniqueid');
addImage(planeEntity, '#myuniqueid'); //< errors fires here

错误日志不是很有用。先说

“THREE.WebGLState: -SecurityError: 操作不安全”

第二个和其他 255 个分别是 mipmap 和纹理的 2 次幂。我认为最后一个错误是因为未加载纹理而被触发的。

相关信息：

• 使用 aframe-v0.8.2
• 使用 Safari 11.1
• 图片示例为 1024x1024
• 图像示例在亚马逊网络服务 (AWS) 中
• 我使用两张图片进行测试，一张具有公共权限，另一张具有私有权限（只能访问一个域，我在此进行测试）
• 代码在 firefox 60.0.2 和 chrome 67.0.3396.87（都在 windows 中）运行良好，没有任何错误，并且在 mac 中使用相同的 chrome 版本运行良好。

没有相关信息：

• 代码在 Microsoft Edge 42.17134.1.0 中不起作用（安全错误）

好奇心：

如果像这样直接将图像添加到代码中

<img id="myuniqueid" src='https://stuff.amazonaws.com/path/to/image.jpg' crossorigin="anonymous">

它工作！但我需要动态添加图片

致敬！

Answer 1

确保您已在 AWS 中配置 CORS：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

根据所提供的信息，将您的图片放入资产中不会给您带来太多价值。可能更容易做到：

planeEl.setAttribute('material', {src: 'https://stuff.amazonaws.com/path/to/image.jpg'});