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

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

如果您自己发现此问题。以下是我的工作方式。

而不是使用指向外部资产的内联 url（s3 存储桶 url）。使用 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);
}