three.js - 如何在传出的 THREE.TextureLoader 请求上设置 header ？

Question

我希望我的 TextureLoader 使用 header 授权来加载纹理:

let loader = new THREE.TextureLoader();
loader.headers = { . . . };                    // I want this!
let myTex = loader.load('my_authorized_url');

我想将自定义 header 传递到通过线路发送的请求中。我看到Loader#setWithCredentials()函数，但我不知道它是如何使用的(或者这是否是我应该使用的)。我应该考虑编写自己的加载器吗？

编辑:它looks to me就像 ImageLoader 源代码中没有任何地方可以设置 header 。

Answer 1

即使这个问题很旧，我也会发布这个问题的解决方法，也许有人会觉得它有用:

const loader = new THREE.FileLoader();
loader.crossOrigin = '';
loader.mimeType = 'image/png';
loader.responseType = 'blob';
loader.requestHeader = { Authorization: 'YOUR TOKEN' };
loader.load(
  YOUR_PRIVATE_URL,
  (response) => {
    const image = new Image();
    const blobUrl = URL.createObjectURL(response);
    image.onload = function () {
      var texture = new THREE.Texture(image);
      this.setState({
        originalWidth: texture.image.width,
        originalHeight: texture.image.height,
        imageLoaded: true,
        texture,
      });
    }.bind(this);
    image.src = blobUrl;
  },
  (xhr) => {
    console.log(`${xhr.loaded / xhr.total * 100}% loaded`);
  },
  (xhr) => {
    console.log('Error happened', xhr);
  },
);

基本上，我所做的是将资源作为普通文件加载，然后将其转换为图像。