So, this is a somewhat uncommon issue. However, I'm attempting to create a headless Node.js renderer for OBJ and MTL files with Three.js. I've managed to rewrite the loaders to load from local files instead of URLs (this works partly). Currently, I have OBJ rendering working and can load any OBJ I want. However, loading the MTL with the corresponding map_Kd texture is an issue. I have gotten it to the point of requesting the correct path for the map_Kd and also have it load the texture. However, converting the raw image data into something Three.js can understand is a different story. This is the code for TextureLoader.js
class TextureLoader extends Loader {
constructor( manager ) {
super( manager );
}
async load( url, onLoad, onProgress, onError ) {
console.log('Called texture loader load')
const texture = new Texture();
const loader = new ImageLoader( this.manager );
loader.setPath( this.path );
await loader.load( url, function ( image ) {
console.log('Texture loader image:', image)
texture.image = image;
texture.needsUpdate = true;
if ( onLoad !== undefined ) {
onLoad( texture );
}
}, onProgress, onError );
return texture;
}
}
I don't think this is the issue; I'm pretty sure it's the ImageLoader.js file, as this is responsible for loading the color map. Currently, I'm using Canvas and JSDOM to try and fake an HTMLCanvasElement; however, it doesn't seem to want to render it.
class ImageLoader extends Loader {
constructor(manager) {
super(manager);
}
async load(url, onLoad, onProgress, onError) {
console.log('ImageLoader Requested:', url);
const scope = this;
const imageData = new Promise((res) => {
fs.readFile(url, (err, data) => {
if (err) {
// Handle error
} else {
scope.manager.itemStart(url);
const imageBase64 = 'data:image/png;base64,' + data.toString('base64');
const dom = new JSDOM(`<!DOCTYPE html><body><img id="myimg" /></body>`);
const img = dom.window.document.getElementById('myimg');
img.onload = () => {
const canvas = Canvas.createCanvas(img.width, img.height);
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
console.log('ImageLoader Loaded:', url);
scope.manager.itemEnd(url);
onLoad(canvas); // Pass the Canvas to the callback
};
img.src = imageBase64;
}
});
})
return await imageData;
}
};
Iv confirmed that the texture has the image data im just not sure on what kind of datatype it requires
The current source is here https://github.com/NotReeceHarris/open-captcha/tree/aa37c7004526e8b0533e95c98ad3e6899352da9c
and this is the render i have managed to get working so far
So far, I have attempted to create both an HTMLImageElement type and an HTMLCanvasElementType. However, as this is Node.js, it doesn't seem to want to recognize it. I have also attempted to modify the source.js to accept base64 images; however, it still doesn't seem to work.