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

因在项目中运用到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);
			    });

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

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

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

智能推荐

three.js加载三维模型（obj文件mtl文件）

.obj和.mtl格式详解 obj文件是3D模型文件格式。由Alias|Wavefront公司为3D建模和动画软件"Advanced Visualizer"开发的一种标准，适合用于3D软件模型之间的互导，也可以通过Maya读写。只支持模型三角面数据和材质信息，无动画功能支持；其中几何信息由.obj文件提供，材质信息由.mtl文件定义。 ...

使用vue学习three.js之加载高级几何体-加载OBJ格式模型

加载OBJ格式模型 1.demo效果 2.实现要点 2.1 OBJ模型放置路径 2.2 加载OBJ模型 3.demo代码 1.demo效果如上图，该demo通过OBJLoader加载了OBJ格式的模型，并添加了棕色材质 2.实现要点 2.1 OBJ模型放置路径 vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPath，...

Mybatis源码的下载，搭建以及阅读源码的姿势

源码下载 mybatis的源码是在github上开源的，所以直接从github上搜索下载即可。如上图，第一个就是mybatis3的源码项目，下面几个也是项目中常用的依赖项目，分页插件pagehelper，SSM项目需要引入的依赖mybatis-spring，mybatis-plus项目等。当前最新版本是v3.5.5，可以选择合适的版本下载。我本地选择的是v3.5.4版本，小版本之间没有太大差异...

spring cloud + redis RedisTemplate Api搭建简单Demo

简介 Redis是一种NoSQL数据库，即非关系型数据库。redis是一个key-value存储系统。它支持存储的value类型相对更多，包括string(字符串)、list(链表)、set(集合)、zset(sorted set --有序集合)和hash（哈希类型）。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作，而且这些操作都是原子性的。在此基础上，r...

c++在windows、linux下获取指定文件夹下所有文件名的方法

一般来说，获取指定文件夹下的所有文件名，用python是较为方便的，直接： import os files_name = os.listdir(“一个路径”) 但也有c++程序偶尔也有这个需求，下面就直接上c++在windows和linux去读取文件夹下文件名的方法，不同的系统代码上有一些差别 Windows(vs) vs的环境，主要是用到了头文件<io.h>,...

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

智能推荐

猜你喜欢