3d obj文件 c语言,【threejs学习随记（三）】3D模型导入问题

想想复杂的模型就交给3D设计师进行创作，而我们开发时只需引入模型文件，是不是很美滋滋？

当然，如果你时间充裕，又对模型创作感兴趣，那你确实可以花时间好好学习3D建模软件的使用，这样以后就可以自己创建所需模型，由自己导出与导入模型文件。因为从建模软件导出模型的过程中，其实有特别多的坑，一个不小心，导出的模型可能就大相径庭。所以依赖于别人导出的模型文件，有时你都不知道到底问题出在哪里。

一、Threejs支持的常见导出模型的文件格式有哪些？

JSON(*.js/ *.json)：专门为Three.js自己设计的JSON格式，你可以使用它以声明的方式定义模型，及模型材质和动画。

OBJ和MTL(*.obj/ *.mtl)：OBJ是一种简单的三维文件格式，只用来定义对象的几何体。MTL文件通常和OBJ文件一起使用，在一个MTL文件中，定义对象的材质。

Collada (*.dae)：用来定义XML类文件中数字内容的格式。差不多所有的三维软件和渲染引擎都支持这个格式。

STL (*.stl)：立体成型术 。 广泛用于快速成型。例如，三维打印机的模型文件通常是STL文件。Three.js有一个可定制的STL导出工具，STLExporter.js。可以将Three.js中的模型导出到一个STL文件。

FBX (*.fbx)：是FilmBoX这套软件所使用的格式，其最大的用途是用在诸如在max、maya、softimage等软件间进行模型、材质、动作和摄影机信息的互导，因此在创建三维内容的应用软件之间具有无与伦比的互用性。

CTM (*.ctm)：由openCTM创建的格式。可以用来压缩存储表示三维网格的三角形面片。

VTK(*.vtk)：Visualization Tookit 定义的文件格式，用来指定顶点和面。VTK有两种格式，Three.js支持旧的格式，即Asscii格式。

PDB(*.pdb)：特别的数据格式，由 蛋白质数据银行 场景，用来定义蛋白质的形状。Three.js可以加载并显示这种描述格式的蛋白质。

PLY (*.ply)：多边形文件格式。通常保存三维扫描仪的数据。

二、Threejs中导入以上外部模型文件所需的辅助函数是哪些？

threejs中导入外部文件所需的辅助函数都在https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders下可以找到。这里除了JSON模型文件的导入外，其余模型文件都需要引用其对应名称的辅助函数。例如：导入OBJ格式的模型，除了导入必要的three.js文件外，还需要在界面中引用OBJLoader.js文件。而JSONLoader函数集成在three.js中，所以无需再导入其他辅助文件！

三、3D软件导出的模型文件可以解析哪些东西呢？

可解析出网格(模型)的有：JSON, STL, OBJ

可解析出模型材质的有：JSON, MTL

可解析出模型动画的有：FBX， DAE,  JSON

理解就是，如：导出的json文件既可以存物体的模型，也可以存其材质及动画信息。

四、Threejs中几个常用模型文件导入示例

4.1  JSON格式文件导入——使用JSONLoader函数

// 实例化一个JSONLoader类

var loader = new THREE.JSONLoader();

// 导入资源

loader.load(

// 导入的模型文件所在 URL

'models/animated/monster/monster.js',

// 资源加载成功后执行的函数

//@params geometry 传入的模型，只能是单个模型，不能是一个场景

// @params materials 传入的材质，是个数组

function ( geometry, materials ) {

var material = materials[ 0 ];

var object = new THREE.Mesh( geometry, material );

scene.add( object );

}

);

4.2  OBJ格式文件导入——使用OBJLoader函数

敲黑板！！！！！前面已经讲过，obj格式文件都是和mtl格式文件搭配使用，因为obj格式的文件只能存模型，不能存模型材质和动画，而材质都存于mtl文件中。

4.2.1 当只导入模型，不导入材质，模型的材质由导入后用代码定义

//图片加载loader

var texture = new THREE.Texture();

var loader = new THREE.ImageLoader( );

//导入资源

loader.load(

//材质图片所在url

'textures/UV_Grid_Sm.jpg',

function ( image ) {

texture.image = image;

texture.needsUpdate = true;

} );

//obj文件加载loader

var loader = new THREE.OBJLoader( );

//导入资源

loader.load(

//obj模型所在url

'obj/male02/male02.obj',

// 资源加载成功后执行的函数

//@params object 传入的模型，只能是单个模型，也可能是一个group,视构建的model而定

function ( object ) {

//taverse函数为遍历object的每个子mesh，传入的child为每个mesh

//该示例中的object为一个group，有多个mesh组成

object.traverse( function ( child ) {

if ( child instanceof THREE.Mesh ) {

child.material.map = texture;

}

} );

object.position.y = - 95;

scene.add( object );

});

4.2.2 当既导入模型，又导入材质时

//当mtl中引用了dds类型的图片时，还需导入DDSLoader文件。

//这里的src路径视实际开发而定

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

var mtlLoader = new THREE.MTLLoader();

//设置路径，也可不是设置，在load中加载完整路径也可

mtlLoader.setPath( 'obj/male02/' );

mtlLoader.load( 'male02_dds.mtl',

// 资源加载成功后执行的函数

//@params materials THREE.MTLLoader.MaterialCreator

function( materials ) {

materials.preload();

var objLoader = new THREE.OBJLoader();

objLoader.setMaterials( materials );

objLoader.setPath( 'obj/male02/' );

objLoader.load( 'male02.obj', function ( object ) {

object.position.y = - 95;

scene.add( object );

});

});

4.3  其他模型文件导入类似，具体可参考官网examples

五、常见问题

模型导出为obj格式后，文件太大，想将其转化为json格式以减少文件大小。那么该怎样操作呢？

threejs R86版本中，有convert-to-threejs.py这样一个python文件，该文件的作用是将模型文件(.fbx，.dae, .obj, .3ds)转换成json格式。详细地转换操作可参考以下链接文章：

注意事项：

对以上链接文章做个小补充，这里箭头所引入的python版本最好一致，反正我当时不一致好像最后转化出bug了。

虽然threejs R86仍然保留convert-to-threejs.py，但是该文件作者已很久没维护，处于已过时的文件。所以即便成功将obj转换成json文件，仍有存在json文件不可用的情况(就问你绝不绝望？？)。笔者在开发的过程中，就遇到该问题：成功转换成json文件后，用JSONLoader导入该文件后报错，因为转换后的json文件中“type“类型为”scene“，因此既不符合JSONLoader，也不符合ObjectLoader的导入格式要求。查询相关资料，发现有许多小伙伴也遇到过这种bug，暂时没找到解决方法。如果有大大发现，请务必分享下解决方案，万分感谢！

2. 如何用Threejs导入基于JSON格式的场景文件？

所谓场景文件，也就是文件中列出了各个物体和变换层级，以及所有的材质，纹理，相机和光源信息。讲道理，如果成功导入一个场景文件后，进行基本渲染就可以查看整个3D场景了。之前threejs的版本中进行场景渲染调用THREE.SceneLoader即可，不过现在threejs R86版本已用THREE.ObjectLoader替代。

给个简单示例：

//@params url 场景文件所在路径

new THREE.ObjectLoader().load( url, function ( loadedScene ) {

scene = loadedScene;

// If the loaded file contains a perspective camera, use it with adjusted aspect ratio...

scene.traverse( function ( sceneChild ) {

if ( sceneChild.type === 'PerspectiveCamera' ) {

camera = sceneChild;

camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;

camera.updateProjectionMatrix();

}

} );

六、干货分享

threejs入门指南