threejs精灵模型_#ThreeJS学习笔记( 二)——导入外部模型

外部模型格式

Threejs支持了许多格式的3D模型导入，包括*.obj、 *.sea、*.3mf 、*.amf、*.sea、*.pmd、*.json等。

这里主要讲解一下obj模型的导入，及将obj文件转成文件更小的json格式导入。

导入obj模型

3Dmax格式转换成obj格式

美术提供的一般为3Dmax项目文件夹，里面包含了.max文件以及贴图图片等资源，用3DMAX打开.max文件可以看到3D模型

如图：

点击菜单里的导出,选择obj格式,点击保存后出现选项

导出比例：几何体选项里的输出比例，默认是1.0，我们根据模型的分辨率，以及需要在网页上呈现的分辨率设置一下比例输出即可。简单的说，你直接按1.0比例输出的如果在浏览器看的时候大小差距太大了，可以在这里导出比例设置一下，另外也可以设置mesh的scale,直接缩放。这个模型需要将比例设置为0.1。几何体的其他选项都不需要修改。

材质：点击材质导出，勾选使用材质路径，选择保存材质的路径。格式为jpg，格式设置中可以设置导出jpg的质量，无特殊要求默认即可，并勾选转换位图，关闭材质设置。

点击导出，导出过程有可能会提示找不到材质，设置材质路径为美术提供的文件夹目录即可

最后会得到一个*.obj文件、一个*mtl文件、若干材质图，包括多个不同通道的贴图jpg和法线贴图jpg

导出obj后的二次处理

导出后的文件如图所示

其中，test.mtl文件定义了test.obj模型与各贴图间的对应关系。

由于示例中的模型是由多个子模型组成的模型组，同时设置了多通道贴图，每一个子模型都对应四张贴图。

打开mtl文件，我们可以看到每个子模型都有一组贴图数据

# 3ds Max Wavefront OBJ Exporter v0.97b - (c)2007 guruware

# 创建的文件:27.07.2016 17:00:50

newmtl JZ2012_jz_l_1

Ns 20.0000

Ni 1.5000

d 1.0000

Tr 0.0000

Tf 1.0000 1.0000 1.0000

illum 2

Ka 0.5882 0.5882 0.5882

Kd 0.5882 0.5882 0.5882

Ks 0.4500 0.4500 0.4500

Ke 0.0000 0.0000 0.0000

map_Ka JZ2012_jz_d.jpg

map_Kd JZ2012_jz_d.jpg

map_Ks JZ2012_jz_s.jpg

map_Ke JZ2012_jz_e.jpg

map_bump Map__171_法线凹凸.jpg

newmtl JZ2030_jz_l_1

......

例如上面例子中关于子模型JZ2012_jz_l_1 贴图描述，其中map_Ka,map_Kd,map_Ks,map_Ke指定了各通道对应的贴图，map_bump则指定了法线贴图：

在使用threejs的mtlLoader解析mtl贴图并渲染为模型材质时，threejs仅调用map_Ka通道图片和map_bump法线贴图进行材质渲染。而基于图片数量及文件大小的控制，项目中采用的方法是让设计师将 JZ2012_jz_d.jpg、JZ2012_jz_s.jpg、JZ2012_jz_e.jpg三张图合成并调色后作为map_Ka通道贴图：

注：目前未查到threeJS 的mtl_loader是否能自动载入多通道贴图，待研究。

另外由于自动导出的法线贴图名称中带有中文，需要将mtl中map_bump和对应的法向贴图名称改成非中文命名。

在做以上图片处理时，需要同时将图片资源做压缩处理，以免资源加载时间过长。

使用mtlLoader和objLoaer加载obj模型及贴图

加载带mtl材质的obj模型，需要先定义mtl对象并加载mtl之外再加载obj模型。此时需要引用threejs两个js库

THREE.MTLLoader()函数说明：

mtlLoader.setBaseUrl()：设置材质路径

mtlLoader.setPath()：设置mtl文件所在路径

mtlLoader.load(filename,onSuccess(materials ),onProgress(xhr),onError(error))：mtl文件名、 加载成功后回调处理(参数为生成的材质库)、加载过程中回调处理(xhr对象属性可计算出已完成加载百分比)、失败回调处理

THREE.OBJLoader() 函数说明：

objLoader.setMaterials( materials )：设置obj使用的材质贴图

objLoader.setPath( options.objPath )：设置obj文件所在路径

objLoader.load( filename,onSuccess(object ),onProgress(xhr),onError(error))：obj文件名、 加载成功后回调处理(参数为生成的三维对象)、加载过程中回调处理(xhr对象属性可计算出已完成加载百分比)、失败回调处理。

在onSuccess(object ){}回调里我们可以对生成的三维对象做一些处理：对材质进行调色、设置透明度、设置贴图模式等，对设置旋转、缩放、位置摆放、自发光颜色、环境光颜色。

如果obj文件代表的三维对象是由多个子模型构成的模型组合，我们可以调用object.traverse(function(child){})来对每个子模型进行处理。

以下