WebGL-Demo

目录

• 前言
• 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篇。。。。