前言：web可视化3D技术的学习路线

        这十年来web得到了快速的发展，随着html5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。还能通过webgl在网页中绘制高性能的3d图形。

        随着浏览器的性能和网络带宽的大幅度的题设，以及WEBGL的实现使得3d的技术不再是桌面程序的专利，越来越多的外部应用使用了3d技术。比如说对于网站而言，WEB3D的技术应用实现了企业网站的三维呈现，让企业形象更加直观，更立体的展现给客户，打破传统平面展示的模式，打造一个智慧个性的创新的企业形象。

        比如说腾讯的腾讯云服务器的官网，目前，政府有大量的新基建的项目。如数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等等都涉及了3d的可视化技术。

        那今天的话就来给大家讲：如何系统的学号WEB 3D可视化技术？

        我们可以先从three.js库入手，three.js是一个让用户通过javascript入手进入搭建webgl项目的类库。众所周知，学习webgl需要图形学的知识，而webgl需要通过学习 js 和 glsl 两种语言。

如果我们不通过threejs直接使用webgl需要的话，那么势必是从底层写起来，那这个时候必须全面的去了解 着色器 的语法，那么自己需要去编写 顶点着色器 和 片元着色器。

        但我们使用了threejs的话，那么在前期的话我们可以快捷的去逃过这些难懂的底层，特别是对于传统的前端还有js的从业人员来说，直接去挑战shader的话难度比较大。这和传统的前端其实是两种不一样的东西。

        开始学习threejs，首先需要掌握threejs里面的基本概念：
什么是点？什么是线？什么是面？什么是几何体？什么是材质物体、场景、相机、渲染器、动画、控制器？这些基础的概念。

        搞定了这些最基础的概念之后，我们就可以去搭建一个最基础的场景 和 3D 的物体来进行一个显示：
        这个时候开始学会怎么去调试像开发3D的代码；
        我们就可以去深入上述基础的概念；
        结合官网的文档去了解各个属性和概念；
        对材质、物体、几何体有更加深入的了解；

        3d的渲染肯定是要逼真，需要结合pbr的使用，需要详细的了解什么是pbr？pbr是基于物理的光照原理的渲染，需要掌握什么是环境贴图？什么是凹凸贴图？什么是置换贴图？什么是放射光？什么是环境贴图？什么是金属贴图？什么是粗糙度贴图？
        怎么通过这些方式把光照的效果：类如石子的凹凸、门面的凹凸、仅仅通过一个平面也能够显示出凹凸不平的效果 以及 折射不同角度的光照效果。

        学习如何打造粒子？比如我们要绘制雨雪、落叶、星河。
为了酷炫的特效我们可以将一个产品一个战斗机变成星光点点，然后又通过星光点点转换成战斗机。

        掌握了上面基本算入门。

        接着的话需要掌握：如何让我们的网页 跟我们的物体进行一个互动？如何选中场景中的物体进行交互？如何能够掌握物理引擎让物体有真实的物理效果？例如像：重力、反弹、摩擦力等物体这个相互作用，让他更加的真实。

        接着的话进入webgl的魔力世界：
        掌握着色技术的语言控制，用gpu的方式来进行渲染；
        掌握threejs怎么用底层去封装webgl；
        如何通过着色器编写顶点着色器？如何通过着色器编写片元着色器？
        了解整个图像渲染的原理，去绘制比如 动态飘扬的旗帜、衣服、烟雾、乌云、波涛汹涌的大海、水纹等...

        掌握了着色器，我们就可以写出各种酷炫的效果:像节日的烟花。继续深入可以让整个场景进行后期的加工，
        例如说：
        可以打造出像生化危机里面闪烁的怪异的画面、
        一个带雪花的陈旧感的画面、编写着色器打造出水底观看的效果；掌握曲线如何与物体运动相结合，从指定点飞到另外一点的各种飞线、雷达以及光强效果；

通过获取一些地理信息数据，通过数据去封装生成建筑信息生成建筑的框架以及逼真的数字城市；

        我们需要掌握css的3D的渲染器对应的渲染页面的web的元素和html内容进行互动，进行3d的效果的展示、3d的互动，跟随物体的变化而变化；

        如果要打造智慧园区、智慧工厂，把结构图绘制起来，这个时候需要去学习专门的建模技术，比如学习blender软件进行建模去搭建我们的模型，最终将其优化的输出到网页中；因为3D搭建出来的模型直接输出来的话并不是最佳的，需要进行压缩、优化；需要掌握如何进行优化模型、优化我们的代码？

        可以使用blender去掌握制作各种动画，以前是通过编写代码编写的动画，我们可以使用blender软件去将我们复杂的动画先做好，做好之后再到处到网页中，这样的话就可以做出各种各样的复杂动画，或者是轨迹动画以及我们的一些人物动画、物体动画都可以制作出来。如此，就可以做出各种酷炫的3D可视化页面。

        现在就开始three.js的征程吧！