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