使用three.js加载obj+mtl文件

因在项目中运用到WEBGL的技术。所以研究了一下下。three.js库看来十分强大,此处为加载带材质的obj文件

1.下载相关js    https://threejs.org/     thee.js可去官网下载最新版本

2.搭建基本的wenGL场景

3.使用three库的控件进行页面的3维旋转,three提供多种控件，在此我们使用轨迹球控件trackballControls.js

先下载trackballControls.js 然后在界面增加如下代码

//创建控件并绑定在相机上
				trackballControls = new THREE.TrackballControls(camera);
				trackballControls.rotateSpeed = 1.0;
				trackballControls.zoomSpeed = 1.0;
				trackballControls.panSpeed = 1.0;
				trackballControls.noZoom=false;
				trackballControls.noPan=false;
				trackballControls.staticMoving = true;
				trackballControls.dynamicDampingFactor = 0.3;

然后在renderScene 方法增加代码

此时我们完成的功能为

4.加载外部模型  需要引入相关js

1.DDSLoader.js   2.OBJLoader.js    3.OBJMTLLoader.js

当然最重要的主人翁是obj文件mtl材质文件以及相关贴图，3dmax诸如此类的建模软件都可导出，不过建模非我们的任务，我们只需将建模大师们给的相关材料导入页面即可，代码如下

 // model
			    var onProgress = function(xhr) {
			        if (xhr.lengthComputable) {
			            var percentComplete = xhr.loaded / xhr.total * 100;
			            var percent = document.getElementById("percent");
			            percent.innerText = Math.round(percentComplete, 2) + '% 已经加载';
			        }
			    };
			    var onError = function(xhr) {};
			    var mtlLoader = new THREE.MTLLoader();
			    mtlLoader.setPath('受电柜/');
			    mtlLoader.load('受电柜.mtl', function(materials) {
			
			        materials.preload();
			
			        var objLoader = new THREE.OBJLoader();
			        objLoader.setMaterials(materials);
			        objLoader.setPath('受电柜/');
			        objLoader.load('受电柜.obj', function(object) {
			
			            object.position.y = 0;
			            object.rotation.y = 0.5;
			            object.scale.set(0.05, 0.05, 0.05);
			            scene.add(object);
			
			        }, onProgress, onError);
			    });

此时我们的任务完毕，最终效果为

搞定,相关代码以上传至git  需要可下载，地址为：https://github.com/zhaoershuang/loadObj.git