Question

我希望我的let loader = new THREE.TextureLoader(); loader.headers = { . . . }; // I want this! let myTex = loader.load('my_authorized_url');使用标头授权来加载纹理：

ImageLoader

我想将自定义标头传递到通过网络发送的请求中。我看到了Loader#setWithCredentials()功能，但我无法说明它是如何使用的（或者甚至是我应该使用的功能）。我应该考虑编写自己的Loader吗？

编辑：它looks to me在>>> df.sort_values(by=list(df.columns),axis=0) 0 1 2 index 1 5 5 5 2 6 7 5 3 7 9 8来源中没有任何地方可以设置标头。

Answer 1

我最终决定在Loader上编辑原型方法：

Object.assign(THREE.XHRLoader.prototype, {
    load: function(a, b, c, d) {
        void 0 !== this.path && (a = this.path + a);
        var e = this
        , f = THREE.Cache.get(a);
        if (void 0 !== f)
        return e.manager.itemStart(a),
        setTimeout(function() {
            b && b(f);
            e.manager.itemEnd(a)
        }, 0),
        f;
        var g = new XMLHttpRequest;
        g.overrideMimeType("text/plain");
        g.open("GET", a, !0);
        //
        // .............. 
        // NOTE THIS LINE:
        //
        g.setRequestHeader('HEADER_KEY', 'HEADER_VALUE');
        g.addEventListener("load", function(c) {
            var f = c.target.response;
            THREE.Cache.add(a, f);
            200 === this.status ? (b && b(f),
            e.manager.itemEnd(a)) : 0 === this.status ? (console.warn("THREE.XHRLoader: HTTP Status 0 received."),
            b && b(f),
            e.manager.itemEnd(a)) : (d && d(c),
            e.manager.itemError(a))
        }, !1);
        void 0 !== c && g.addEventListener("progress", function(a) {
            c(a)
        }, !1);
        g.addEventListener("error", function(b) {
            d && d(b);
            e.manager.itemError(a)
        }, !1);
        void 0 !== this.responseType && (g.responseType = this.responseType);
        void 0 !== this.withCredentials && (g.withCredentials = this.withCredentials);
        g.send(null);
        e.manager.itemStart(a);
        return g
    },
    ...
});

Answer 2

即使这个问题很老，我还是会发布解决此问题的方法，也许有人会发现它有用：

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);
  },
);

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

如何在传出的THREE.TextureLoader请求上设置标头？

2 个答案: