加载三维模型到THREEJS

最新推荐文章于 2025-05-31 10:41:33 发布

转载最新推荐文章于 2025-05-31 10:41:33 发布 · 531 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/cll131421/p/4468334.html

本文详细介绍如何在THREEJS中使用OBJLoader和OBJMTLLoader加载三维模型。包括加载器的基本用法，参数说明及示例代码，帮助读者快速掌握模型加载技巧。

在THREEJS中，我们要加载制作好的三维模型到THREEJS场景中，一般会用到加载器；

常用的加载器有：

OBJLoader：加载obj模型到场景中；
OBJMTLLoader：加载带mtl材质的模型取场景中；

两个类的构造函均带一个manager参数，该参数可以为空，默认为THREE.DefaultLoadingManager。

加载模型的方法如下：

OBJLoader.load ( url, onLoad, onProgress, onError )

OBJMTLLoader.load ( objUrl, mtlUrl, onLoad, onProgress, onError )

url为加载的模型路径，形如：model/test.obj，或model/test.mtl

onLoad：为模型加载完成后的回调函数，带一个Object3D类型的参数；

onProgress, onError：分别为模型加载过程中和加载出错的回调，带一个XmlHttpRequest类型的参数；不过经测试onProgress回调可能无法正常调用；

OBJLoader示例代码如下：

    //加载过程回调函数
    var onProgress = function(xhr)
    {
        console.log('console.log');
        if(xhr.lengthComputable)
        {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete,2) + '% downloaded');
        }
    };

    //加载出错回调函数
    var onError = function(xhr)
    {};    
    function LoadObjModel()
    {
        //加载模型
        var _loader = new THREE.OBJLoader();
        _loader.load('Model/male02.obj',function(obj)
        //_loader.load('Model/bh.obj',function(obj)
        //_loader.load('Model/bh_all/bh_all.obj',function(obj)
        {
            _scene.add(obj);
        },onProgress,onError);
    }

OBJMTLLoader使用示例代码如下：

    function LoadTucnChengModel()
    {
        var loader = new THREE.OBJMTLLoader(_manager);
        loader.load('Model/tc_tm/tc.obj','Model/tc_tm/tc.mtl',function(obj)
        {
            obj.traverse(function(child)
            {
            _scene.add(obj);
        },onProgress,onError);
    }

转载于:https://www.cnblogs.com/cll131421/p/4468334.html