Three.js Server Rendering - node.js

Question

I am trying to create a script that loads my .obj and .mtl files in three.js and then takes a screenshot of it. I'm doing this for rendering items and characters on my website. I made a function called renderItem that calls the .php page on which the item is rendered and the screenshot is taken but the only way to get it to work is by echoing the contents of the page (not really what I wanted to do).
Now I am looking at using three.js with node to render my items on the server. I've been researching different ways people have done this for days and I can get it to work using a CanvasRenderer or headless gl, but now my issue is that only loading simple boxes works with that. My .obj files and my .mtl files load but do not show up at all. I have been working on this code for over a week and I cannot find anyone else with the same issue I am having. Idk what else to do so any help would be appreciated. I will paste the code below:
var MockBrowser = require('mock-browser').mocks.MockBrowser;
var mock = new MockBrowser();
global.document = mock.getDocument();
global.window = MockBrowser.createWindow();
global.THREE = require('three');
var Canvas = require('canvas');
var gl = require("gl")(500, 500);
var OBJLoader = require('three/examples/js/loaders/OBJLoader.js');
var MTLLoader = require('three/examples/js/loaders/MTLLoader.js');
require('three/examples/js/renderers/CanvasRenderer.js');
require('three/examples/js/renderers/Projector.js');
global.XMLHttpRequest = require('xhr2').XMLHttpRequest;
var scene, camera, renderer, controls;
var express = require('express');
var app = express();
const fitCameraToObject = function ( camera, object, offset, controls ) {
offset = offset || 1.25;
const boundingBox = new THREE.Box3();
// get bounding box of object - this will be used to setup controls and camera
boundingBox.setFromObject( object );
const center = boundingBox.getCenter();
const size = boundingBox.getSize();
// get the max side of the bounding box (fits to width OR height as needed )
const maxDim = Math.max( size.x, size.y, size.z );
const fov = camera.fov * ( Math.PI / 180 );
let cameraZ = Math.abs( maxDim / 4 * Math.tan( fov * 2 ) );
cameraZ *= offset; // zoom out a little so that objects don't fill the screen
camera.position.z = cameraZ;
const minZ = boundingBox.min.z;
const cameraToFarEdge = ( minZ < 0 ) ? -minZ + cameraZ : cameraZ - minZ;
camera.far = cameraToFarEdge * 3;
camera.updateProjectionMatrix();
if ( controls ) {
// set camera to rotate around center of loaded object
controls.target = center;
// prevent camera from zooming out far enough to create far plane cutoff
controls.maxDistance = cameraToFarEdge * 2;
controls.saveState();
} else {
camera.lookAt( center )
}
}
function init() {
var manager = new THREE.LoadingManager();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, 1, 0.01, 100 );
camera.position.set(-0.25,0.86,0.76);
var canvas = new Canvas.createCanvas(500, 500);
canvas.style = {}; // dummy shim to prevent errors during render.setSize
var renderer = new THREE.CanvasRenderer({
canvas: canvas
});
renderer.setSize( 500, 500 );
// lighting
ambientLight = new THREE.AmbientLight(0xffffff,1.4);
scene.add(ambientLight);
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('texturepath');
mtlLoader.setPath('mtlpath');
mtlLoader.load('Boots.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader(manager);
objLoader.setMaterials(materials);
objLoader.setPath('objpath');
objLoader.load('Boots.obj', function(object) {
scene.add(object);
fitCameraToObject(camera, object, 7, controls);
renderer.render( scene, camera );
});
});
/*
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;*/
var animate = function () {
//requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
manager.onLoad = function () {
renderer.render( scene, camera );
console.log('Image: ' + renderer.domElement.toDataURL('image/png'));
};
}
app.get('/', function(req, res) {
res.send(req.params);
init();
});
app.listen(3000, function() {
console.log('Server started on Port 3000...');
});
I changed the paths because I don't want my website name to be shown but I can confirm that the object and mtl loads correctly. I commented out the code that makes a box but when it isn't commented it prints out a base64 code which I just paste into a website I found online and it shows me an image of the green box. The MTL/OBJ Loader part prints out a base64 code but doesn't show anything. If I need to give more info let me know but I am completely lost.