Question

当鼠标悬停在另一个实体上时，我的location.scene_img_url值会发生变化（s3位置）。第二次更改后，aframe因COORS错误而失败。

<a-scene>
  <a-sky ng-click="print()" src="{{location.scene_img_url}}" crossorigin="anonymous"></a-sky>
</a-scene>

Answer 1

请你自己找到这个问题。以下是我的工作方式。

而不是使用指向外部资源的内联网址（s3存储桶网址）。使用aws-sdk发出图像请求。图像将作为字节数组接收。将字节数组转换为base64并渲染。

看看我是怎么做到的：

  this.getImage = function(location, assetName) {

  var creds = {
    Bucket: 'YOURBUCKET-URL',
    Key: "RELATIVE PATH"
  }

  return new Promise(function(resolve, reject) {
    var image;
    creds.Key += location + "/" + assetName;

    s3.getObject(creds, function(err, data) {
      if (!err) {
        image = "data:image/jpeg;base64," + encode(data.Body);
        resolve(image)
      } else {
        console.log(err)
        reject(err);
      }
    });
  })
}

这是将Byte数组转换为base64的非常棒的方法：

 function encode(buffer) {
  var binary = '';
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }

  return window.btoa(binary);
}

改变A帧场景3次会破坏COORS

1 个答案: