three.js使用总结（二）

.obj模型和.mtl材质文件的导入

let suidaoobj = new THREE.OBJLoader(); 
let suidaomtl = new THREE.MTLLoader();          
suidaomtl.load(url, function (materials) {   //加载材质mtl文件
 materials.preload();
        suidaoobj.setMaterials(materials);            
        suidaoobj.load(url, function (obj) {   //加载模型obj文件
                obj.position.set(-40,0,30)          //坐标
  		obj.scale.set(1, 1, 1)      //缩放
                this.scene.add(obj);
        })
})

1、根据项目需要可以给模型的obj对象添加自定义属性

obj.ID = ''         
obj.name = ''

例：

let _this = this        
_this.$http.get('SystemManage/Equipment/GetList?equipmentType=2&limit=999&page=1').then((resp) => {
          if (resp.data.code === 0) {            
                      resp.data.data.forEach(item => {              
                      if (item.EquipmentPileNum) {                                
                      		let ZM照明灯obj = new THREE.OBJLoader();                
                      		let ZM照明灯mtl = new THREE.MTLLoader();                
                     		ZM照明灯mtl.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯.mtl', function (materials) {
                                        materials.preload();                  
                                        ZM照明灯obj.setMaterials(materials);
                                        ZM照明灯obj.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯.obj', function (obj) {
                       				obj.ID = item.ID                                                                         
                       				obj.name = '照明'               
                       				obj.position.x = item.EquipmentPileNum
			                        obj.position.y = 5                      
			                        obj.position.z = 24                                        
			                        obj.scale.set(1, 1, 1)                                      
			                        _this.scene.add(obj);                  
			                })
		                 })
                       }
                       })
          }
})

可以利于我们辨别模型，比如在点击模型是进行区分

2、根据需要修改原有的.mtl中的贴图

修改对应的图片，确保路径正确即可。

3、根据前面两部份，结合起来可以做到动态读取不同状态的模型

首先我复制mtl，修改其中的贴图。
根据需要修改文件名称。这里我修改为ZM照明灯1.mtl、ZM照明灯2.mtl，然后根据读取到的item.status(比如只会取到0和1)加载对应的mtl材质文件。

let _this = this        
_this.$http.get('SystemManage/Equipment/GetList?equipmentType=2&limit=999&page=1').then((resp) => {
          if (resp.data.code === 0) {            
                      resp.data.data.forEach(item => {              
                      if (item.EquipmentPileNum) {                                
                        let ZM照明灯obj = new THREE.OBJLoader();                
                        let ZM照明灯mtl = new THREE.MTLLoader();                
                        ZM照明灯mtl.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯'+ item.status +'.mtl', function (materials) {
                                        materials.preload();                  
                                        ZM照明灯obj.setMaterials(materials);
                                        ZM照明灯obj.load('static/suidaomodel/bujian/ZM照明灯/ZM照明灯.obj', function (obj) {
                           obj.ID = item.ID                                                                         
                           obj.name = '照明'               
                           obj.position.x = item.EquipmentPileNum
                           obj.position.y = 5                      
                           obj.position.z = 24                                        
                           obj.scale.set(1, 1, 1)                                      
                           _this.scene.add(obj);                  
                   })
                   })
                       }
                       })
          }
})