基于WebGL的3D技术在网页中的运用 ThingJS

最新推荐文章于 2020-12-14 21:28:05 发布

原创

最新推荐文章于 2020-12-14 21:28:05 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

博客介绍了WebGL作为3D绘图标准，其开发难度较高，导致Three.js等3D图形引擎库出现，进一步简化了3D开发。Three.js是一个基于WebGL的3D Javascript库，封装了多种3D元素。而ThingJS作为一个新兴的3D框架，针对物联网可视化，提供更高级别的API，降低了3D应用开发的复杂度，适合有JavaScript基础的开发者快速上手3D项目。

Three.js、ThingJS这些引擎库可以加载3D制作软件的模型，大幅度提高了制作效率，改变WebGL开发困难的局面，让Web开发者享受便捷的3D开发服务。三者的开发难度对比如下：

ThingJS（框架）< Three.js（引擎）< WebGL（接口）

3D绘图标准 - WebGL

WebGL是一种3D绘图标准，通过结合Javascript和OpenGL ES 2.0，可以为HTML5的Canvas标签提供硬件3D加速渲染，这样Web开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型。利用WebGL进行绘图的流程如下所示：
在这里插入图片描述

由此得知，原生 WebGL进行3D网页制作，其过程非常繁琐，开发难度很多，所使用的开发概念非常底层，严重影响WebGL的开发效率。因此，很多3D图形引擎库应运而生，直接使用Javascript脚本语言开发，将WebGL进行不同程度的封装，例如“three js“、“scenceJS”、“Oak3d”和“simjs”等，这些引擎库能够让用户更加方便地进行3D图形绘制和动画的制作。

3D图形引擎库 - Three.js

以Three.js为例，绘图的流程如下所示：
在这里插入图片描述

threejs是基于WebGL的 3D Javascript库，它封装了场景、相机、几何、3D模型加载器、灯光、材质、着色器、动画、粒子、数学工具等。这样的封装让用户能够更加直观的在网页中制作3D图形和动画。就像是搭乐高一样轻松。
在 threejs中场景、相机和渲染器是3D图形绘制的基础：场景是所有对象放置和展示的平台；相机决定图形展示的角度；渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。以下代码给出了图形绘制的具体过程，如果3D模型很复杂，可以在专门的3D绘图软件中进行绘制，然后由 three. js加载图形: