2023年6月21日发(作者：)
【threejs学习随记（三）】3D模型导⼊问题想想复杂的模型就交给3D设计师进⾏创作，⽽我们开发时只需引⼊模型⽂件，是不是很美滋滋？当然，如果你时间充裕，⼜对模型创作感兴趣，那你确实可以花时间好好学习3D建模软件的使⽤，这样以后就可以⾃⼰创建所需模型，由⾃⼰导出与导⼊模型⽂件。因为从建模软件导出模型的过程中，其实有特别多的坑，⼀个不⼩⼼，导出的模型可能就⼤相径庭。所以依赖于别⼈导出的模型⽂件，有时你都不知道到底问题出在哪⾥。⼀、Threejs⽀持的常见导出模型的⽂件格式有哪些？JSON（*.js/ *.json）：专门为⾃⼰设计的JSON格式，你可以使⽤它以声明的⽅式定义模型，及模型材质和动画。OBJ和MTL（*.obj/ *.mtl）：OBJ是⼀种简单的三维⽂件格式，只⽤来定义对象的⼏何体。MTL⽂件通常和OBJ⽂件⼀起使⽤，在⼀个MTL⽂件中，定义对象的材质。
Collada (*.dae)：⽤来定义XML类⽂件中数字内容的格式。差不多所有的三维软件和渲染引擎都⽀持这个格式。
STL (*.stl)：⽴体成型术 。 ⼴泛⽤于快速成型。例如，三维打印机的模型⽂件通常是STL⽂件。有⼀个可定制的STL导出⼯具，。可以将中的模型导出到⼀个STL⽂件。
FBX (*.fbx)：是FilmBoX这套软件所使⽤的格式，其最⼤的⽤途是⽤在诸如在max、maya、softimage等软件间进⾏模型、材质、动作和摄影机信息的互导，因此在创建三维内容的应⽤软件之间具有⽆与伦⽐的互⽤性。CTM (*.ctm)：由openCTM创建的格式。可以⽤来压缩存储表⽰三维⽹格的三⾓形⾯⽚。
VTK（*.vtk）：Visualization Tookit 定义的⽂件格式，⽤来指定顶点和⾯。VTK有两种格式，⽀持旧的格式，即Asscii格式。
PDB（*.pdb）：特别的数据格式，由 蛋⽩质数据银⾏ 场景，⽤来定义蛋⽩质的形状。可以加载并显⽰这种描述格式的蛋⽩质。
PLY (*.ply)：多边形⽂件格式。通常保存三维扫描仪的数据。⼆、Threejs中导⼊以上外部模型⽂件所需的辅助函数是哪些？三、3D软件导出的模型⽂件可以解析哪些东西呢？可解析出⽹格（模型）的有：JSON, STL, OBJ可解析出模型材质的有：JSON, MTL可解析出模型动画的有：FBX， DAE, JSON 理解就是，如：导出的json⽂件既可以存物体的模型，也可以存其材质及动画信息。四、Threejs中⼏个常⽤模型⽂件导⼊⽰例4.1 JSON格式⽂件导⼊——使⽤JSONLoader函数// 实例化⼀个JSONLoader类var loader = new ader();// 导⼊资源( // 导⼊的模型⽂件所在 URL 'models/animated/monster/', // 资源加载成功后执⾏的函数 //@params geometry 传⼊的模型，只能是单个模型，不能是⼀个场景 // @params materials 传⼊的材质，是个数组
function ( geometry, materials ) { var material = materials[ 0 ]; var object = new ( geometry, material ); ( object ); });4.2 OBJ格式⽂件导⼊——使⽤OBJLoader函数敲⿊板前⾯已经讲过，obj格式⽂件都是和mtl格式⽂件搭配使⽤，因为obj格式的⽂件只能存模型，不能存模型材质和动画，⽽材质都存于mtl⽂件中。4.2.1 当只导⼊模型，不导⼊材质，模型的材质由导⼊后⽤代码定义//图⽚加载loadervar texture = new e();var loader = new oader( ); //导⼊资源 (
//材质图⽚所在url 'textures/UV_Grid_',
function ( image ) { = image; pdate = true; } );//obj⽂件加载loadervar loader = new der( ); //导⼊资源 (
//obj模型所在url 'obj/male02/',
// 资源加载成功后执⾏的函数
//@params object 传⼊的模型，只能是单个模型，也可能是⼀个group,视构建的model⽽定
function ( object ) {//taverse函数为遍历object的每个⼦mesh，传⼊的child为每个mesh //该⽰例中的object为⼀个group，有多个mesh组成 se( function ( child ) { if ( child instanceof ) { = texture; } } ); on.y = - 95; ( object ); }); 4.2.2 当既导⼊模型，⼜导⼊材质时 //当mtl中引⽤了dds类型的图⽚时，还需导⼊DDSLoader⽂件。//这⾥的src路径视实际开发⽽定( /.dds$/i, new der() );var mtlLoader = new der();//设置路径，也可不是设置，在load中加载完整路径也可 h( 'obj/male02/' ); ( 'male02_',
// 资源加载成功后执⾏的函数
//@params materials alCreator function( materials ) { d(); var objLoader = new der(); erials( materials ); h( 'obj/male02/' ); ( '', function ( object ) { on.y = - 95; ( object ); }); }); 4.3 其他模型⽂件导⼊类似，具体可参考官⽹examples五、常见问题1. 模型导出为obj格式后，⽂件太⼤，想将其转化为json格式以减少⽂件⼤⼩。那么该怎样操作呢？ threejs R86版本中，有这样⼀个python⽂件，该⽂件的作⽤是将模型⽂件（.fbx，.dae, .obj, .3ds）转换成json格式。详细地转换操作可参考以下链接⽂章：注意事项：对以上链接⽂章做个⼩补充，这⾥箭头所引⼊的python版本最好⼀致，反正我当时不⼀致好像最后转化出bug了。
虽然threejs R86仍然保留，但是该⽂件作者已很久没维护，处于已过时的⽂件。所以即便成功将obj转换成json⽂件，仍有存在json⽂件不可⽤的情况（就问你绝不绝望？？）。笔者在开发的过程中，就遇到该问题：成功转换成json⽂件后，⽤JSONLoader导⼊该⽂件后报错，因为转换后的json⽂件中“type“类型为”scene“，因此既不符合JSONLoader，也不符合ObjectLoader的导⼊格式要求。查询相关资料，发现有许多⼩伙伴也遇到过这种bug，暂时没找到解决⽅法。如果有⼤⼤发现，请务必分享下解决⽅案，万分感谢！2. 如何⽤Threejs导⼊基于JSON格式的场景⽂件？所谓场景⽂件，也就是⽂件中列出了各个物体和变换层级，以及所有的材质，纹理，相机和光源信息。讲道理，如果成功导⼊⼀个场景⽂件后，进⾏基本渲染就可以查看整个3D场景了。之前threejs的版本中进⾏场景渲染调⽤oader即可，不过现在threejs R86版本已⽤Loader替代。给个简单⽰例：//@params url 场景⽂件所在路径new Loader().load( url, function ( loadedScene ) { scene = loadedScene;// If the loaded file contains a perspective camera, use it with adjusted se( function ( sceneChild ) { if ( === 'PerspectiveCamera' ) { camera = sceneChild; = SCREEN_WIDTH / SCREEN_HEIGHT; ProjectionMatrix(); } } );六、⼲货分享threejs⼊门指南
2023年6月21日发(作者：)
【threejs学习随记（三）】3D模型导⼊问题想想复杂的模型就交给3D设计师进⾏创作，⽽我们开发时只需引⼊模型⽂件，是不是很美滋滋？当然，如果你时间充裕，⼜对模型创作感兴趣，那你确实可以花时间好好学习3D建模软件的使⽤，这样以后就可以⾃⼰创建所需模型，由⾃⼰导出与导⼊模型⽂件。因为从建模软件导出模型的过程中，其实有特别多的坑，⼀个不⼩⼼，导出的模型可能就⼤相径庭。所以依赖于别⼈导出的模型⽂件，有时你都不知道到底问题出在哪⾥。⼀、Threejs⽀持的常见导出模型的⽂件格式有哪些？JSON（*.js/ *.json）：专门为⾃⼰设计的JSON格式，你可以使⽤它以声明的⽅式定义模型，及模型材质和动画。OBJ和MTL（*.obj/ *.mtl）：OBJ是⼀种简单的三维⽂件格式，只⽤来定义对象的⼏何体。MTL⽂件通常和OBJ⽂件⼀起使⽤，在⼀个MTL⽂件中，定义对象的材质。
Collada (*.dae)：⽤来定义XML类⽂件中数字内容的格式。差不多所有的三维软件和渲染引擎都⽀持这个格式。
STL (*.stl)：⽴体成型术 。 ⼴泛⽤于快速成型。例如，三维打印机的模型⽂件通常是STL⽂件。有⼀个可定制的STL导出⼯具，。可以将中的模型导出到⼀个STL⽂件。
FBX (*.fbx)：是FilmBoX这套软件所使⽤的格式，其最⼤的⽤途是⽤在诸如在max、maya、softimage等软件间进⾏模型、材质、动作和摄影机信息的互导，因此在创建三维内容的应⽤软件之间具有⽆与伦⽐的互⽤性。CTM (*.ctm)：由openCTM创建的格式。可以⽤来压缩存储表⽰三维⽹格的三⾓形⾯⽚。
VTK（*.vtk）：Visualization Tookit 定义的⽂件格式，⽤来指定顶点和⾯。VTK有两种格式，⽀持旧的格式，即Asscii格式。
PDB（*.pdb）：特别的数据格式，由 蛋⽩质数据银⾏ 场景，⽤来定义蛋⽩质的形状。可以加载并显⽰这种描述格式的蛋⽩质。
PLY (*.ply)：多边形⽂件格式。通常保存三维扫描仪的数据。⼆、Threejs中导⼊以上外部模型⽂件所需的辅助函数是哪些？三、3D软件导出的模型⽂件可以解析哪些东西呢？可解析出⽹格（模型）的有：JSON, STL, OBJ可解析出模型材质的有：JSON, MTL可解析出模型动画的有：FBX， DAE, JSON 理解就是，如：导出的json⽂件既可以存物体的模型，也可以存其材质及动画信息。四、Threejs中⼏个常⽤模型⽂件导⼊⽰例4.1 JSON格式⽂件导⼊——使⽤JSONLoader函数// 实例化⼀个JSONLoader类var loader = new ader();// 导⼊资源( // 导⼊的模型⽂件所在 URL 'models/animated/monster/', // 资源加载成功后执⾏的函数 //@params geometry 传⼊的模型，只能是单个模型，不能是⼀个场景 // @params materials 传⼊的材质，是个数组
function ( geometry, materials ) { var material = materials[ 0 ]; var object = new ( geometry, material ); ( object ); });4.2 OBJ格式⽂件导⼊——使⽤OBJLoader函数敲⿊板前⾯已经讲过，obj格式⽂件都是和mtl格式⽂件搭配使⽤，因为obj格式的⽂件只能存模型，不能存模型材质和动画，⽽材质都存于mtl⽂件中。4.2.1 当只导⼊模型，不导⼊材质，模型的材质由导⼊后⽤代码定义//图⽚加载loadervar texture = new e();var loader = new oader( ); //导⼊资源 (
//材质图⽚所在url 'textures/UV_Grid_',
function ( image ) { = image; pdate = true; } );//obj⽂件加载loadervar loader = new der( ); //导⼊资源 (
//obj模型所在url 'obj/male02/',
// 资源加载成功后执⾏的函数
//@params object 传⼊的模型，只能是单个模型，也可能是⼀个group,视构建的model⽽定
function ( object ) {//taverse函数为遍历object的每个⼦mesh，传⼊的child为每个mesh //该⽰例中的object为⼀个group，有多个mesh组成 se( function ( child ) { if ( child instanceof ) { = texture; } } ); on.y = - 95; ( object ); }); 4.2.2 当既导⼊模型，⼜导⼊材质时 //当mtl中引⽤了dds类型的图⽚时，还需导⼊DDSLoader⽂件。//这⾥的src路径视实际开发⽽定( /.dds$/i, new der() );var mtlLoader = new der();//设置路径，也可不是设置，在load中加载完整路径也可 h( 'obj/male02/' ); ( 'male02_',
// 资源加载成功后执⾏的函数
//@params materials alCreator function( materials ) { d(); var objLoader = new der(); erials( materials ); h( 'obj/male02/' ); ( '', function ( object ) { on.y = - 95; ( object ); }); }); 4.3 其他模型⽂件导⼊类似，具体可参考官⽹examples五、常见问题1. 模型导出为obj格式后，⽂件太⼤，想将其转化为json格式以减少⽂件⼤⼩。那么该怎样操作呢？ threejs R86版本中，有这样⼀个python⽂件，该⽂件的作⽤是将模型⽂件（.fbx，.dae, .obj, .3ds）转换成json格式。详细地转换操作可参考以下链接⽂章：注意事项：对以上链接⽂章做个⼩补充，这⾥箭头所引⼊的python版本最好⼀致，反正我当时不⼀致好像最后转化出bug了。
虽然threejs R86仍然保留，但是该⽂件作者已很久没维护，处于已过时的⽂件。所以即便成功将obj转换成json⽂件，仍有存在json⽂件不可⽤的情况（就问你绝不绝望？？）。笔者在开发的过程中，就遇到该问题：成功转换成json⽂件后，⽤JSONLoader导⼊该⽂件后报错，因为转换后的json⽂件中“type“类型为”scene“，因此既不符合JSONLoader，也不符合ObjectLoader的导⼊格式要求。查询相关资料，发现有许多⼩伙伴也遇到过这种bug，暂时没找到解决⽅法。如果有⼤⼤发现，请务必分享下解决⽅案，万分感谢！2. 如何⽤Threejs导⼊基于JSON格式的场景⽂件？所谓场景⽂件，也就是⽂件中列出了各个物体和变换层级，以及所有的材质，纹理，相机和光源信息。讲道理，如果成功导⼊⼀个场景⽂件后，进⾏基本渲染就可以查看整个3D场景了。之前threejs的版本中进⾏场景渲染调⽤oader即可，不过现在threejs R86版本已⽤Loader替代。给个简单⽰例：//@params url 场景⽂件所在路径new Loader().load( url, function ( loadedScene ) { scene = loadedScene;// If the loaded file contains a perspective camera, use it with adjusted se( function ( sceneChild ) { if ( === 'PerspectiveCamera' ) { camera = sceneChild; = SCREEN_WIDTH / SCREEN_HEIGHT; ProjectionMatrix(); } } );六、⼲货分享threejs⼊门指南
发布评论