10 Loaders加载模型到Three.js

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30100043/article/details/80979604

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

推荐使用的模型格式

官方推荐我们使用的3D模型的格式为glTF，由于glTF专注于传输，因此它的传输和解析的速度都很快。glTF模型功能包括：网格，材质，纹理，蒙皮，骨骼，变形动画，骨骼动画，灯光以及相机。
如果当前的首选不是glTF格式，那么推荐Three.js定期维护并且流行的格式FBX，OBJ或者COLLADA格式，Three.js也有自己独有的JSON格式。我们接下来将介绍这五种格式：

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文件。如果导入的你无法确定，你就把模型对象打印到控制台查看，然后尝试往场景内导入。

• 导入到场景内的模型无法查看，而且也没有报错
  这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的：

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