WebGL-入门DEMO

3,322 阅读4分钟

目录

  • 前言
  • 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地址:

p1-jj.byteimg.com/tos-cn-i-t2…

END

经过初步了解,越发感觉这个东西深不见底,一切皆有可能。如果条件允许的话,我十分愿意在WebGL的海洋里肆意遨游。尤其是本人特别喜欢动画效果。

emmm,不要催我的DIV监控平台下..... 不妥更的作者不是好前端。

我对那篇文章的要求比较高,一直没构思好,这篇文章有一点是为了顶绩效。

先溜了,最近可能是高产母猪,绩效要写8篇。。。。