webGL3D模型的加載與使用


    在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、顯示在場景中。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM