How to load .obj models into objects on three.js for mobile performance

Question

How should I load .obj models with objLoader and MTLLoader properly? Im asking this question because my three.js mini game consist of a few obj and mtl models that are being loaded before starting my space games animation loop begins. The game renders and loads fine on computers but fails to load on phones browser. More percisly; when you visit on phone browser it attemps to load, fails, and then automatically refresh until browser sends error.This desktop vs phone browser war started to occur when I created multiply asteroids for the game using obj models.You can view my game at " zeyeland.com/dungeon-space ". If you console log on desktop, you can view log information. However if you visit website on phone the error stated above occurs. This failure to load amazes me. The threejs.org website has plenty of more complex games that load on my phone browser. Any help would be greatly appreciated. Here is some of my code that might determine some important factors for mobile support rendering

This set of code loads all my objects before triggering my main animate looping

            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 are coded similar to 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);
    });
});

My asteroid objects are loaded similar but are higher quantity. I created about 25 asteroid using a for loop and randomizing 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

Other objects include the spaceship and the planets in the background which are made using sphere geometry. All these objects rendered on mobile browser before the asteroids were added to the game.

Console-buche Console-buche · Accepted Answer · 2018-06-12T11:44:01

The problem comes from the resolution of your textures. Browsing through the sources of your game, you're using textures that smartphones simply cannot process. See screenshot attached...

I'd say you could go down as far as 256*256 textures without losing much visual precision, given the size of your models.

Try resizing all of your textures and try again. Also, make sure all of them are power of two (POT), as some of your textures aren't.

On a side note : keep in mind that if your game is going to be online (i.e. not local app) users will have to reload stuff again and again (depending on how they're caching the resources). Having to download tens of mbs of images every time you want to play the game should be avoided if possible.

How to load .obj models into objects on three.js for mobile performance

1 Answers