产品在线展示案例预览玉手镯在线预览：http://www.yanhuangxueyuan.co...汽车在线预览：http://www.yanhuangxueyuan.co...Web3D技术史可以通过插件或WebGL技术实现Web3D，在线网页预览和操作3D模型。插件是最先实现Web3D技术的所有技术方案，基本都是依靠特定的插件来实现，渲染效率和渲染质量都存在一些问题，还没有完全普及。由于本文不涉及使用插件实现3D模型在线预览，因此不再详述历史上需要插件实现3D模型在线预览的相关技术。WebGL技术提到WebGL，最有可能与OpenGL或OpenGLES联系在一起。由于大多数浏览器都支持WebGL技术，浏览器无需安装任何插件即可实现3D模型的在线预览和操作。WebGL应用WebGL技术可以实现产品在线预览、WebVR、Web全景、室内装修在线预览、场景漫游、3D建模应用、3D导航……本文主要科普一下基于WebGL技术实现在线预览和产品的互动。比如常见的数码产品、首饰、汽车等。直接通过原生的WebGLAPI和着色器语言实现基于WebGL技术的产品3D模型在线预览相对麻烦。一般来说，需要通过3D引擎来实现。如果你是前端工程师，你可能会学习JavaScript和HTML，但是在做一些前端项目的时候，会用到jquery，vuejs等库或者框架。3D开发也是如此。您需要一个封装WebGL的库或引擎。Three.js引擎WebGL有多种三维引擎??。Three.js在国内使用最广泛。Threejs的中文教程比较多。同时，公司招聘WebGL工程师时，通常要求你掌握Threejs三维引擎。更多three.js教程，关注郭龙邦的技术博客。技术流程Threejs实现产品3D模型的在线预览，通常需要美术和技术的配合才能完成。1.Art3D艺术使用3dmax或Blender或其他3D软件进行3D建模、渲染和烘焙，然后导出包含几何数据和材质数据的文件。材料通常有一些纹理。2、技术WebGL程序员通过threejs3D引擎的加载器加载解析艺术导出的模型文件。真实性要求产品展示的渲染效果在真实性上往往不同于游戏或动画。所展示的3D模型通常对真实性要求较高。既然要展示产品，那么网页展示就需要尽可能接近实物。可能是一样的，质感很强，这样才能达到更好的营销效果。渲染效果模型几何信息创建了所谓的模型几何信息，即顶点数据。虽然threejs有很多绘制几何的API，但是如果不是比较规则的球体或者环，很难写出复杂的曲面。通常，艺术需要通过视觉方式进行建模，即使用3D软件。至于软件选择取决于美术需要。有两种设置材质参数来渲染效果的方法。程序员可以通过threejs设置材质参数，也可以通过art设置材质参数并包含在导出的3D模型文件中。程序可能不擅长渲染效果设置，或者在threejs中设置材质参数远不如在3D模型中设置方便。一般来说，art是用来设置决定渲染效果的材质参数的，比如透明度、高光、金属度等参数。光照参数设置如果想要有更好的渲染效果，通常需要对光照进行设置。如果光照设置的参数不合适，渲染效果会大打折扣。照明可以由程序员或艺术家设置。如果为艺术家设置了光照信息，导出3D模型时要注意模型文件格式的选择。有些3D模型格式不包含光照信息，比如stl、obj，而glTF、FBX等格式可以包含光照信息。动画效果有些产品可能会有一些动画动作，比如汽车、冰箱的打开动作。通常，艺术家需要在3D软件中设置动画。导出模型后，程序员可以通过threejs的帧动画模块的相关API来分析播放这些开门关门动作。需要注意的是，选择可以包含动画信息的3D模型格式，比如glTF、FBX、threejs格式，如果选择obj，则只能显示静态模型。次世代或PBR流程通常游戏领域的3D美术都会讲到“次世代”或“PBR”的概念，你可以理解为建模过程。不同进程导出的模型材质不同，需要三个js中不同的材质来分析。下一代的传统方式是打造下一代车型。threejs中对应的材质是高亮网格材质对象MeshPhongMaterial。通常，纹理文件包含颜色贴图、法线贴图和高光贴图。与下一代技术相比，PBRPBR是一种更新的模型技术。对应的threejs材质为物理网格材质MeshPhysicalMaterial或者标准网格材质MeshStandardMaterial。通常贴图包括颜色贴图、法线贴图、金属贴图、粗糙度贴图。比较高光网格材质MeshPhongMaterial有高光颜色和强度属性，而物理网格材质MeshPhysicalMaterial没有高光相关属性，对应金属度和粗糙度属性。贴图方面，specularintensity对应specularmap，metalness对应metalnessmap，roughness对应roughnessmap。Texturecolormap颜色贴图通过uv坐标映射到网格模型的表面。如果整个网格模型都是同一种颜色，这种情况下美术师不导出色图也没关系。如果网格模型表面的不同区域有不同的颜色，那么就需要使用颜色贴图。法线贴图法线贴图的主要作用是减少模型文件的大小。本质是减少顶点的数量。减少顶点数可以减小文件大小，提高网络传输速度，减少与CPU顶点相关的计算量。对于曲面较少，主要由平面构成的模型，有无法线贴图无所谓。如果产品表面是曲面，需要美工烘焙法线贴图。团队UI和前端完成一个网页效果，通常需要先设计好UI，然后前端用代码实现。目前大部分互联网公司都有前端工程师和UI设计师。对于Web3D，你需要了解3D艺术和WebGL技术。美术方面，可以找懂UI设计的3D美术师。短时间内训练UI学会3D美术，不是很靠谱。如果资金充足，可以专门招聘一名UI设计师和一名3D美术师，一名负责3D建模，一名负责UI设计。技术不需要对产品展示的WebGL有很深的了解。如果公司想节省成本，完全可以培训前端学习WebGL和threejs。交互为了获得更好的效果，一个产品可能不仅要实现在线预览，还需要设置一些交互，让用户可以在线远程体验产品。例如，如果一个产品有多个颜色系列，您可以通过点击UI按钮更改模型的颜色；比如教程需要开门，可以设置一个UI按钮来进行开关操作。加载进度条模型比普通网页文件大。在目前的技术和硬件条件下，仍然需要一定的加载等待时间。为了更新用户体验，可以使用进度条组件来直观地显示模型加载进度。
