How can I set headers on an outgoing THREE.TextureLoader request? - three.js

Question

I want my TextureLoader to use header authorization to load textures:
let loader = new THREE.TextureLoader();
loader.headers = { . . . }; // I want this!
let myTex = loader.load('my_authorized_url');
I want to pass custom headers into the request sent over the wire. I see the Loader#setWithCredentials() function, but I can't tell how it's used (or if that's even what I should use). Should I consider writing my own Loader?
EDIT: It looks to me like there's nowhere in the ImageLoader source where a header could be set.

Answer 1

Even though this issue is old, I'll post my workaround for this problem, maybe someone find it useful:
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);
},
);
Basically, what I did was load the resource as a common file and then turn it as an image.

Answer 2

I eventually settled on editing the prototype method on the 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
},
...
});