WebGL10---3D模型的加载与使用
1、关于模型的基础知识
3D模型由顶点（vertex）组成，顶点之间连成三角形或四边形（在一个平面上），多个三角形或四边形就能够组成复杂的立体模型；
使用ParaView查看3D模型；
2、模型在three.js中的表示
模型由面组成，面分为三角形和四边形。三角形和四边形面组成了网格模型。在three.js中用THREE.Mesh来表示网格模式。
THREE.Mesh可以和THREE.Line相提并论；区别是THREE.Line表示的是线条，THREE.Mesh表示面的集合；
THREE.Mesh = function(geometry,material)
参数说明：① geometry 是一个THREE.Geometry类型的对象，是一个包含顶点和顶点之间的连接关系对象；
② Material：是一个定义的材质；
3、模型的加载
① 服务器上的模型文件大多是存储模型的顶点信息，这些信息可以以文本的方式存储的（并不一定需要文本的方式存储）。
Three.js支持很多种3D模型格式，例如：ply,stl，obj,vtk等等。随着three.js的升级，会支持越来越多的文件格式；
② 第二步是浏览器下载文本文件，这是一件很普通的事情，只需要使用javascript的异步请求就可以实现；
③ javascript 解析文本并生成一个geometry，最终生成Mesh；
4、顶点和面索引之间的关系
加载vtk模型，主要分为2步：
① 将vtk文件中的点，转换为geometry的vertices数组中；
② 将vtk文件中每个点的索引，转换为geometry的faces中；
关于vtk文件的加载
//构造函数
THREE.VTKLoader = function(){
THREE.EventDispatcher.call(this);//继承自监听器，使这个类有监听的功能；
}；
//VTKLoader的原型函数，里面包含了VTKLoader的成员函数，成员变量的定义；
THREE.VTKLoader.prototype = {
//构造函数
constructor: THREE.VTKLoader,
//加载函数：url表示要加载的vtk文件的url路径，callback表示加载完成后要调用的后续处理函数；
load: function(url,callback){
//将类自身保存在scope中，scope表示域的意思，这里为了避免this的歧义
var scope = this;
//ajax异步请求
var request = new XMLHttpRequest();
//加载完成的监听器，加载完成后，将调用第二个参数定义的回调函数
request.addEventListener('load',function(event){
//对服务器加载下来的数据进行解析；
var geometry = scope.parse(event.target.responseText);
//解析完成后，发一个load事件，表示数据解析完成
scope.dispatchEvent({ type:'load',content: geometry });
//如果设置了回调函数，那么调用回调函数
if(callback) callback(geometry);
},false);
//加载过程中，向自身发送进度progress信息，信息中包含了已经加载的数据的字节数和文件总共的字节数
//通过两者的比例了解加载的进度；
request.addEventListener('progress',function(event){
//发送正在加载的信息，两个参数分别是已经加载了多少字节，总共多少字节
scope.dispatchEvent({ type:'progress',loader:event.loader,total: event.total});
},false);
//加载出错的监听器，加载的过程中也可能出错；
request.addEventListener('error',function(){
//加载出错后需要发布的错误消息
scope.dispatchEvent({ type:'error',message: 'could not load url'});
},false);
//初始化HTTP请求参数，例如： url和http方法，但是并不发送请求。
request.open('get',url,true);
//发送http请求，开始下载
request.send(null);
},
//data是从服务器传过来的数据，其实就是vtk文件中的文本数据；
parse:function(data){
//new 一个几何体
var geometry = new THREE.Geometry();
//定义一个内部函数vertex,用参数x,y,z生成一个顶点，并放入geometry的vertices数组中
function vertex(x,y,z){
geometry.vertices.push(new THREE.Vector3(x,y,z));
}
//定义一个面索引函数face3，将面的3个点的索引放入geometry的faces数组中；
function face3(x,y,z){
geometry.faces.push(new THREE.Face3(x,y,z));
}
//定义一个面索引函数face4，将面的四个点的索引放入；
function face4(a,b,c,d){
geometry.faces.push(new THREE.Face4(a,b,c,d));
}
//pattern存放模式字符串，result是临时变量；
var pattern,result;
//float float float ,pattern是一个正在表达式，能够匹配3个空格隔开的float
pattern = /([\+|\-]?[\d]+[\.][\d|\-|e]+)[ ]+([\+|\-]?[\d]+[\.][\d|\-|e]+)[ ]+([\+|\-]?[\d]+[\.][\d|\-|e]+)/g;
// exec是正则表达式的执行匹配函数，result返回一个包含3个字符串的数组，如果data读到了最后，那么result将返回null
// while 循环在data中，寻找符合正则表示式的数据，将符合条件的数据，转换为一个顶点
while ( ( result = pattern.exec( data ) ) != null ) {
// ["1.0 2.0 3.0", "1.0", "2.0", "3.0"]
// 将字符串转换为float，并放入geometry中
vertex( parseFloat( result[ 1 ] ), parseFloat( result[ 2 ] ), parseFloat( result[ 3 ] ) );
}
// 3 int int int,这里匹配面数据，如3 21216 21215 20399，这类数据是面索引数据
pattern = /3[ ]+([\d]+)[ ]+([\d]+)[ ]+([\d]+)/g;
// 取出data中的所有面索引数据，
while ( ( result = pattern.exec( data ) ) != null ) {
// ["3 1 2 3", "1", "2", "3"]
// 将面数据放入geometry的faces中
face3( parseInt( result[ 1 ] ), parseInt( result[ 2 ] ), parseInt( result[ 3 ] ) );
}
// 4 int int int int
// 这里是4个顶点一个面的情况，本例的vtk文件，没有这种情况
pattern = /4[ ]+([\d]+)[ ]+([\d]+)[ ]+([\d]+)[ ]+([\d]+)/g;
while ( ( result = pattern.exec( data ) ) != null ) {
// ["4 1 2 3 4", "1", "2", "3", "4"]
face4( parseInt( result[ 1 ] ), parseInt( result[ 2 ] ), parseInt( result[ 3 ] ), parseInt( result[ 4 ] ) );
}
// 这里的4个函数，在后面解释
geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.computeVertexNormals();
geometry.computeBoundingSphere();
return geometry;
}
}
