如何加载3D模型（odj文件和mtl文件）

模型的加载

因为，在最近的项目模块中需要加载部分“模型”。在加载模型在方面我从来的没有接触过，是通过同事告诉，慢慢摸索才完成的，其中是我遇到的问题和总结的一些的方法。

使用VUE加载3D模型的方式

				

				//下面需要加载模型的部分
						
  // vue代码部分
									
						
					
					 
				    
				    

在下项目中出现的问题

1. 项目要求：点击同的按钮，显示对应的模型。 
   

2. 数据来源：不在数据库中，是直接引入文件。
   

3. 思路：使用jquery控制模型的显示和隐藏。
   

4. 效果： 当你点击一次的时候，会显示模型。 但是，当你按照顺序从第一个按钮点击，至多个，在次点击第一个按钮的时候模型不显示。
   

5. 原因：Canvas中未能在才加在加载出来。
   

解决方法

我当时想到两种 ：

第一种就是：使用jquery中attr动态添加对应的 src和mtl 文件。

缺陷：‘当加载模型过多的时候’代码的重复性太多。

第二种就是：就是json，把数据放到对应的json文件中去。

json数据结构

[{
	"id":"A-1",
	"src":"../ntsj-meeting/tujian01.obj",
	"mtl":"../ntsj-meeting/tujian01.mtl"
},{
	"id":"A-2",
	"src":"../ntsj-meeting/tujian02.obj",
	"mtl":"../ntsj-meeting/tujian02.mtl"
},{
	"id":"A-3",
	"src":"../ntsj-meeting/tujian03.obj",
	"mtl":"../ntsj-meeting/tujian03.mtl"
}]

html代码

									

										

											A-1
										
										

											A-2
										
										

											A-3
										
										

											A-4
										
									

js代码

	var models=[];
	var modelHtml='';
	
	$.ajax({
	   url: "../js/views/model3d.json",//json文件位置
	   type: "GET",//请求方式为get
	   dataType: "json", //返回数据格式为json
	   success: function(data) {//请求成功完成后要执行的方法 
	       models=data;
	   }
	})
在点击事件中的获取对应的值来实现模型的显示  
			$('.shuxing1').on('click', function() {  
				var innerText=$(this).text().trim();
				for(var i=0;i

效果图