现在市面上的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
文件。如果导入的你无法确定,你就把模型对象打印到控制台查看,然后尝试往场景内导入。 -
导入到场景内的模型无法查看,而且也没有报错
这种会有可能有多种情况造成的,一般情况下都是下面两种情况造成的:
- 模型太小或者太大,这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。
- 模型的位置太偏,根本不在相机照射范围内,这种问题我们可以将模型居中到相机照射的焦点位置查看,如何居中我们将在后面的章节中讲解。