基于three.js的3d引擎怎么做

JavaScript035

基于three.js的3d引擎怎么做,第1张

threejs本身就是3D引擎,最核心的几套算法都已经实现了(向量,矩阵建模等)

如果你要再在threejs之上做一些工作,我个人认为应该是这几个方面

首先是场景生产器,需要对模型的加载进行优化,例如场景的依赖加载,近景优先加载,远景采用模糊的建模节省资源,等完全加载之后再展示,具体你可以看看低网速一些3D游戏的做法,自适应分辨率等等等,通过算法压缩模型构建的三维点坐标等

然后就是抗锯齿算法,碰撞算法等,另外还有内存优化等(c++必做的工作,案例就是暴雪经典的HASH算法等)

然后就是材质的集成和优化,例如一些光照特效等

前段时间公司给了一个新需求就是写一个装修室内3D全景效果图,于是开始我的three.js开发之旅。

作为一个前端小白,突然接触three.js&webgl除了懵逼还是懵逼,不过作为一个技术人对于挑战也许就是软件开发中真正的乐趣,至少不会埋头调试一遍又一遍重复的页面数据,上上下下左左右右BABA......简直枯燥到极点。不过three.js&webgl不得不说给我打开了新的世界,接下来我就简单讲述一下我的学习之旅。

Three.js 是一款运行在浏览器中的 3D 引擎,是JavaScript编写的WebGL第三方库,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,three.js内部也是webgl的封装,封装了大量了webgl API ,让比较繁琐的webgl更加简便。

WebGL(全写Web Graphics Library)是一种3D绘图协议,它让可以让开发进一步去了解图形渲染,Webgl是JavaScript和OpenGL ES 2.0合并出来的升级版,通过webgl可以让前端开发者们脱离开css渲染,可以了解更加底层的渲染,WebGL也可以为HTML5 Canvas提供硬件3D加速渲染,webgl是通过系统显卡来在浏览器里更流畅地展示3D场景和模型,加入shader(着色器)来对图形渲染,学习webgl需要具备相应的图形学算法,属于目前图形渲染开发的高级技术之一。目前webgl也运用在游戏,视频特效,包含untiy3D也是集成webgl。

three.js中主要由摄像机 ,场景 ,渲染器 , 资源加载器,素材组成

webgl中的所有东西都是基于摄像机去展示的,可以利用摄像头的视角形成对3d视图观测视角,比如鱼眼视角,从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机:

摄像机有了但是为了让景物可以更好的展现,这时候我们就需要一个展示景物的场景,three.js也为我们封装好了,如下所示可以创建一个场景:

渲染器是webgl的渲染启动开关,他可以调用render方式把场景渲染到摄像机。

three.js加载资源不同我们常见的html一样,直接通过src属性加载,而是通过TextureLoader.load来加载资源。

素材常见的包含网格,灯光等许多元素下面我就举个例子

http://www.sunql.top/webgldemo/index.html

https://github.com/sunql0827/webgldemo.git

https://gitee.com/sunql-hugh/webgldemo.git

通过这次基于three.js的webgl全景图开发之旅为我对视图渲染打开了一道新的大门,不过webgl的厉害之处还有很多很多是我还未涉及到了,以后还需要更加努力了。