产品三维模型在线预览

产品在线展示案例预览

玉镯在线预览：http://www.yanhuangxueyuan.com/3D/yuzhuo.html
汽车在线预览：http://www.yanhuangxueyuan.com/3D/car.html

Web3D技术历史

可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维模型。

插件

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

WebGL技术

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

WebGL应用

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

基于WebGL技术实现产品三维模型在线预览

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

Three.js引擎

WebGL有多款三维引擎，国内应用最多的就是Three.js，Threejs的中文资料教程相对来说比较多，同时企业招聘WebGL工程师的时候，通常会要求你掌握Threejs三维引擎。
three.js的更多教程关注郭隆邦技术博客。

技术流程

Threejs实现产品三维模型在线预览，通常来说需要美术和技术相互配合来完成。

1.美术

3D美术借助3dmax或Blender或其他三维软件进行三维建模，渲染烘培，然后导出包含几何体数据和材质数据文件，材质通常有一些贴图。

2.技术

WebGL程序员通过threejs三维引擎的加载器加载解析美术导出的模型文件。

真实度要求

产品的展示渲染效果，在真实度方面，往往和游戏或动漫不同，对要展示的三维模型通常要求真实度要高，既然要展示一个产品必要希望一个网页展品要和真实的产品尽可能一样，质感很强，这样才能起到更好的营销效果。

渲染效果

模型几何体信息创建

所谓模型几何体信息，也就是顶点数据。虽然threejs有很多绘制几何体的API，但是一个复杂的曲面，如果不是比较规则的球体或圆环，很难用程序去写，通常需要美术需要用可视化的方式建模，也就是使用三维软件，至于软件选择，看美术需要。

材质参数设置两种方式

渲染效果程序员可以通过threejs设置材质参数实现，也可以美术来设置并包含在导出的三维模型文件中。程序可能并不擅长渲染效果设置，或者说在threejs设置材质参数远没有三维模型中设置方便，通常来说是美术来设置决定决定渲染效果的材质参数，比如透明度、高光、金属度等参数。

光照参数设置

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

动画效果

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

次时代或PBR流程

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

次时代

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

PBR

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

比较

高光网格材质MeshPhongMaterial具有高光颜色和强度属性，而物理网格材质MeshPhysicalMaterial没有高光相关属性，对应的是是金属度和粗糙度属性。就贴图而言，高光强度对应的是高光贴图，金属度对应的是金属度贴图，粗糙度对应的是粗糙度贴图。

贴图

颜色贴图

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

法线贴图

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

团队

UI和前端

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

美术

美术方面，可以找一个懂UI设计的3D美术，短期内培养UI去学习3D美术，不太靠谱。如果资金充足可以专门招聘一个UI设计师和一个3D美术，一个做3D模型，一个做UI设计。

技术

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

交互

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

加载进度条

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