WebGL-Demo

最近拖更蛮严重，因为对自己的要求高了一大截。

最近玩了个Three.js的Demo，也算了解了一波前端的动画方面的延伸，因为我公司主要业务为大数据，学了很多数据层的东西，动画方面没什么用武之地，但是我是喜欢动画效果的，哎，有没有种逼良为娼的感觉。

OpenGL

想入门WebGL的时候就查了很多文章，以前学c++的时候接触过一点OpenGL，查了一下两者的联系。有个图很形象。

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篇。。。。