大家好,今天小编来为大家解答以下的问题，关于2D与1D融合 | vivo官网三维互动应用开发实战解析，这个很多人还不知道，现在让我们一起来看看吧！
目前业界普遍认为前端细分的垂直方向包括：有利于前后端分离和工程化改进的NodeJS、专注于用户界面展示的小前端、提供一站式解决方案的中后端，以及丰富数据展示能力（2D、3D）的数据可视化，以及为未来用户提供丰富交互体验的交互内容——AR、VR、3D等……
随着前端领域的细分，前端工程师不再简单地负责堆叠网页和实现一些交互，还可以在可视化领域实现一些很酷的效果。下图是vivo官网3D数据可视化的实际演示。在线体验地址
vivo官网3D数据可视化实用插画数据可视化：顾名思义，它以可视化图形、图表的形式将数据呈现给用户，让数据更加直观、客观、有说服力。上面的例子使用了渲染引擎来解析和渲染模型数据，最终呈现给移动设备。由于显示的图像更加立体、交互性更强，因此属于3D数据可视化的范畴。
今天我们就来看看前端的一个详细分支——3D数据可视化。本文主要分为：
前言2D数据可视化3D（2D+1D）数据可视化vivo官网3D应用实战总结希望通过五章的介绍和讨论，让大家能够对数据可视化和3D数据可视化有更清晰的认识。
二、 2D数据可视化
2.1 什么是2D数据可视化？
2D数据可视化是指利用二维平面图表来组织、处理和呈现数据的方式。说到图表，大家首先想到的可能就是条形图、折线图等我们日常使用的图表图形。例如：
注：图片来自网络（Google 图片搜索）。其实除了上述形式之外，还有一些很酷的图表展示形式如：气泡图、面积图、省份地图、词云、瀑布图、漏斗图、热力图、GIS地图等。
2.2 2D数据可视化应用场景
二维数据可视化广泛应用于工作和生活中。最简单的比如Excel数据图表，XMind、Visio都是数据可视化的具体应用场景。还有一些稍微复杂一点的，比如数据可视化大屏、后台数据报表、地图等。
注：图片来自网络（Google 图片搜索）。随着数据可视化的应用场景越来越广泛，数据可以以更加丰富的可视化形式呈现，让用户更加轻松便捷地获取和理解数据所传达的信息。
三、3D(2D+1D)数据可视化
3.1 什么是3D数据可视化？
3D数据可视化可以理解为在2D数据可视化的基础上增加了Z轴维度，将数据呈现从二维平面延伸到三维结构。它是一种新的数据管理、分析和交互方式，可以实现实时反射、实时折射、动态阴影等3D图像的高质量、逼真的实时渲染。
3D数据可视化与2D数据可视化（一般数据可视化）的主要区别在于它更加立体、更加真实、更具沉浸感。我们拍张照片来感受一下：
注：图片来自互联网（https://www.hightopo.com）
3.2 3D数据可视化应用场景
3D数据可视化因其知识传递速度快、数据信息展示更直观、信息更简单，使用户更容易理解数据和空间知识传播。展示。
目前可见3D数据可视化应用领域包括智慧城市、汽车、手机模型展示等。
注：图片来自网络（https://www.hightopo.com）。相信随着浏览器对WebGL的支持越来越广泛，随着5G的普及，前端3D可视化的应用领域将会越来越广泛。
3.3 3D数据可视化解决方案
了解了3D数据可视化的概念和应用场景之后，我们再来看看目前业界主流的3D数据可视化解决方案：WebGL。
下图是WebGL的渲染流程图：
注：图片来自vivo官网前端团队。 WebGL（Web Graphics Library）是基于OpenGL ES规范的浏览器实现。上图中的WebGL渲染流程可以理解为：
1）JavaScript：处理着色器所需的顶点坐标、法向量、颜色、纹理等信息，并将这些数据提供给顶点着色器
2）顶点着色器：接收JavaScript传递过来的顶点信息，将顶点绘制到对应的坐标
3)光栅化阶段：用空像素填充图形内部区域
4）片元着色器：填充图形内部像素的颜色信息
5)渲染：渲染到Canvas对象
WebGL不仅可以绘制2D数据可视化图形图表，而且还是3D绘图标准。该绘图技术标准结合了JavaScript和OpenGL ES 2.0。通过绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样我们就可以使用系统显卡在浏览器中更流畅地显示3D场景和模型。
四、vivo官网3D应用实战
对于用户来说，网购最大的痛点就是所见即所得。目前，主流网上商城普遍通过图片或视频的方式展示产品特征，这些二维的信息展示方式无法让用户感到舒适。了解产品信息。有了3D显示场景，用户可以通过手机型号的3D显示，更加直观、清晰地了解手机的产品细节和功能，从而增加用户的购买欲望。
我们来看看vivo官网实现3D显示时的技术选型和实施方案。
4.1 可视化工具介绍及技术选型
目前业界有很多好用的3D可视化开发工具，方便开发3D可视化需求。 3D数据可视化主要包括两个方面：渲染库和模型。我们分别从3D渲染库和模型来了解一下3D可视化领域的工具和官网的技术选型。
4.1.1 渲染库选型
目前3D数据可视化的主流解决方案是基于WebGL的。那么既然有了WebGL，为什么还需要渲染库呢？
这是因为WebGL的门槛比较高，需要理解和掌握比较多的数学知识。虽然WebGL提供了面向前端的API，但WebGL和前端开发本质上是两个完全不同的方向，知识上几乎没有重叠。
使用渲染库来实现模型渲染可以大大降低我们的学习成本，并且可以完成几乎所有WebGL可以实现的功能。一些常用的3D渲染库有：ThreeJs、BabylonJS、SceneJS和CesiumJs；几种不同3D渲染库对比：注：图片来自vivo官网前端团队。通过对比我们可以发现，上述几个渲染库各有千秋。但在做手机模型3D渲染时，对光照、阴影和反射的关注度比较高，不需要碰撞检测等功能。因此，基于上述比较，我们选择ThreeJs作为3D渲染的底层库来实现手机模型的3D渲染。
4.1.2 模型选型
了解了渲染库之后，我们来谈谈常用的3D模型格式：OBJ、FBX和GLTF。
模型文件实际上是一个数据集合，包含顶点坐标、索引、UV、法线、节点关系、材质、纹理、动画等信息。无论模型的格式如何，其本质都是对上述信息的排列和组织。各种模型之间的区别无非就是它们的组织方式，有的使用纯文本（OBJ），有的使用json（GLTF），有的使用二进制（FBX）。
几种不同模型文件对比：注：图片来自vivo官网前端团队。通过比较，我们发现几种模型格式适用于不同的场景：
1）OBJ模型对动画支持不是特别友好，手机需要对模型进行一些拆解动画才能进行3D显示。
2）FBX由于不同引擎的解析规范不同，不同引擎的渲染效果差异很大。
3）GLTF（GLB）模型格式具有较高的可扩展性，得到ThreeJs、Babylonjs等WebGL渲染引擎的良好支持。
4.2 3D场景搭建及方案实施
我们发现，如果想要将3D场景中的物体显示得足够逼真，摄像头和灯光是两个必不可少的要素。在实际业务场景中，还有模型颜色切换、模型旋转、缩放、全景场景等逻辑需要我们处理。
4.2.1 场景相机
首先我们来了解一下相机。 3D 场景中的摄像机的功能类似于现实生活中的人眼。当相机拍摄物体时，需要设置相机的位置和角度，虚拟相机还需要设置投影方式。位置和角度更容易让我们理解。先介绍一下投影方法：投影的方法有两种，分别是正投影和透视投影：
4.2.1.1 正投影
正投影：正投影，也称为平行投影。这种投影的观看体积是一个长方体，即长方体，如图所示。正投影的最大特点之一是，无论物体距离相机多远，投影物体的尺寸都保持不变。
注：图片来自网络（http://m.dingjisc.com）。正射投影通常用于建筑蓝图绘制、计算机辅助设计等平面图形中。这些行业要求投影物体的尺寸及其相互角度保持不变，以用于建筑或制造。物体比例正确。
4.2.1.2 透视投影
透视投影：透视投影符合人们的心理习惯，即离视点近的物体大，离视点远的物体小，远的物体消失，成为消失点。其视体积类似于一个顶部和底部被切除的棱镜，即棱镜。
注：图片来自网络（https://blog.csdn.net）。透视投影通常用于动画、视觉模拟和许多其他具有真实反射的方面。相比之下，透视投影更接近我们的视觉感知。因此，在官网手机模型的3D展示中，我们选择透视投影来计算相机的投影矩阵。
4.2.2 场景光照为了让我们渲染的3D物体看起来更加自然逼真，模拟各种光照的效果非常重要。
3D场景中物体的光照由光源、介质（物体的材质）和反射类型决定，而反射类型又由物体的材质特性决定。根据不同的光源特性，我们可以将光源分为4种不同类型。
他们是环境光（Ambient Light）、平行光（Directional Light）、点光源（Positional Light）。。我们分别来了解一下环境光（Ambient Light）、定向光（Directional Light）和点光源（Positional Light）。
注：图片来自网络（https://blog.csdn.net）。从图中我们可以看到：
平行光是向某个方向照射的光。光中的每个光子都与其他光子平行移动。例如，太阳光可以认为是平行光，只能照亮物体表面的一部分。
平行光除了颜色之外，还具有方向属性，是定向光。当定向光与物体相互作用时，会产生两种反射效果：漫反射和镜面反射，具体取决于物体的材质。 3D场景中最终的反射效果是环境光、定向光、漫反射和镜面反射的叠加。
点光源表示光线从一点发出，向各个方向发出。这种光在我们的现实生活中最常用。例如，灯泡向各个方向发光，可以被视为点光源。
点光源不仅有方向属性，还有位置属性。因此，要计算点光源的照度，首先要根据光源的位置和物体表面的相对位置来确定方向，然后像平行光一样，计算出光源方向与物体表面的夹角。光线方向和物体表面法线方向。
环境光指物体所在三维空间的自然光。它充满了整个空间，并且各处的光强度都是相同的。环境光没有方向性，因此物体表面反射环境光的效果仅与环境光本身和材料的反射率有关。
4.2.3 模型旋转实现
有了摄像头和灯光，可以更真实地将模型呈现给用户，但需要处理模型本身的一些交互操作，如模型旋转、颜色切换等。
在3D 场景中实现模型旋转有两种方法：
(1) 3D场景中的相机不动，旋转的3D实体就是3D模型。
注：图片来自网络（https://webglfundamentals.org）（2）旋转相机，即3D模型不动，相机围绕模型旋转
注：图片来自网络（https://webglfundamentals.org）。在现实生活中，将物体移动到视野中并不是正确的方法，因为在现实生活中，通常会移动相机来拍摄构建的物体。所以我们选择将相机移动即实现方式（1）来实现3D实体的旋转交互。
4.2.4 模型颜色切换的模型格式采用GLB模型（方便后期固化上传），因此每种颜色对应一个新的GLB文件。
每次切换模型时，都需要重新解析文件，但由于纹理和其他材质可以在不同颜色的模型之间共享，因此即使在切换颜色时重新加载模型并解析也会比初始加载快得多。因此，考虑到后期的固化成本和复用性，切换颜色并重新加载模型文件是一种比较优雅的处理方式。
注：图片来自vivo官网前端团队4.2.5 全景场景搭建，为了让用户在浏览产品3D页面时有更强的沉浸式体验。我们使用全景模式。当用户在全景模式下旋转和缩放手机时，相应的背景元素也会随着相机的旋转和缩放而旋转和缩放。这样，用户在浏览时就会有更强的交互体验。
ThreeJs中的全景模式可以通过加载纹理贴图来实现：
让纹理=等待Loader.loadImg(panoramicImg)
纹理.编码=THREE.sRGBEncoding
让sphereGeometry=new THREE.SphereGeometry(3000, 160, 160)
sphereGeometry.scale(-1, 1, 1)
让sphereMaterial=new THREE.MeshBasicMaterial({ map: 纹理})
让sphere=new THREE.Mesh(sphereGeometry, sphereMaterial)
//设置材质对象的纹理贴图
this.bgMap=球体
this.stage.scene.add(this.bgMap) 上面的代码首先创建了一个球面几何SphereGeometry，并将创建的球面几何网格在x轴上反转：sphereGeometry.scale(-1, 1, 1)，这样所有的脸指向内。然后加载图像数据创建材质并添加贴图： new THREE.MeshBasicMaterial({map:texture}); new THREE.Mesh(sphereGeometry, sphereMaterial) 最终实现全景效果。
4.3 性能优化
4.3.1 模型压缩
为了提高页面初始化的加载速度以及切换颜色模型时的解析速度，我们在完成模型后，需要对模型进行压缩，以减小模型的体积。
Google有一个针对GLB模型的压缩库Draco 3D，可以压缩模型的体积而不影响模型的显示效果。您可以使用GLTF Pipeline 命令行来压缩GLTF 模型。
压缩的步骤：1.安装gltf-pipeline
npm install -g gltf-pipeline2，将gltf转换为glb文件
将glTF 转换为glb
gltf-管道-i 模型.gltf -o 模型.glb
gltf-pipeline -i model.gltf -b 压缩后，glb文件的大小会减少80%左右，因此加载速度和效果呈现会比原来的GLTF文件更快。
注：图片来自网络（https://cesium.com）4.3.2 模型解压缩ThreeJs有压缩型号：的解压方案
//实例化一个加载器
const 加载器=new GLTFLoader();
//可选：提供DRACOLoader实例来解码压缩的网格数据
const dracoLoader=new DRACOLoader();
dracoLoader.setDecoderPath( "/examples/js/libs/draco/" );
loader.setDRACOLoader(dracoLoader);首先构建一个GLTFLoader对象，然后在模型加载过程中，设置dracoLoader解析文件的路径，dracoLoader会解析压缩后的模型文件。最后将解析后的文件返回给脚本进行渲染。
五、总结
本文首先介绍2D数据可视化。通过将平面图表数据可视化形式拉伸为三维结构，衍生出3D数据可视化相关内容，以及官网基于ThreeJs的实际3D应用开发。
但WebGL 关于3D 渲染的知识远远不止于此。这里只是介绍3D模型中常用的几种渲染元素，比如灯光、摄像机等。其实光反射还有与物体材质相关的类型：漫反射、镜面反射。相机还有其他类型的相机模型：例如：正交相机、立方相机、立体相机等，由于篇幅原因，我们不再详细介绍。有兴趣的同学可以去（WebGL）官网查看学习相关内容。
作者：vivo官网商城前端团队-倪怀发
关于2D与1D融合 | vivo官网三维互动应用开发实战解析，的介绍到此结束，希望对大家有所帮助。
【2D与1D融合 | vivo官网三维互动应用开发实战解析】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
这个vivo官网的3D应用开发真是太酷了！
有15位网友表示赞同！
我一直觉得手机能做出更丰富的3D体验，现在终于实现了吗？
有19位网友表示赞同！
学习2D+1D这个技术是不是很难啊？能轻松上手吗？
有13位网友表示赞同！
期待看到更多vivo官网上的Web 3D应用！
有5位网友表示赞同！
这样科技感满满的网站一定很有未来吧！
有7位网友表示赞同！
什么时候这些3D技术会应用到手机App上呢？
有14位网友表示赞同！
这个开发教程是不是要收费啊？
有18位网友表示赞同！
希望vivo官网能开设更多关于3D技术的课程啊！
有9位网友表示赞同！
学习完这种技术，可以自己做一些创意的3D应用吗？
有12位网友表示赞同！
2D和1D分别代表什么？有点不明白。
有18位网友表示赞同！
这样的Web 3D应用开发会对网页体验带来全新的改变吗？
有15位网友表示赞同！
这个vivo官网的Web 3D应用是不是很耗电啊？
有14位网友表示赞同！
希望这种技术能够普及，让更多人可以尝试制作3D内容。
有20位网友表示赞同！
2D+1D这个技术是不是比较新的？有前辈分享经验吗？
有7位网友表示赞同！
看完这些应用之后，感觉未来科技真的太发达了！
有5位网友表示赞同！
这种技术的发展对于游戏、动画行业有什么影响？
有9位网友表示赞同！
希望vivo官网开发的Web 3D应用能够更多样化。
有5位网友表示赞同！
这个培训教程适合什么年龄段的人观看呢？
有13位网友表示赞同！
这种技术可以用来设计室内家具吗？挺好奇的！
有7位网友表示赞同！
我已经报名了这次的线上训练课程，期待学习新的技能！
有10位网友表示赞同！