Как загрузить .obj модели в объекты на three.js для мобильной производительности - PullRequest
Новая
       80

Как загрузить .obj модели в объекты на three.js для мобильной производительности

0 голосов
/ 12 июня 2018

Как правильно загрузить модели .obj с помощью objLoader и MTLLoader?Я задаю этот вопрос, потому что моя мини-игра three.js состоит из нескольких моделей obj и mtl, которые загружаются перед началом цикла анимации космических игр.Игра прекрасно воспроизводится и загружается на компьютеры, но не загружается в браузер телефонов.Более проницательно;когда вы заходите в браузер телефона, он пытается загрузить, не удается, а затем автоматически обновляется до тех пор, пока браузер не отправит сообщение об ошибке. Война между браузером рабочего стола и телефоном началась, когда я создал несколько астероидов для игры с использованием моделей obj. Вы можете просмотреть мою игру на странице "zeyeland.com/dungeon-space ".Если вы используете консоль на рабочем столе, вы можете просматривать информацию в журнале.Однако, если вы посещаете веб-сайт по телефону, возникает ошибка, указанная выше.Эта неудача загрузки поражает меня.На сайте threejs.org есть много более сложных игр, которые загружаются в браузер моего телефона.Любая помощь будет принята с благодарностью.Вот некоторый мой код, который может определить некоторые важные факторы для рендеринга мобильной поддержки

Этот набор кода загружает все мои объекты перед запуском моего основного цикла анимации 

            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;
            };

Большая часть моего объекта иЗагрузчики объектов MTL закодированы примерно так: 

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);
    });
});

Мои объекты астероидов загружены аналогично, но их количество больше.Я создал около 25 астероидов, используя цикл for и рандомизируя их положения 

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

Другие объекты включают космический корабль и планеты на заднем плане, которые сделаны с использованием геометрии сферы.Все эти объекты отображаются в мобильном браузере до добавления астероидов в игру.

1 Ответ

0 голосов
/ 12 июня 2018

Проблема в разрешении ваших текстур.Просматривая источники вашей игры, вы используете текстуры, которые смартфоны просто не могут обработать.Смотрите прикрепленный скриншот ...

Way too heavy

Я бы сказал, что вы можете пройти до 256*256 текстур без потери визуальной точности, учитываяразмер ваших моделей.

Попробуйте изменить размеры всех ваших текстур и попробуйте снова.Кроме того, убедитесь, что все они имеют степень двойки (POT), а некоторые из ваших текстур - нет.

Non POT textures

На примечании стороны:имейте в виду, что если ваша игра будет подключена к Интернету (т.е. не к локальным приложениям), пользователям придется перезагружать ее снова и снова (в зависимости от того, как они кэшируют ресурсы).По возможности следует избегать загрузки десятков мегабайт изображений каждый раз, когда вы хотите играть в игру.

...