加载三维模型到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);
    }

 

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