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

最新推荐文章于 2024-01-26 18:27:31 发布

原创最新推荐文章于 2024-01-26 18:27:31 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在使用Three.js时，通过解析OBJLoader加载过程中的XML文件获取模型URL，从而提取文件名作为模型名称。由于加载过程异步，此方法解决了为导入模型赋予名字的难题，但需注意不同浏览器XML格式的差异，代码适用于Firefox和Chrome。

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