摘要：次时代传统的方式就是创建次时代模型，对应中的材质是高光网格材质对象，通常贴图文件包含颜色贴图法线贴图和高光贴图。
产品在线展示案例预览
玉镯在线预览：http://www.yanhuangxueyuan.co...
汽车在线预览：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，通常贴图文件包含颜色贴图、法线贴图和高光贴图。
PBRPBR相比次时代技术是一种更新的模型技术，对应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按钮进行开关操作。
加载进度条模型相比普通的网页文件比较大，目前技术和硬件条件下，还需要一定加载等待时间，为了更新的用户体验，可以通过一个进度条组件可视化的显示模型加载进度。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97995.html
摘要：次时代传统的方式就是创建次时代模型，对应中的材质是高光网格材质对象，通常贴图文件包含颜色贴图法线贴图和高光贴图。 产品在线展示案例预览 玉镯在线预览：http://www.yanhuangxueyuan.co... 汽车在线预览：http://www.yanhuangxueyuan.co... Web3D技术历史 可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维...
摘要：支持大疆所有型号飞机照片建模支持贴近摄影测量采集的模型支持传统航拍影像支持倾斜摄影图像处理我们准备了张航测数据，航测数据由大疆搭载睿铂使用航迹大师环绕航拍获取。古建筑精细化建模此次精细化建模是通过大疆采集，通过摆动镜头拍摄多角度图像。 ...
摘要：基于大数据技术的安防数据预警研判分析，搭建去中心结构化数据汇聚平台，实现每年约亿条视频图片结构化数据的存储分析。以服务运营系统为抓手，协助大数据中心，对其云服务商的服务过程与产出云使用单位的云资源使用，执行统一监管。UCloud 2021年上半年营收同比增长65.20%，连续10个季度强劲增长。2021年，数字化转型正不断从宏观概念向产业价值链中的各个场景、各个微观模块加速渗透；驱动生产方式...
摘要：甲方爸爸的企业，部门繁多，流程复杂，为了提升业务流程的效率，同时优化企业自身的管理，提出了一个将其现有业务流程进行三维可视化的需求。利用获取模型数据，然后三行代码便可建造一个流程图系统。 惯例先扯点闲篇 记得15年那会儿，我给人讲WebGL，还得从头科普，三令五申要用Chrome，末了再强调一句，记得启用WebGL功能。今天，但凡懂点儿Web开发的，都会来一句网页3D用WebGL。 怎...
摘要：使用开发监控大屏平台，即物联网开发平台。在应用编辑器中，搭建实时气象数据监控面板。设置完成后，该文字组件将显示气象监测设备上报的温度值。 1、概述 本实践案例中使用LoRa气象监测设备监测气象信息，上报温度、湿度、大气压、经度、纬度等数据，并使用IoT Studio平台搭建监控大屏，展...
阅读 1372·2021-11-25 09:43
阅读 3133·2021-11-22 09:34
阅读 2286·2019-08-30 15:54
阅读 2779·2019-08-30 15:53
阅读 914·2019-08-30 15:53
阅读 601·2019-08-30 15:52
阅读 2396·2019-08-26 13:36
阅读 682·2019-08-26 12:16
