three.js除了可以自己繪畫3d模型以外，當(dāng)然也是可以自己導(dǎo)入3d模型。官方提供了許多例子，多且難尋。
于是體貼的米肥為大家篩選了幾個(gè)官方的例子，用以分析如何將3d模型導(dǎo)入three.js
這次我嘗試研究了4種3d模型格式 用于導(dǎo)入three.js
分別是 3ds、vtk、obj、json

將3ds文件導(dǎo)入three.js

three.js支持大多數(shù)的3d模型格式，并且提供工具進(jìn)行轉(zhuǎn)換為three.js可用的格式
但是，three.js提供的example中 并不支持3ds文件的直接轉(zhuǎn)換。
所以，3ds文件需要轉(zhuǎn)換為其他three.js可支持的文件

將obj文件導(dǎo)入three.js

obj格式的3d模型是可以直接導(dǎo)入three.js。
首先要引用obj文件要用到的OBJLoader.js
<script src="javascript/OBJLoader.js"></script>
在init函數(shù)中 創(chuàng)建loader變量，用于導(dǎo)入模型
var loader = new THREE.OBJLoader();
loader導(dǎo)入模型之后 接收兩個(gè)參數(shù)，一個(gè)表示模型路徑，另一個(gè)表示導(dǎo)入完成后的回調(diào)函數(shù)。

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函數(shù)導(dǎo)入即可

 // 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文件導(dǎo)入three.js

和引用obj一樣 一開始都要引用相應(yīng)的loader
<script src="javascript/VTKLoader.js"></script>
在init函數(shù)里面 創(chuàng)建一個(gè)loader
var loader = new THREE.VTKLoader();
同樣的loader函數(shù)，可以接收兩個(gè)值。
在接收到vtk文件之后，官方的例子在回調(diào)函數(shù)設(shè)置了位置，材質(zhì)等元素。

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文件導(dǎo)入three.js

three.js對blender最為友好
官方提供了插件可以在blender中導(dǎo)出three.js可以用的json格式
各位客官可以自行搜索 在此不啰嗦~
生成的json文件可以直接導(dǎo)入three.js
首先創(chuàng)建一個(gè)loader
var objectLoader = new THREE.ObjectLoader();
然后用創(chuàng)建后的loader引入json文件 即可

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

示例圖

3d模型有許多的格式，而大部分 ，在官網(wǎng)都有示例。
這次只研究了3種loader
發(fā)現(xiàn)其實(shí)大同小異，用手機(jī)測試過，無論是安卓還是ios相對來說 都比較流暢?？梢妕hree.js是可以經(jīng)得起折騰的。

這次就這樣先~下次有機(jī)會 會繼續(xù)深入了解three.js滴~
886~