产品三维模型在线预览

产品在线展现案例预览

1. 玉镯在线预览：http://www.yanhuangxueyuan.co...
2. 汽车在线预览：http://www.yanhuangxueyuan.co...

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按钮进行开关操做。

加载进度条

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