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

随着浏览器性能和网络带宽的大幅度提升，以及WebGL的实现，使得3D技术不再是桌面程序的专利，越来越多的Web应用使用3D技术。

对网站而言，Web3D技术运用，实现企业网站三维呈现，让企业形象更直观、更立体地展现给客户，打破传统平面展示模式，打造智慧、个性、创新的企业形象。目前政府有大量的新基建项目，如数字孪生、智慧城市、智慧园区、智慧工厂等等都涉及到了3D可视化技术。

今天就来给大家讲讲如何系统的学好WEB 3D可视化技术。

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

如果我们不通过threejs使用webgl势必逃不过底层知识:你必须全面了解着色器语法和自己编写顶点着色片元着色；但你使用了threejs显然可以便捷的逃过这些难懂的底层，对于传统js从业人员直接挑战的shader确实是有难度的。

学习three.js首先掌握基础概念什么是点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念，搞定一个最基础的场景和3d物体的显示。接着学会调试3D开发代码。接着即可深入上诉概念的每一个概念，详细了解官网文档该类的各种属性与概念。

接着3d渲染要真实性，肯定离不开PBR，详细了解什么是PBR，PBR基于物理的光照原理的渲染,。掌握什么是环境贴图、凹凸贴图、置换贴图、放射光、,环境贴图、金属贴图、粗糙度贴图等等，去打造真实的物体显示效果。接着掌握如何绘制粒子群，来绘制雨雪、落叶、星河等各种粒子效果，甚至产品的粒子效果。

掌握了这些，基本就算入了个小门了，接着就是要实现能和物体进行交互，如何选中与场景中的物体进行交互。而且还要能够掌握物理引擎让物体有真实的物理效果，例如重力，反弹、摩擦力等这样物体相互作用会更加真实。

接着就要开始真正进入WEBGL魔力的世界，掌握着色器语言，控制GPU渲染，掌握实现three.js底层封装的原理，能够图形渲染原理，掌握编写顶点着色器和片元着色器，来绘制动态飘扬的旗帜。以及编写动态的烟雾和乌云，水纹。

掌握了这些就可以写节日酷炫的烟花了，接着可以继续掌握各种后期合成效果，对整个渲染画面进行调整，例如打造闪烁的画面，雪花感的陈旧电视画面，又或者通过编写着色器，打造出水底世界的效果。

接着掌握曲线和物体运动的结合，在加上着色器编写，即可实现各种飞线、雷达、光墙特效。通过地理信息数据，获取建筑信息，可以生成建筑的框架和高度渲染出数字城市。当然日常网页也或有一些文字信息标识，想要文字标识也加上3d效果，就需要掌握css3d的渲染器来渲染。

当然如果需要掌握渲染精美真实的智慧园区的，就需要掌握建模技术，例如学习blender软件搭建模型和优化模型，才能最终输出到网页中，包括动画也可以先用blender做好在输出到网页中，不用辛苦的进行复杂动画的编写，可以可视化的制作。