0

我应该如何正确加载带有 objLoader 和 MTLLoader 的 .obj 模型？我问这个问题是因为我的 three.js 迷你游戏包含一些 obj 和 mtl 模型，这些模型在我的太空游戏动画循环开始之前正在加载。游戏在计算机上渲染和加载良好，但无法在手机浏览器上加载。更准确；当您在手机浏览器上访问时，它会尝试加载、失败，然后自动刷新，直到浏览器发送错误。当我使用 obj 模型为游戏创建多个小行星时，桌面与手机浏览器的战争开始发生。您可以在“查看我的游戏” zeeyeland.com/dungeon-space”。如果您在桌面上控制台登录，则可以查看日志信息。但是，如果您通过电话访问网站，则会发生上述错误。加载失败让我感到惊讶。三人组。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;
            };

我的大多数 obj 和 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);
    });
});

我的小行星物体加载相似但数量更多。我使用 for 循环创建了大约 25 个小行星并随机化它们的位置

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

其他对象包括宇宙飞船和背景中的行星，它们是使用球体几何形状制作的。在将小行星添加到游戏之前，所有这些对象都在移动浏览器上渲染。

4

1 回答 1

0

问题来自纹理的分辨率。浏览游戏的源代码，您正在使用智能手机根本无法处理的纹理。见附件截图...

太重了

考虑到模型的大小，我想说你可以在256*256不损失太多视觉精度的情况下尽可能地降低纹理。

尝试调整所有纹理的大小，然后重试。另外，确保它们都是二的幂（POT），因为你的一些纹理不是。

非 POT 纹理

附带说明：请记住，如果您的游戏要在线（即不是本地应用程序），用户将不得不一次又一次地重新加载内容（取决于他们如何缓存资源）。如果可能的话，应该避免每次玩游戏时都必须下载数十 mbs 的图像。

于 2018-06-12T11:44:01.150 回答