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

最近公司项目功能里有三维建模这一需求。 数据则需要三维工程师提供给前端，前端用three.js来加载数据模型

• .obj文件是3D模型文件格式

  • 几何信息由.obj文件提供
  • 材质信息由.mtl文件定义

• .obj格式

  • 顶点

    • v -0.5 -0.5 0.1
    • v -0.5 -0.5 -0.1
    • v 0 0.5 0.1
    • v 0 0.5 -0.1
    • 0.5 -0.5 0.1
    • 0.5 -0.5 -0.1

  • 纹理坐标

    • vt 0 1
    • vt 1 1
    • vt 0.5 0

  • 顶点法线

    • vn 0 0 1
    • vn 0 0 -1

  • v1/vt1/vn1 v2/vt2/vn2 v3/vt3/vn3(索引起始于1)

    • f 1/1/1 5/2/1 3/3/1
    • f 6/2/2 2/1/2 4/3 /2

• mtl格式

  • 定义一个名为 'xxx'的材质

    • newmtl xxx

  • 材质的环境关 （ambient color）

    • Ka 0 0 0

  • 散射光 （diffuse color）用kd

    • Kd 0.784314 0.784314 0.784314

  • 镜面关 ( specular color)用 Ks

    • Ks 0 0 0

  • 折射值 可在0.001到10之间进行取值。若取值为1.0，光在通过物体的时候不发生弯曲。玻璃的折射率为1.5。

    • Ni 1

  • 反射指数 定义了反射高光度。该值越高则高光越密集，一般取值范围在0~1000。

    • Ns 400

  • 滤光透射率

    • Tf 1 1 1

  • 渐隐指数描述 参数factor表示物体融入背景的数量，取值范围为0.0~1.0，取值为1.0表示完全不透明，取值为0.0时表示完全透明。

    • d 1

  • 为漫反射指定颜色纹理文件

    • map_Kd D:\Threejs\three.js学习\1411_DiaoChan_D_512.png

    核心代码： 
    OBJ和材质文件mtl加载
    let OBJLoader = new THREE.OBJLoader(); //obj加载器
    let MTLLoader = new THREE.MTLLoader(); //材质文件加载器
    
    MTLLoader.load('xxx.mtl', function(materials) {
    	// 返回一个包含材质的对象MaterialCreator
    	console.log(materials);
    	//obj的模型会和MaterialCreator包含的材质对应起来
    	BJLoader.setMaterials(materials);
    
    	OBJLoader.load('xxx.obj', function(obj) {
    		console.log(obj);
    		scene.add(obj); //返回的组对象插入场景中
    		// 加载后操作
    		obj.children[0].scale.set(2, 2, 2); //缩放球体网格模型
    		
    		// 通过调节参数，地球表面的凹凸感更强
    		obj.children[0].material.normalScale.set(3, 3);			
    	})
    
    })