模型文件加载

实际开发中，大多数项目，通常是3D美术设计师或建筑、机械等行业工程师提供的由3dmx、blender、substence、Solidworks等软件创建好的三维模型文件。

本章节第一小节以Threejs引擎自身为例，讲解Threejs模型导入导出，对Threejs模型文件本身进行了讲解，让你明白你加载的三维模型文件里面都是包含什么内容。

通过Three.js模型数据导入导出过程的学习，可以让你对Threejs解析加载外部模型的过程更为了解。

Threejs导出模型信息

你可以通过下面代码导出模型的各类信息，然后在浏览器控制台打印出来模型数据，然后复制浏览器控制台模型数据粘贴到json文件中，最后可以尝试加载解析这些Threejs导出的json文件。之所以这么做，是为了让你理解其它三维软件，比如3dmax、blender软件导出的三维模型文件本质上是什么。

查看Threejs文档Geometry、Material、Light、Object3D等类，你可以发现这些类都提供了一个方

法 .toJSON() 通过这个方法可以导出Threejs三维模型的各类数据，该方法的功能就是把Threejs的几何体、材质、光源等对象转化为JSON格式导出。

导出几何体信息。

var geometry = new THREE.BoxGeometry(100, 100, 100);// 控制台查看立方体数据console.log(geometry);// 控制台查看geometry.toJSON()结果console.log(geometry.toJSON());// JSON对象转化为字符串console.log(JSON.stringify(geometry.toJSON()));// JSON.stringify()方法内部会自动调用参数的toJSON()方法console.log(JSON.stringify(geometry));

导出材质信息。

var material = new THREE.MeshLambertMaterial({color: 0x0000ff,}); //材质对象Materialconsole.log(material);console.log(material.toJSON());console.log(JSON.stringify(material));

导出场景scene信息。

var mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中console.log(scene);console.log(scene.toJSON());

加载Three.js导出的模型数据

缓冲几何体数据加载器。

/****/var loader = new THREE.BufferGeometryLoader();loader.load('bufferGeometry.json',function (geometry) {// 控制台查看加载放回的threejs对象结构console.log(geometry);var material = new THREE.MeshLambertMaterial({color: 0x0000ff,}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中})

网格模型Mesh加载，包含几何体Geometry和材质Material

var loader = new THREE.ObjectLoader();loader.load('model.json',function (obj) {console.log(obj);console.log(obj.type);obj.scale.set(100,100,100)scene.add(obj)})

加载组Group对象，模型对象构成的树结构

loader.load('group.json', function(obj) {console.log(obj);console.log(obj.type);scene.add(obj)})

加载场景对象，场景对象不仅包含模型，还包括光源对象

loader.load('scene.json',function (obj) {console.log(obj);console.log(obj.type);obj.scale.set(100,100,100)scene.add(obj)})

.stl格式模型加载

基本所有的三维软件都支持导出 .stl 格式的三维模型文件， .stl 格式的三维模型不包含材质Material 信息，只包含几何体顶点数据的信息，你可以简单地把stl文件理解为几何体对象Geometry，本节课素 材 box.STL 是一个立方体， 你可以用记事本或代码编辑器打开文件 box.STL 查看stl的数据结构。

stl文件数据结构

.stl 文件格式的数据结构，对于大多数普通开发者来说，如果仅仅为了加载显示一个三维模型，也没 必要掌握，这里之所以要强调，不是为了让你记住，而是为了从底层了解Threejs模型加载的原理，达到 举一反三的目的 三个位置坐标和一个三角形面的法线方向向量是一组数据，这一组数据表示一个三角形面的信息 表示一个三角形面信息的一组数据

//三角面1facet normal 0 0 -1 //三角形面法向量outer loopvertex 50 50 -50 //顶点位置vertex 50 -50 -50 //顶点位置vertex -50 50 -50 //顶点位置endloopendfacet

一个立方体有6个矩形平面，每个矩形平面至少需要两个三角形拼接而成。那么立方体6个矩形平面至少 需要12个三角形面构成,你可以查看文件 box.STL 中的12个三角形信息。

solid box //文件名字//三角面1facet normal 0 0 -1 //三角形面法向量outer loopvertex 50 50 -50 //顶点位置vertex 50 -50 -50 //顶点位置vertex -50 50 -50 //顶点位置endloopendfacet//三角面2facet normal 0 0 -1 //三角形面法向量outer loopvertex -50 50 -50 //顶点位置vertex 50 -50 -50 //顶点位置vertex -50 -50 -50 //顶点位置endloopendfacetfacet normal 0 1 0..........//三角面12facet normal -1 0 0outer loopvertex -50 -50 -50vertex -50 50 50vertex -50 50 -50endloopendfacetendsolid

通过STLLoader.js 加载.stl文件

如果你想通过Threejs加载.stl格式三维模型文件，可以使用Threejs提供的一个扩展库stl加载器 STLLoader.js ，你可以在Three.js-master包中找到 STLLoader.js 文件,具体路径是 three.jsmaster\examples\js\loaders.

.html文件中引入Threejs的扩展库 STLLoader.js ,引入该文件后，就可以在代码中使用构造函数 THREE.STLLoader() 实例化一个加载器。

<!--引入STLLoader.js文件--><script src="STLLoader.js"></script>

通过构造函数 THREE.STLLoader() 可以把 .stl 文件中几何体顶点信息提取出来转化为Three.js自身格 式的几何体对象 BufferGeometry 。如果你有兴趣可以阅读 STLLoader.js 源码，尤其是你想独立开发 自己公司特定格式加载器的情况下，更有必要参照学习。

/*** stl数据加载*/var loader = new THREE.STLLoader();// 立方体默认尺寸长宽高各200loader.load('立方体.stl',function (geometry) {var material = new THREE.MeshLambertMaterial({color: 0x0000ff,}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中})

加载.obj模型文件

使用三维软件导出 .obj 模型文件的时候，会同时导出一个材质文件 .mtl ， .obj 和 .stl 文件包含的 信息一样都是几何体顶点相关数据，材质文件 .mtl 包含的是模型的材质信息，比如颜色、贴图路径 等。

加载 .obj 三维模型的时候，可以只加载 .obj 文件，然后借助three.js引擎自定义材质Material，也可以 同时加载 .obj 和 .mtl 文件。

只加载obj文件

只加载obj文件，引入路径 three.js-master/examples/js/loaders/OBJLoader.js 下的 OBJLoader.js 文件即可。

<!-- 引入obj模型加载库OBJLoader.js --><script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>

文件加载

/*** OBJ文件加载 只加载obj文件中的几何信息，不加载材质文件.mtl*/var loader = new THREE.OBJLoader();// 没有材质文件，系统自动设置Phong网格材质loader.load('./立方体/box.obj',function (obj) {// 控制台查看返回结构：包含一个网格模型Mesh的组Groupconsole.log(obj);// 查看加载器生成的材质对象：MeshPhongMaterialconsole.log(obj.children[0].material);scene.add(obj);})

加载文件返回的对象插入场景中后，你也可以做一些自定的设置，比如缩放、居中等操作。

// 加载后的一些编辑操作obj.children[0].scale.set(20,20,20);//网格模型缩放obj.children[0].geometry.center();//网格模型的几何体居中obj.children[0].material.color.set(0xff0000);//设置材质颜色

同时加载obj文件和mtl文件

mtl 文件包含了模型的材质信息，比如模型颜色、透明度等信息，还有纹理贴图的路径，比如颜色贴 图、法线贴图、高光贴图等等。

<!-- 引入obj模型加载库OBJLoader.js --><script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script><!-- 引入obj模型材质加载库MTLLoader.js --><script src="../../three.js-master/examples/js/loaders/MTLLoader.js"></script>/*** OBJ和材质文件mtl加载*/var OBJLoader = new THREE.OBJLoader();//obj加载器var MTLLoader = new THREE.MTLLoader();//材质文件加载器MTLLoader.load('./立方体/box.mtl', function(materials) {// 返回一个包含材质的对象MaterialCreatorconsole.log(materials);//obj的模型会和MaterialCreator包含的材质对应起来OBJLoader.setMaterials(materials);OBJLoader.load('./立方体/box.obj', function(obj) {console.log(obj);obj.scale.set(10, 10, 10); //放大obj组对象scene.add(obj);//返回的组对象插入场景中})})

模型纹理贴图

obj模型的mtl文件可能包含纹理贴图，也可能不包含，这主要看3D美术是否设置。 一个包含纹理贴图路径的 .mtl 文件,如果路径有问题，可能会无法加载，可以仿照该案例修改。

// 一个包含纹理贴图路径的.mtl文件newmtl material_1Ns 32d 1Tr 0Tf 1 1 1illum 2Ka 0.5880 0.5880 0.5880Kd 0.9880 0.9880 0.9880Ks 0.1200 0.1200 0.1200map_Kd ./贴图/Earth.pngmap_ks ./贴图/EarthSpec.pngnorm ./贴图/EarthNormal.png

mtl和threejs贴图对应关系

.obj 文件不包含信息

.obj 文件不包含场景的相机Camera、光源Light等信息，不能导出骨骼动画、变形动画，如果希望导出光照信息、相机信息、骨骼动画信息、变形动画信息，可以选择 .fbx 、 .gltf 等格式。

加载FBX并解析骨骼动画

通过Threejs先加载一个.FBX格式的三维模型文件，然后解析该文件中的骨骼动画信息。

加载器FBXLoader.js

引入FBX加载器相关文件

<!-- 引入fbx模型加载库FBXLoader --><script src="../js/loaders/FBXLoader.js"></script><!-- 辅助文件 --><script src="../examples/js/libs/inflate.min.js"></script>

加载fbx模型文件

加载模型文件，加载完成后，如果模型显示位置不符合要求，可以让3D美术修改，也可以通过Threejs 程序进行平移、缩放等操作。

var loader = new THREE.FBXLoader();//创建一个FBX加载器loader.load("SambaDancing.fbx", function(obj) {// console.log(obj);//查看加载后返回的模型对象scene.add(obj)// 适当平移fbx模型位置obj.translateY(-80);})

查看FBX模型帧动画数据

stl、obj都是静态模型，不可以包含动画，fbx除了包含几何、材质信息，可以存储骨骼动画等数据。

解析之前可以先在浏览器控制台查看动画相关的数据是如何存储的。你可以看到 obj.animations 属性的数组包含两个剪辑对象AnimationClip， obj.animations[0] 对应剪辑对象 AnimationClip 包含多

组关键帧KeyframeTrack数据， obj.animations[1] 对应的剪辑对象 AnimationClip 没有关键帧数

据，也就是说没有关键帧动画。具体的开发中，可能美术提供的模型有很多包含关键帧动画的剪辑对象AnimationClip ，你可以根据自己的需要解析某个剪辑对象 AnimationClip 对应的动画。

var loader = new THREE.FBXLoader();//创建一个FBX加载器loader.load("SambaDancing.fbx", function(obj) {...// 可以在控制台打印obj对象，找到animations属性console.log(obj)// 查看动画数据 2个剪辑对象AnimationClip，一个有关键帧动画，一个没有console.log(obj.animations)})

解析fbx模型骨骼动画

var mixer=null;//声明一个混合器变量var loader = new THREE.FBXLoader();//创建一个FBX加载器loader.load("SambaDancing.fbx", function(obj) {// console.log(obj)scene.add(obj)obj.translateY(-80);// obj作为参数创建一个混合器，解析播放obj及其子对象包含的动画数据mixer = new THREE.AnimationMixer(obj);// 查看动画数据console.log(obj.animations)// obj.animations[0]：获得剪辑对象clipvar AnimationAction=mixer.clipAction(obj.animations[0]);// AnimationAction.timeScale = 1; //默认1，可以调节播放速度// AnimationAction.loop = THREE.LoopOnce; //不循环播放// AnimationAction.clampWhenFinished=true;//暂停在最后一帧播放的状态AnimationAction.play();//播放动画})// 创建一个时钟对象Clockvar clock = new THREE.Clock();// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧if (mixer !== null) {//clock.getDelta()方法获得两帧的时间间隔// 更新混合器相关的时间mixer.update(clock.getDelta());}}render();

DEMO下载

如果觉得《ThreeJS导出三维模型 导入三维模型 导入三维动画》对你有帮助，请点赞、收藏，并留下你的观点哦！