利用Javascript編寫的WebGL第三方庫，可以用來創建各種三維場景，包括攝像機，光影，材質等對象。

首先準備工作先創建一個canvas標簽（圖形的顯示都在這個上面），并引用相應的庫函數。

<script src="js/loaders/VTKLoader.js"></script>

要想利用WebGL渲染任何東西，都必需三個元素：1.場景2.相機3.渲染器。然后我們就可以用相機來渲染場景。其中相機分為兩種：正交相機和透視相機，我們經常使用的是透視相機，因為更接近人眼的觀察效果，近大遠小。正交相機一般會在建模軟件中使用，不會因為投影改變物體比例。在庫中創建相機使用new PerspectiveCamera(fov, aspectratio, near, far);第一個參數指定視口大小，第二個是寬高比，一般是屏幕大小的寬高比，第三、四個參數代表近、遠裁剪面，場景里的物體在近、遠裁剪面之間才能被顯示，否則，會被裁剪掉。

var scene = new Scene();
var camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 0.2;
var renderer = new WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene.add( camera );

接下來我們就可以加載模型了，加載VTK類型的模型我們可以直接使用庫提供的加載器VTKLoader()。該加載器的load方法的第一個參數為vtk模型的路徑，第二個參數相當于回調函數，參數geometry，是模型的幾何信息，比如頂點，包圍盒等等，然后通過center的方法，計算模型的中心位置，并重新設置中心位置為坐標原點，使模型能夠顯示在瀏覽器的正中央。有些模型是自身不帶法向量的，所以需要使用computeVertexNormals()計算法向量。然后將模型的geometry（幾何信息）與material（材質）相關聯，獲得mesh（模型網格），再把mesh放到場景里。

var material = new MeshLambertMaterial( { color: 0xffffff, side: DoubleSide } );
var loader = new VTKLoader();
loader.load( "models/vtk/post.vtk", function ( geometry ) {
    geometry.center();
    geometry.computeVertexNormals();
    var mesh = new Mesh( geometry, material );
    scene.add( mesh );
} );

還剩下最后一步，也是最重要的一步，開啟渲染循環，讓渲染器開始渲染場景

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

 

然后vtk模型就加載出來了。

利用WebGL技術，同時也可以通過解析模型獲取模型數據，將CAD的數據轉換成庫能夠識別的數據，并對數據輕量化，優化渲染，能夠加載大型的模型。比如解析UG模型數據，加載輕量化模型。同時，結合相關網站應用可以開發出各類3D網頁應用。我們公司開發的在線水泵設計工具AIPump、在線風機設計工具AIFan就是利用了該項技術，有興趣的朋友可以進行在線使用哦。手機、平板都可以訪問。http://www.rhotheta.cn/goods.html