Three.js在导入obj模型时自动赋予名字

在Three.js实现的Web项目中自动导入模型时需要根据文件名给导入的模型赋予名字,但由于THREE.OBJLoader().load()和你写的读入模型的for循环是异步进行的,因此难以实现,这里使用了一个讨巧的方式实现了这个需求。

笔者使用的方法是从OBJLoader读取过程中的xml文件里找到文件导入的url,然后从url中分离出文件的名字,xml文件的具体内容可以打印xhr查看。这里需要注意的是不同浏览器的xml格式可能不太相同,需要做一定的修改,下面的代码里只考虑了火狐和谷歌的浏览器。

function objLoading() {
    //加载OBJ格式的模型
    objs_list = one_model_objs["all_objs"];
    for(var obj_id in objs_list) {
        material_choosed[objs_list[obj_id]] = "None";
        obj_path = model_path + "/textured_objs/" + objs_list[obj_id] + ".obj";
        var cur_obj;
        var objLoader = new THREE.OBJLoader();
        // objLoader.load() 与 for 循环是异步进行,因此需要从url中获取当前加载对象的名称并赋值给object.name.
        objLoader.load(obj_path, function (object) {
            object.name = cur_obj;
            object.material = defautMaterial;
            object.children.forEach(function (child) {
                child.material = defautMaterial;
            });
            scene.add(object);
        },
        // 模型加载中获取obj名字
        function ( xhr ) {
            var cur_url;
            // Firefox
            if (isFF) {
                cur_url = xhr.explicitOriginalTarget.responseURL;
            }
            // Google Chrome
            else if (isChrome) {
                cur_url = xhr.currentTarget.responseURL;
            }
            cur_obj = cur_url.split("/");
            cur_obj = cur_obj[cur_obj.length - 1].split(".")[0];
        }
        );
    }
}

你可能感兴趣的:(JavaScript)