初识webGL three.js

Posted 2021-03-29 图灵智能创新团队

01

what?!!

WebGL

WebGL(Web GraphicsLibrary)是一种3D绘图协议，这种绘图技术标准允许把javascript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为html5 Canvas提供硬件3D加速渲染。                                                             来源：百度百科

简而言之：webGL是前端借助系统显卡在浏览器中搭建3D场景和模型的一种绘图协议

02

webGL&three.js

Three.js

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。但由于构建场景时需要具备一些基本的图形学知识，初学者往往需要花时间去认识相关的一些概念

03

before

好奇

当我浏览官网API时 我以为我可以实现这样

04

start

首先在官网配置好three.js资源文件 并设置相应的html文件中  设置画布canvas和引用js文件

初始化

小科普

这里使用的是透视相机PerspectiveCamera 下图是透视相机中的FOV解析

参数解析

视野角度（FOV）

视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。

长宽比(aspect ratio)

字面意思 用你创建的物体的宽除以它的高的值。

近截面（near）和远截面（far)

当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中

下一步

构建好three.js基础三剑客之后

这样就可以自由发挥了

下一步便是添加物品 移动相机 进行渲染 

创建物体

限于笔者的技术水平 这里只创建了一个5X5X5的正方体

动起来

设置animate 动画循环函数  让立方体动起来

自适应一下

适应一下 不同的浏览器窗口 使物体不会出现变形 

05

Later

完成以上的搭建之后 小demo就已经成型了 直接上图

真实

感触：从刚开始，我以为可以完成一个帅气的机械人的骨骼动画，结果却是一个立方体，就很真实。确实是这样，three.js涉及的知识点较多，真正进入深入的学习，需要从点线面开始。本文只是带大家去了解一下webGL和three.js，也作为认识前端可视化方向的一个切入点。

图灵人工智能创新团队

Turing Club