加载三维模型到THREEJS

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

 

posted @ 2015-04-30 11:01  夏夜_fly  阅读(13438)  评论(11编辑  收藏  举报