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

最新推荐文章于 2024-05-08 15:02:11 发布

来自深夜的反思

最新推荐文章于 2024-05-08 15:02:11 发布

阅读量3.7w

点赞数 16

分类专栏：前端文章标签： three.js webGL

本文链接：https://blog.csdn.net/qq_37642205/article/details/78980489

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

1.下载相关js https://threejs.org/ 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诸如此类的建模软件都可导出，不过建模非我们的任务，我们只需将建模大师们给的相关材料导入页面即可，代码如下

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

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