因在项目中运用到WEBGL的技术。所以研究了一下下。three.js库看来十分强大,此处为加载带材质的obj文件
1.下载相关js / thee.js可去官网下载最新版本
2.搭建基本的wenGL场景
<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script><script type="text/javascript" src="js/three.js" ></script><title></title></head><style>body{margin: 0;overflow: hidden;}#percent {position: absolute;width: 200px;height: 20px;color: red;text-align: center;border: 1p;}</style><body><div id="percent"></div><div id="WebGL-output"></div><script>$(function(){//编辑代码处var scene = new THREE.Scene();//场景构建var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相机构建var renderer = new THREE.WebGLRenderer();//渲染器构建renderer.setClearColor(0xEEEEEE);renderer.setSize(window.innerWidth,window.innerHeight);renderer.shadowMapEnabled = true;//激活阴影//构建一个坐标轴var axes = new THREE.AxisHelper(20);scene.add(axes);var planeGeometry = new THREE.PlaneGeometry(40,20);//var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});//转换对光源有渲染的材质var plane = new THREE.Mesh(planeGeometry,planeMaterial);plane.rotation.x = -0.5*Math.PI;plane.position.x = 15;plane.position.y = 0;plane.position.x = 0;scene.add(plane);plane.receiveShadow = true;//添加灯光var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10,20,10);spotLight.castShadow = true;scene.add(spotLight);//渲染视图视角camera.position.x = -30;camera.position.y = 20;camera.position.z = 30;camera.lookAt(scene.position)$("#WebGL-output").append(renderer.domElement)renderScene();function renderScene(){requestAnimationFrame(renderScene);renderer.render(scene,camera);}})</script></body></html>
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诸如此类的建模软件都可导出，不过建模非我们的任务，我们只需将建模大师们给的相关材料导入页面即可，代码如下
// modelvar 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 需要可下载，地址为：/zhaoershuang/loadObj.git
