three.js 在地质学上的应用
2018-01-24 16:43
148 查看
近期有个项目需要在客户端展示三维地质模型,网上搜集相关资料也无从下手,突然看到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提供的闭合三维管,在本例中我只添加了直井,需要添加水平井的话需要得到水平轨迹的每个坐标点。
最后来个插值前后对比图:
可能色标取值设定的有些问题,不过形态还是很接近的,暂且算成功吧。通过此次试验,不得不佩服技术的进步,让我一个对计算机图形学一窍不通的人只用提供的接口函数就能达到想要的目的,感兴趣的同学可以自己搜索Three3D的Demo。
在进行项目摸索前我下载了WebStorm,可以调试js前端的开发利器,部署过程不赘述,我用到了项目客户端所需要的一张等高线图,其原始图如下:
在其上提取若干随机点作为已知量,初始化坐标数组后,开始建立三维网格,应用强大的three3D相关的几何接口函数绘制了网格,其效果如下:
网格由给定的X、Y、Z总间隔数和网格步长决定,在三维空间内绘制线组成,既然网格能够绘成,那三维空间的几何对象不成问题了,在绘制网格时对平面坐标转成空间坐标着实头疼一整子,绘制的网格底面为XZ面,深度为Y轴,这样的能达到我的旋转目的。
确定网格后开始了利用给定平面散点值进行克里金插值及储层面三角网剖分算法的研究,这里需要说明,针对于前端的三角剖分和克里金插值算法都太稀少了,在无可奈何下只能按照网上的论文资料结合MatLab进行前期验证。
克里金插值算法较复杂,可以参考网上现有的基本公式资料,我是借助一个大神提供的克里金基本算法进行了MatLab验证,需要的同学可以留言,实现了平面插值。
在进行三角剖分时用了delaunay算法,首先利用给定的seamount数据坐标点进行算法验证,其坐标投影如下:
MatLab自带的三角剖分后的效果如下:
但有个严重的问题,地质储层是有边界范围界定的,于是研究了算法后改变其数据点的排列顺序,在加入边界后的三角剖分效果如下:
给定的四个矩形坐标顶点后,其建立的三角网还算差强人意,于是乎,在前端利用js开始了漫长的算法转译过程,最后在前端利用js达到了三角剖分的目的,效果如下:
最后对建立的矩形网,也就是按照空间坐标系的网格进行剖分,其实现如下:
最后应用建立的克里金插值模型对网格上的每个顶点进行插值计算,建立三维坐标数组。
创建彩虹色插值色标,最后对插值后的三维曲线添加至场景中,效果如下:
这里需要注意添加场景光源应该添加平行光源,在效果内为了展示,我添加了前后 和上 的平行光,下方光源没添加于是显示效果为黑色纹理。旋转一个面就可看到差别。
最后,为了添加井筒轨迹,利用Three3D提供的闭合三维管,在本例中我只添加了直井,需要添加水平井的话需要得到水平轨迹的每个坐标点。
最后来个插值前后对比图:
可能色标取值设定的有些问题,不过形态还是很接近的,暂且算成功吧。通过此次试验,不得不佩服技术的进步,让我一个对计算机图形学一窍不通的人只用提供的接口函数就能达到想要的目的,感兴趣的同学可以自己搜索Three3D的Demo。
相关文章推荐
- Three.js - 网页3D应用的普及已经指日可待了
- three.js 07-05 之 Points 多组粒子系统组合应用
- 【H5 3D应用开发】Blender 制作导出Obj模型带纹理到three.js(二)
- 【H5 3D应用开发】 Three.js 播放json模型动画并切换动画(一)
- 浅谈three.js中的needsUpdate的应用
- js浏览器本地存储store.js介绍及应用
- js快捷键的应用
- 在Node.js应用中使用Redis的方法简介
- linaCharts开发笔记:Three.js基础
- 【腾讯Bugly干货分享】WebVR如此近-three.js的WebVR示例解析
- three.js 入门案例详解
- JS中的“theElement in dangerousElements“中in方法的应用
- JS代码大全(三)高级应用
- three.js 灯光的代替模型
- three.js 源码注释(七十八)extras/geometries/IcosahedronGeometry.js
- JSON是什么?JSON和JS对象的区别和JSON的基本应用
- 开始使用THREE.JS
- js和jsp获取网页的访问来源及其应用
- Backbone.js 的最佳应用场景有哪些?
- js的一些应用技巧