webgl坐标转换_使用WebGL技术进行后处理结果显示

利用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模型就加载出来了。

0e34f8801ccc776f5dffb9b623ddcbd6.png

17aa7b2efcf865193daab33556d40249.png

利用WebGL技术,同时也可以通过解析模型获取模型数据,将CAD的数据转换成库能够识别的数据,并对数据轻量化,优化渲染,能够加载大型的模型。比如解析UG模型数据,加载轻量化模型。同时,结合相关网站应用可以开发出各类3D网页应用。我们公司开发的在线水泵设计工具AIPump、在线风机设计工具AIFan就是利用了该项技术,有兴趣的朋友可以进行在线使用哦。手机、平板都可以访问。http://www.rhotheta.cn/goods.html

9a7d67b481bd630d60d7db6745be91b8.png

94467e7ad409522325373626a66d0487.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值