将不同格式的3d模型导入three.js

three.js除了可以自己绘画3d模型以外，当然也是可以自己导入3d模型。官方提供了许多例子，多且难寻。
于是体贴的米肥为大家筛选了几个官方的例子，用以分析如何将3d模型导入three.js
这次我尝试研究了4种3d模型格式 用于导入three.js
分别是 3ds、vtk、obj、json

将3ds文件导入three.js

three.js支持大多数的3d模型格式，并且提供工具进行转换为three.js可用的格式
但是，three.js提供的example中 并不支持3ds文件的直接转换。
所以，3ds文件需要转换为其他three.js可支持的文件

将obj文件导入three.js

obj格式的3d模型是可以直接导入three.js。
首先要引用obj文件要用到的OBJLoader.js
<script src="javascript/OBJLoader.js"></script>
在init函数中 创建loader变量，用于导入模型
var loader = new THREE.OBJLoader();
loader导入模型之后 接收两个参数，一个表示模型路径，另一个表示导入完成后的回调函数。

loader.load( "images/obj/ninja/ninjaHead_Low.obj", function ( group ) {
  geometry = group.children[ 0 ].geometry;
  geometry.attributes.uv2 = geometry.attributes.uv;
  geometry.center();
  mesh = new THREE.Mesh( geometry, materialNormal );
  mesh.scale.multiplyScalar( 25 );
  scene.add( mesh );
  } );

若除了obj文件之外，还有jpg文件需要引入
同样在init函数导入即可

 // textures
var textureLoader = new THREE.TextureLoader();
var normalMap = textureLoader.load( "images/obj/ninja/normal.jpg" );
var aoMap = textureLoader.load( "images/obj/ninja/ao.jpg" );
var displacementMap = textureLoader.load( "images/obj/ninja/displacement.jpg" );

将vtk文件导入three.js

和引用obj一样 一开始都要引用相应的loader
<script src="javascript/VTKLoader.js"></script>
在init函数里面 创建一个loader
var loader = new THREE.VTKLoader();
同样的loader函数，可以接收两个值。
在接收到vtk文件之后，官方的例子在回调函数设置了位置，材质等元素。

var loader = new THREE.VTKLoader();
loader.load( "images/vtk/bunny.vtk", function ( geometry ) {
  geometry.center();
  geometry.computeVertexNormals();
  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.set( - 0.075, 0.005, 0 );
  mesh.scale.multiplyScalar( 0.2 );
  scene.add( mesh );
  } );

将json文件导入three.js

three.js对blender最为友好
官方提供了插件可以在blender中导出three.js可以用的json格式
各位客官可以自行搜索 在此不啰嗦~
生成的json文件可以直接导入three.js
首先创建一个loader
var objectLoader = new THREE.ObjectLoader();
然后用创建后的loader引入json文件 即可

objectLoader.load("javascript/js/teapot-claraio.json", function ( obj ) {
  scene.add( obj );
} );

3d模型有许多的格式，而大部分 ，在官网都有示例。
这次只研究了3种loader
发现其实大同小异，用手机测试过，无论是安卓还是ios相对来说 都比较流畅。可见three.js是可以经得起折腾的。

这次就这样先~下次有机会 会继续深入了解three.js滴~
886~