在3DMAX,MAYA等軟件(這是一些三維編輯軟件)中,可以制作出3D模型。這些模型可用於室內設計,三維影視,三維游戲等領域。
3D模型由頂點(vertex)組成,頂點之間連成三角形或四邊形(在一個平面上),多個三角形或者四邊形就能夠組成復雜的立體模型.
如下圖所示:
上圖就是一輛汽車的3D模型(立體模型),因為是由一個個網格組成,所以,也叫其為網格模型。
最終目的是要講解怎么將模型導入three.js中,讓three.js能夠顯示模型。模型是由面組成,面分為三角形和四邊形面。三角形和四邊形面組成了網格模型。在Three.js中用THREE.Mesh來表示網格模型。THREE.Mesh可以和THREE.Line相提並論,區別是THREE.Line表示的是線條。THREE.Mesh表示面的集合。
THREE.Mesh,它的構造函數是:THREE.Mesh = function ( geometry, material )。其中第一個參數geometry:是一個THREE.Geometry類型的對象,他是一個包含頂點和頂點之間連接關系的對象。第二個參數Material:就是定義的材質。有了材質就能夠讓模型更好看,材質會影響光照、紋理對Mesh的作用效果。
先來看看three.js加載一個簡單模型的過程。這個過程是這樣的:
上圖的順序是:
1、服務器上的模型文件以文本的方式存儲,除了以three.js自定義的文本方式存儲之外,當然也可以以二進制的方式存儲,不過這里暫時不講。
2、瀏覽器下載文件到本地
3、Javascript解析模型文件,生成Mesh網格模型
4、顯示在場景中。