现在市面上的3D模型有上百种，每一种的格式都有不同的用途，不同的功能和复杂程度。尽管Three.js提供了很多的加载器，但选择正确的格式和工作流程将在以后节省时间和成本。而且某些格式难以使用，效率低下或者目前还未完全支持。

Three.js的JSON格式

这里的JSON格式指的是Three.js可以将其转换为场景的3D对象的JSON格式模型。这种格式内部一般必有的四项为：

metadata 当前模型的相关信息以及生成的工具信息
geometries 存储当前模型所使用的几何体的数组
materials 存储当前模型所使用的材质的数组
object 当前模型的结构以及标示所应用到的材质和几何体标示

所有的模型网格，几何体和材质都有一个固定的uuid标识符，JSON格式中都是通过uuid作为引用。

3d对象转成JSON

所有的THREE.Object3D对象都可以转成JSON字符串保存成为文件，我们不能直接将对象转成JSON是因为JSON是无法保存函数的，所以，Three.js给我们提供了一个toJSON()的方法来让我们转换为可存储的JSON格式。

var obj = scene.toJSON(); //将整个场景的内容转换成为json对象
var obj = group.toJSON(); //将一个模型组转成json对象
var obj = mesh.toJSON(); //将一个模型网格转成json对象
var JSONStr = JSON.stringify(obj); //将json对象转换成json字符串

按照这种方式，我们就可以将生成的场景模型保存为文件。

使用ObjectLoader加载JSON模型

既然我们能够导入，肯定就可以导入。这里我们将使用到Three.js内置的对象THREE.ObjectLoader来加载模型：
直接加载Three.js生成的JSON对象：

var obj = scene.toJSON(); //将整个场景的内容转换成为json对象let loader = new THREE.ObjectLoader(); //实例化ObjectLoader对象
let scene = loader.parse(obj); //将json对象再转换成3D对象

加载外部的JSON文件：

let loader = new THREE.ObjectLoader(); //实例化ObjectLoader对象//加载模型，并在回调中将生成的模型对象添加到场景中
loader.load("../js/models/json/file.json", function (group) {scene.add(group);
});

案例地址：点击这里
案例的右上角有四个点击事件：

添加模型：将在场景内随机生成一组立方体，每次都不相同。
导出模型：将场景内这一组立方体可以导出到本地json文件。
导入模型：可以将选择的符合JSON文件解析并导入到场景内。
加载模型：将加载服务器上面的一个JSON文件。
案例代码地址：点击这里

glTF格式文件导入

glTF格式的3D格式文件是官方推荐的使用的格式，这种格式的文件我们可以在sketchfab官网下载，这是一个国外比较知名的模型网站，下载地址是：点击这里，我们可以在这里下载一些免费的glTF格式的模型。
这里我在官网上随便找了一个不错的模型做了一个案例：点击这里

模型加载的速度会有些慢，大家可以等待一下便能够看到这个小汽车。

接下来我们便讲解一下加载glTF模型的流程：

首先，将GLTFLoader加载器插件引入到页面，插件在官方包的地址/examples/js/loaders/，一些文件的导入插件都在这一个文件夹内，大家有兴趣可以研究一下：

<script src="../js/loaders/GLTFLoader.js"></script>

然后创建一个加载器：

var loader = new THREE.GLTFLoader();

使用加载器去加载模型，并调节一下模型大小在场景内展示：

loader.load('../js/models/gltf/scene.gltf', function (gltf) {gltf.scene.scale.set(.1,.1,.1);scene.add(gltf.scene);
});

我们需要有时候不明白的是，我加载了一个模型，哪一部分是需要导入场景的模型呢？
这里我们可以先将解析的出来的模型对象打印一下，然后通过查看对象属性来了解到底是导入场景内的对象，就比如glTF模型转换出来的对象的scene属性就是需要导入场景的对象，而JSON格式的模型是直接可以导入的对象。
模型加载案例源码：点击这里

FBX模型导入

FBX最大的用途是用在诸如在max、maya、softimage等软件间进行模型、材质、动作和摄影机信息的互导，这样就可以发挥max和maya等软件的优势。可以说，FBX方案是最好的互导方案。

接下来我们看一下FBX模型导入的案例，这是我在网上随便下载的一个FBX格式的模型，导入到场景内的效果，案例查看地址：点击这里
实现过程：
首先我们需要导入FBXLoader插件，并且还需要额外增加一个解析二进制文件的插件inflate.min.js，不导入这个文件的话，除了一些字符串存储的FBX格式，别的格式都会报错：

<script src="../js/loaders/inflate.min.js"></script>
<script src="../js/loaders/FBXLoader.js"></script>

创建FBX加载器

var loader = new THREE.FBXLoader();

修改模型大小，并设置每个模型网格可以投射阴影：

loader.load('../js/models/fbx/file.fbx', function (fbx) {fbx.scale.set(.1,.1,.1);fbx.traverse(function (item) {if(item instanceof THREE.Mesh){item.castShadow = true;item.receiveShadow = true;}});scene.add(fbx);
});

这样就实现了FBX模型的导入。
案例源码地址：点击这里

OBJ格式模型导入

OBJ文件是3D模型文件格式。由Alias|Wavefront公司为3D建模和动画软件"Advanced Visualizer"开发的一种标准，适合用于3D软件模型之间的互导，也可以通过Maya读写。
OBJ文件是一种文本文件，可以直接用写字板打开进行查看和编辑修改，但不包含动画、材质特性、贴图路径、动力学、粒子等信息。
OBJ文件的导出通常会和MTL格式一同导出，MTL作为OBJ文件的附属文件，却有着OBJ文件需要贴图材质，所以，我们通常使用时，将它们两个文件一同导入。

这是我使用官网提供的一个模型制作的一个案例，查看地址：点击这里
实现导入的过程：
首先，我们需要将OBJLoader插件和MTLLoader插件引入页面：

<script src="../js/loaders/OBJLoader.js"></script>
<script src="../js/loaders/MTLLoader.js"></script>

实例化MTLLoader：

//创建MTL加载器
var mtlLoader = new THREE.MTLLoader();
//设置文件路径
mtlLoader.setPath('../js/models/obj/');

如果有需要，我们还可以设置纹理文件夹地址：

//设置纹理文件路径
mtlLoader.setTexturePath('../js/models/obj/');

加载MTL文件，并在文件加载成功后，创建OBJLoader并设置对象应用当前的材质：

//加载mtl文件
mtlLoader.load('female02.mtl', function (material) {//创建OBJ加载器var objLoader = new THREE.OBJLoader();//设置当前加载的纹理objLoader.setMaterials(material);objLoader.setPath('../js/models/obj/');objLoader.load('female02.obj', function (object) {//添加阴影object.traverse(function (item) {if(item instanceof THREE.Mesh){item.castShadow = true;item.receiveShadow = true;}});//缩放object.scale.set(.3,.3,.3);scene.add(object);})
});

我们再去加载OBJ文件，加载成功的文件就是可以导入到场景内的3D对象。
案例源码查看地址：点击这里

COLLADA模型导入

COLLADA是一个开放的标准，最初用于3D软件数据交换，由SCEA发起，现在则被许多著名厂家支持如Autodesk、XSI等。COLLADA不仅仅可以用于建模工具之间交换数据之用，也可以作为场景描述语言用于小规模的实时渲染。因为COLLADA DOM拥有丰富的内容用于表现场景中的各种元素，从多边形几何体到摄像机无所不包。我们可以通过COLLADA DOM库来进行场景文件的读取与处理操作。

上面是我写的一个模型导入案例，案例地址：点击这里
实现步骤，首先引入ColladaLoader插件：

<script src="../js/loaders/ColladaLoader.js"></script>

接着实例化ColladaLoader对象：

var loader = new THREE.ColladaLoader();

最后加载文件并调整文件大小，添加到场景内：

loader.load('../js/models/collada/elf.dae', function (collada) {//添加阴影collada.scene.traverse(function (item) {if(item instanceof THREE.Mesh){item.castShadow = true;item.receiveShadow = true;}});//缩放collada.scene.scale.set(5,5,5);scene.add(collada.scene);
});

案例源码查看：点击这里

注意事项

如何知道，加载完成的模型需要将哪部分导入到场景？
一般情况下都是将自身导入，比如FBX，OBJ，JSON等，还有一种，会在里面生成一个可导入scene属性，如：glTF和COLLADA文件。如果导入的你无法确定，你就把模型对象打印到控制台查看，然后尝试往场景内导入。
导入到场景内的模型无法查看，而且也没有报错
这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的：

模型太小或者太大，这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。
模型的位置太偏，根本不在相机照射范围内，这种问题我们可以将模型居中到相机照射的焦点位置查看，如何居中我们将在后面的章节中讲解。

10 Loaders加载模型到Three.js相关推荐

[转](1条消息) vue 访问本地文件相对路径文件目录 three.js 加载模型(转载请删除括号里的内容)
环境: vue/cli 4.5.9 "three": "^0.124.0", "vue": "^2.6.11", &qu ...
away3d 4.0.9Gold 学习笔记加载模型（6）
学习笔记提供模型和贴图请勿用于商业用途. 1 package 2 { 3 import away3d.containers.ObjectContainer3D; 4 import away3d.con ...
THREE加载模型FBX、OBJ、GLTF
加载FBX模型 ps 文章断更一个多月了,今天女朋友提醒,再次沉下心来继续记录最近学习过程.生命不止,学习不休. <script lang="ts" setup> im ...
babylonjs 分部加载模型_基于Babylonjs自制WebGL3D模型编辑器
一.总述当代WebGL编程所使用的3D模型大多是从3DsMax模型或Blender模型转化而来,这种工作模式比较适合3D设计师和3D程序员分工配合的场景.但对于单兵作战的WebGL爱好者来讲这种模式 ...
Cesium加载模型两种方式
Cesium加载模型两种方式代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
网页怎么预先加载模型_使用预先训练的模型进行转移学习
网页怎么预先加载模型深度学习 (Deep Learning) 什么是转学? (What is Transfer Learning?) Transfer learning is a research ...
tensorflow 1.x Saver(保存与加载模型) 预测
20201231 tensorflow 1.X 模型保存 https://blog.csdn.net/qq_35290785/article/details/89646248 保存模型 saver=t ...
网站性能分析（下）-让网站并行加载但顺序执行JS
如果网站不支持JavaScript,复杂的功能将无法正常工作.在开发当中通常有几个脚本会写在HTML文件的头部.你嵌入的越多,网站的速度潜在的变得越慢.因此提高并行加载速度变得非常有必要,在前面的文章 ...
tensorflow加载模型
git链接参考链接训练模型 #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Sat Mar ...

10 Loaders加载模型到Three.js

推荐使用的模型格式