Tips for optimizing mobile performance by loading .obj models into objects on three.js

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.

Answer №1

The issue lies in the resolution of the textures used in your game. Upon examining the sources, it is evident that the textures you are utilizing are too advanced for smartphones to handle. Refer to the attached screenshot for clarity...

https://i.sstatic.net/Ywydl.png

It is recommended to downsize your textures to 256*256 without compromising much on visual quality, especially considering the scale of your models.

Take the time to resize all textures and ensure they are power of two (POT), as some of your current textures do not meet this requirement.

https://i.sstatic.net/V4Ku6.png

Additionally, it is important to note that for online games, users may need to repeatedly download resources (depending on caching methods). It is advisable to avoid requiring users to download large image files every time they play the game.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a more efficient method for iterating through this object?

Working with JSON and JS var data = { "countries": { "europe" : [{name: "England", abbr: "en"}, {name: "Spain", abbr: "es"}], "americas" : [{name: "United States"}], "asia" : [{name: "China"}] } }; JavaScript Loop for (k in data) { fo ...

Firebase 9 - Creating a New Document Reference

Hey everyone, I need some help converting this code to modular firebase 9: fb8: const userRef = db.collection('Users').doc(); to fb9: const userRef = doc(db, 'Users'); But when I try to do that, I keep getting this error message: Fir ...

Struggle with connecting to Firebase database

I've been grappling with errors while trying to build a list of users using Firebase's collection feature. https://i.sstatic.net/BTPMM.png I've provided the information I'm inputting below: https://i.sstatic.net/yVD0i.png This is my ...

How can I turn off warnings for angular-translation?

A series of translation related warnings are appearing in the browser console, and I am looking to suppress or disable all of these warnings to prevent them from being shown to the user. Warnings: Translation for Department doesn't exist a.(anonymous ...

What are some tips for incorporating vue.js into a basic web application?

I've been trying to incorporate vue.js into my web application, but for some reason, it's not loading and the HTML is not firing in the browser. Please take a look at the code snippet below: <!DOCTYPE html> <html> < ...

Sending information from ngRoute resolve to the controller

I am currently working on an application that utilizes ngRoute to create a Single Page Application. One of the requirements is to ensure that the view is not loaded until the data has been successfully fetched from the database. While I have managed to ach ...

The Algolia Hit Component is having difficulty functioning properly within a grid layout

I am in the process of converting my next API to an Algolia search. The Hit component is a single component that renders for each record. However, I am facing an issue with implementing a grid layout. Below is the code snippet from before (which was workin ...

What order should jquery files be included in?

Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...

Is there a way to use Node.js to automatically redirect any random string paths back to the main home page?

Is there a way to configure my basic Node.js server to use simple paths instead of query strings for user session IDs? For instance, can I make domain.com/GH34DG2 function the same as domain.com within my web app? This format seems more visually appealing ...

Error: Unable to retrieve the name property of an undefined object within a React component that is being used as a child component within another parent component

FundraiserScreen.js // Import necessary components and dependencies; // Import Fundraiser component; const Children = ({ loading, error, fundraiserData }) => { if (loading) // Show skeleton loading HTML if (!error) return <Fundraiser fundraiser={fund ...

What is the best way to link a file to index.html using feathers.js?

I am currently learning feathers and encountering a problem. I am attempting to include files similar to PHP's switch function. For instance: /src/middleware/index.js 'use strict'; const handler = require('feathers-errors/handler&ap ...

Understanding how to extract inner text and splitting it can be a challenging task for developers when working with Javascript

Exploring the following basic html code: <div id="content"> This is a test </div> I am puzzled as to why this works: $(function(){ text = 'this is a text'; word = text.split(' '); alert(word[1]) }) while this does not: ...

Encountering difficulty selecting a dropdown sub-menu using Selenium WebDriver

I'm currently working on automating a website with selenium webdriver. The issue I'm encountering is that when I try to click on a menu item, the submenu pops up (actually a misplaced dropdown, UI issue), and although I can locate the element of ...

Creating a mat-tree component in Angular Material 6.0.1: Step-by-step guide

I am encountering an issue with my material angular mat-tree based application. The code runs without errors, but the values are not displayed on the screen. I need help resolving this problem so that I can proceed with the development. Upon opening the a ...

Utilizing Web Worker threads to enhance performance in Google Maps

Currently, I am experimenting with web worker threads to retrieve directions between various pairs of locations simultaneously and save the data in a file at the end. The process worked smoothly when attempted sequentially. I am using npm live-server to sh ...

Is it possible to utilize Vue's splice method within a forEach loop in order to delete multiple elements at

I am currently working on an image grid in array form. I am trying to implement a multi-deletion functionality. When a checkbox for each image in the grid is checked, I store the selected image's index in an array called selectedImages. Upon clickin ...

Transforming every piece of TypeScript code into JavaScript on the server-side

I'm relatively new to developing Node.js applications for production. I've created an app using TypeScript for the backend of my Node.js project. Currently, in the package.json file, I have the following script section: "scripts": { ...

Interactions with the mouse while using the window.alert and window.confirm features

Currently, I have developed a custom drag method that utilizes mousedown, mouseup, and mousemove events. This method is defined as move(). $(document).on('mousedown', function() {drag = true }); $(document).on('mouseup', function() {dr ...

How can I update jQuery CSS method on resize event?

Having trouble vertically centering a div inside the body? I've come up with a jQuery function that calculates the ideal margin-top value for achieving perfect vertical alignment. Here's how it works: Obtain container height, Get child height, ...

Determine if a point within a shape on a map is contained within another shape using Leaf

I have extracted two sets of polygon coordinates from a leaflet geoJSON map. These are the parent and child coordinates: var parentCoordinates=[ [ 32.05898221582174, -28.31004731142091 ], [ 32.05898221582174, -2 ...