目录
- 前言
- OpenGL
- WebGL
- Three.js
- 输出一个DEMO
- GitHub
- END
前言
最近拖更蛮严重,因为对自己的要求高了一大截。
最近玩了个Three.js的Demo,也算了解了一波前端的动画方面的延伸,因为我公司主要业务为大数据,学了很多数据层的东西,动画方面没什么用武之地,但是我是喜欢动画效果的,哎,有没有种逼良为娼的感觉。
OpenGL
想入门WebGL的时候就查了很多文章,以前学c++的时候接触过一点OpenGL,查了一下两者的联系。有个图很形象。
(图出自: www.cnblogs.com/mirror-pc/p…WebGL 1.0 基于OpenGL ES 2.0(OpenGL ES是针对移动设备的OpenGL)。
复制代码
为什么是基于2.0呢?
因为OpenGL2.0之前没有着色器。从2.0之后开始才支持了这个非常重要的特性,“可编程着色器方法”。有没有颜色还是很重要的。
那么OpenGL是什么呢。OpenGL并不是一个API或者SDK,而是一组规范,Khronos Group团队维护这个规范(我也不知道是啥团队)。
这组规范定义了一组函数,这组函数传入的是什么参数,传出的是什么结果。由于只是这样的一组规范,所以只要合乎规范,谁都能以不同的方式实现函数。
了解到此感觉已经可以了。
WebGL
WebGL是大部分浏览器直接支持的一种3D绘图标准
复制代码
Google在这个网站上webglsamples.org/发布了一些WebGL做出的样品。
炫酷到让人心动,老司机已经感觉到这个东西没那么好学了。
Three.js
如果直接使用WebGL进行开发的话,十分吃力,然而这个Three.js 已经火了很多年了,Three.js 是WebGL的一个开源框架。封装了很多api,使用方便,节省我们的开发细节。
所以我打算通过Three.js 输出一片Demo来熟悉3D的Javascript.
Start
首先我们先搭建一个本地服务。
根目录下创建index.js服务启动文件,和一个项目文件夹www
然后我们开始写业务文件
想象屏幕里就是个小世界,你就是上帝,你先构建了个空间。
创建相机,就是你看小世界的角度
- PerspectiveCamera(fov, aspect, near, far)
- Fov – 相机的视锥体的垂直视野角
- Aspect – 相机视锥体的长宽比
- Near – 相机视锥体的近平面
- Far – 相机视锥体的远平面
渲染器决定了渲染的结果应该画在元素的什么元素上面,并且以怎样的方式来绘制。
就是个单纯的坐标轴3纬长度为200
创建地板,设置纹理参数。这里我选择了以一张grond草坪样式的纹理贴纸。
我们还需要设定一下地板的大小及位置
是的,scene.add方法就是将你创造的任何东西放到场景中去。
我们将渲染器插入到页面中去
开启渲染,看一下效果.
效果大概就是这个样子,一片黑,坐标轴到是有了
因为我们的材质没有光,上帝说要有光,对吧,刚才我的草坪哪去了。
再来看一下效果
空荡荡的草坪上有个坐标系。
这时候我们发现,我们无法移动视角。
孤单的场景,这时候上帝想加入一些东西,后来想想加个立方体也太没创意了,所以就去查了查加入个3D MAX的模型。
three.js支持计入obj数据模型及mlt贴图文件。我就去找了找,好看的模型超级贵,这年头版权意识都起来了,我也很尊重版权这个东西。所以弄了个没那么炫酷的、你们绝对猜不到的。电塔...
话不多说,看一下导入模型代码
看一下效果
看一下动效
有没有种回到苞米地的感觉。
GitHub
附上GitHub地址:
user-gold-cdn.xitu.io/2019/5/17/1…
END
经过初步了解,越发感觉这个东西深不见底,一切皆有可能。如果条件允许的话,我十分愿意在WebGL的海洋里肆意遨游。尤其是本人特别喜欢动画效果。
emmm,不要催我的DIV监控平台下..... 不妥更的作者不是好前端。
我对那篇文章的要求比较高,一直没构思好,这篇文章有一点是为了顶绩效。
先溜了,最近可能是高产母猪,绩效要写8篇。。。。