什么是三维虚拟现实？

虚拟现实，规范一点来讲，就是一种可以创建和体验虚拟世界的计算机仿真系统，大家可以把虚拟现实简单地理解为一个模拟出来的环境、一个“假的”三维立体的图像，我们看得到，但碰不到、摸不着。

“北京四度科技”可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维模型。

最早实现Web3D技术所有技术方案，基本都要依赖特定插件来实现，渲染效率、渲染质量都有些问题，并未全面流行起来。本篇文章既然不涉及使用插件方式实现三维模型在线预览，就不在展开详述历史上需要插件实现在线预览三维模型的相关技术。

说到WebGL，最容易联想到的是OpenGL或OpenGL ES。随着大多数浏览器对WebGL技术的支持，浏览器不需要安装任何插件也可以实现三维模型的在线预览和操作。

WebGL技术可以用于实现产品在线预览、WebVR、Web全景、室内装修在线预览、场景漫游、三维建模应用、3D导航...，本文主要科普基于WebGL技术实现产品的在线预览与交互，比如常见的数码产品、珠宝首饰、轿车等。

如果直接通过原生WebGL API和着色器语言来实现相对来说比较麻烦，通常来说需要通过一款三维引擎来实现，如果你是前端工程师你虽然学习JavaScript和HTML，但是你在做一些前端项目的时候会借助jquery、vuejs等库或框架，对于3D开发也是一样，需要一个封装了WebGL的库或引擎。

WebGL有多款三维引擎，国内应用最多的就是Three.js，Threejs的中文资料教程相对来说比较多，同时企业招聘WebGL工程师的时候，通常会要求你

如果想有更好的渲染效果，通常需要设置光照，如果光照设置的参数不恰当，渲染效果也会很大程度上打折扣，光照可以程序员来设置，也可美术设置。如果美术设置了光照信息，要注意导出三维模型时，模型文件格式的选择。主要有些三维模型格式并不会包含光照信息，比如stl和obj，而glTF、FBX等格式就可以包含光照信息。

一些产品可能会有一些动画动作，比如轿车、冰箱的开门动作。通常需要美术在三维软件中设置动画，导出模型后，程序员可以通过threejs的帧动画模块相关API解析播放这些开关门动作。要注意的是，选择能包含动画信息的三维模型格式，比如glTF、FBX、threejs格式，如果选择obj话，只能展示静态模型。

通常游戏领域的3D美术会谈到“次时代”或“PBR”的概念，你可以理解为一种建模流程。不同的流程导出的模型材质有所不同，需要threejs中不同的材质去解析。

传统的方式就是创建次时代模型，对应threejs中的材质是高光网格材质对象MeshPhongMaterial，通常贴图文件包含颜色贴图、法线贴图和高光贴图。

PBR相比次时代技术是一种更新的模型技术，对应threejs材质是物理网格材质MeshPhysicalMaterial或标准网格材质MeshStandardMaterial。通常贴图包含颜色贴图、法线贴图、金属度贴图、粗糙度贴图。

颜色贴图通过uv坐标映射在网格模型表面，如果整个网格模型都是同一种颜色，这种情况，美术不导出颜色贴图也没有关系，如果一个网格模型表面不同的区域颜色不同，那就有必要使用颜色贴图。

法线贴图主要作用是可以减少模型文件的体积，本质就是减少顶点数量，减少顶点数量可以降低文件大小，提高网络传播速度，减少CPU顶点相关的计算量。对于曲面很少的模型，主要以平面构成，有没有法线贴图无所谓，如果是产品表面是曲面，让美术烘培法线贴图是很必要的。

完成一个网页效果，通常需要UI先完成设计，然后前端使用代码实现。目前大多数的互联网公司都是有前端工程师和UI设计师的。对Web3D而言，则需要懂3D美术，和懂WebGL的技术。

对于产品展示而言需要的WebGL知识并不是非常深入，如果公司想节约成本，完全是可以培养前端去学习WebGL和threejs。

为了更好的效果，一个产品可能不仅仅实现在线预览，还需要设置一些交互，这样用户可以在线远程体验产品。比如一个产品有多种颜色系列，那么可以通过UI按钮通过点击来改变模型颜色；比如一个教程需要开门动作，可以设置一个UI按钮进行开关操作。

模型相比普通的网页文件比较大，目前技术和硬件条件下，还需要一定加载等待时间，为了更新的用户体验，可以通过一个进度条组件可视化的显示模型加载进度。

文章来源：北京四度科技