近期有个项目需要在客户端展示三维地质模型，网上搜集相关资料也无从下手，突然看到Three3D封装的WebGL，其3D渲染效果令我大为惊叹，于是乎开始了Three3D 的摸索。有兴趣的同学可以点击在线中文文档（http://techbrood.com/threejs/docs查看其演示效果。
在进行项目摸索前我下载了WebStorm,可以调试js前端的开发利器，部署过程不赘述，我用到了项目客户端所需要的一张等高线图，其原始图如下：
在其上提取若干随机点作为已知量，初始化坐标数组后，开始建立三维网格，应用强大的three3D相关的几何接口函数绘制了网格，其效果如下：
网格由给定的X、Y、Z总间隔数和网格步长决定，在三维空间内绘制线组成，既然网格能够绘成，那三维空间的几何对象不成问题了，在绘制网格时对平面坐标转成空间坐标着实头疼一整子，绘制的网格底面为XZ面，深度为Y轴，这样的能达到我的旋转目的。
确定网格后开始了利用给定平面散点值进行克里金插值及储层面三角网剖分算法的研究，这里需要说明，针对于前端的三角剖分和克里金插值算法都太稀少了，在无可奈何下只能按照网上的论文资料结合MatLab进行前期验证。
克里金插值算法较复杂，可以参考网上现有的基本公式资料，我是借助一个大神提供的克里金基本算法进行了MatLab验证，需要的同学可以留言，实现了平面插值。
在进行三角剖分时用了delaunay算法，首先利用给定的seamount数据坐标点进行算法验证，其坐标投影如下：
MatLab自带的三角剖分后的效果如下：
但有个严重的问题，地质储层是有边界范围界定的，于是研究了算法后改变其数据点的排列顺序，在加入边界后的三角剖分效果如下：
给定的四个矩形坐标顶点后，其建立的三角网还算差强人意，于是乎，在前端利用js开始了漫长的算法转译过程，最后在前端利用js达到了三角剖分的目的，效果如下：
最后，为了添加井筒轨迹，利用Three3D提供的闭合三维管，在本例中我只添加了直井，需要添加水平井的话需要得到水平轨迹的每个坐标点。
最后来个插值前后对比图：
