How can I properly load .obj models with objLoader and MTLLoader for my three.js mini game? I am facing an issue where the game loads fine on computers but fails to load on mobile browsers. Specifically, when accessed on a phone browser, the game attempts to load, fails, and automatically refreshes until an error message is displayed. This problem arose when I added multiple asteroids to the game using obj models. You can check out my game at "zeyeland.com/dungeon-space". Console logging on desktop reveals no errors, but the issue persists on mobile. This loading failure is quite perplexing, especially considering that more complex games on threejs.org load fine on my phone browser. Any assistance would be greatly appreciated. Here is a snippet of my code that may shed light on potential factors affecting mobile rendering:
The following code snippet loads all objects before triggering the main animation loop:
var RESOURCES_LOADED = false;
var loadingManager = new THREE.LoadingManager();
loadingManager.onProgress = function(item, loaded, total){
console.log(item, loaded, total);
};
loadingManager.onLoad = function(){
console.log("loaded all resources");
RESOURCES_LOADED = true;
};
Most of my obj and mtl object loaders follow a similar structure, like this:
function loadMesh(name, callback){
var objLoader = new THREE.OBJLoader(loadingManager);
var matLoader = new THREE.MTLLoader(loadingManager);
matLoader.load('models/space-shuttle-orbiter.mtl', function(materials){
materials.preload();
objLoader.setMaterials(materials);
objLoader.load('models/space-shuttle-orbiter.obj', function(obj){
spaceshipPlayer = obj;
collidableMeshList.push(spaceshipPlayer);
callback(obj);
});
});
Asteroid objects are loaded in a similar manner, but in higher quantities. I have created about 25 asteroids using a for loop and randomized their positions:
function makeAstroid(laneNumber,x,y){
var objLoader = new THREE.OBJLoader(loadingManager);
var matLoader = new THREE.MTLLoader(loadingManager);
this.laneNumber = laneNumber;
this.x = x;
this.y = y;
var parentThis = this;
this.thisOBJECT;
astroidArray.push(this);
this.update = function(){
if(parentThis.thisOBJECT != null && parentThis.thisOBJECT != false){
checkRockCollision(parentThis);
orbitRocks(parentThis.thisOBJECT);
}
}
matLoader.load('models/rock/rock_3.mtl', function(materials){
materials.preload();
objLoader.setMaterials(materials);
objLoader.load('models/rock/rock_3.obj', function(obj){
//newAstroid = obj;
parentThis.thisOBJECT = obj;
collidableMeshList.push(obj);
obj.scale.x = 100;
obj.scale.y = 100;
obj.scale.z = 100;
obj.position.x = parentThis.x;
obj.position.y = parentThis.y;
obj.position.z = 790;
addMesh(obj);
});
});
//we need to set the new astroids positions
Additionally, the game also includes a spaceship and planets in the background created using sphere geometry. All these objects render fine on mobile browsers before the asteroids are added to the game.