1、Computer Knowledge and Technology电脑知识与技术第18卷第36期(2022年12月)第18卷第36期(2022年12月)本栏目责任编辑：梁书工程应用基于Verge3D的3D技术在网页中的应用王辰启，王一帆，陈翔宇，梁创恒，刘亚萍（河南科技大学 软件工程学院，河南 洛阳 471003）摘要：随着网络的高速发展，网页的数量增长迅速，普通网页的2D页面使网络用户感到审美疲劳，外加传统页面庞大的图文信息量提高了用户浏览的负担，如何创新设计展示网络页面成为软件开发领域研究的重点。3D页面是软件开发领域未来发展的趋势。该论文围绕Verge3D插件，结合自身使用时获取的经验，
2、对该技术在3D网页的应用、发展与支持进行分析，旨在为使用者在3D网页开发中提供参考。关键词：Verge3D；网页；应用；3D技术中图分类号：TP311文献标识码：A文章编号：1009-3044(2022)36-0092-03开放科学（资源服务）标识码（OSID）:随着互联网技术的不断发展，网页技术的融合、创新与突破给Web3D发展提供了良好的条件，不仅是在传统的客户端类网页，还是在当下流行的手机端网页，渐渐地都可以看到3D图形的影子。现在，制作3D网页所流行的工具大部分为基于WebGL1的three.js引擎，采用JavaScript代码封装WebGL部分功能的库，Verge3D 进一步对 t
3、hree.js 进行封装，面向的用户更广，渲染三维模型更加简洁。1 3D技术发展与问题随着Web2.0的兴起，3D网页的相关开发与设计也在不断地探索与实践，3D网页自身的直观性、可交互性能够吸引更多的用户，推动其自身的经济价值的实现，WebGL的出现使得3D网页从理论变为了实践，但在3D网页进行制作的过程中，如果直接使用WebGL进行制作，由于其原理复杂，上手难度较大，会影响开发效率，同时提高设计与开发难度，影响设计开发的总体花费。因此，实际应用中，会采用对WebGL封装成 3D 图形引擎库来制作网页中的 3D 动画和模型。2 Verge3D技术支持分析Verge3D底层封装了three.js
4、、tween.js、ammo.js等JavaScript库，从源码上进行解析，还要回归到WebGL(Web Graphics Library)，即3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL Es 2.0结合在一起，通过OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。在WebGL应用过程中，省却了确保 3D 网页运行的插件的安装，能够直接通过 Javascript 的脚本语言来确保 Web交互式三维动画的制作与实现；其次，WebGL 的应用也能够对 3D 模型的渲染起到加速作用，其直接通过Open
5、GL 的接口，对图形硬件的加速功能 进行应用，从而提高模型和图形渲染的效果和质量2-3。Three.js则是对WebGL进行了封装，是运行在浏览器的 3D 引擎，用 JavaScript 编写的 WebGL 第三方库，相对于WebGL原生的API添加了更多的图形引擎，只需开发者调用相应的API就可以直接在浏览器中创建丰富的3D场景，无须再考虑如何进行场景的渲染4-5。如果说WebGL为了解决的网页插件和跨平台问题，three.js为了解决编程简单化和可视化问题，那么Verge3D就是为了解决以下问题：第一，网页3D实现度不高，材料系统以及物理渲染烦琐；第二，编程代码烦琐，对程序员本身要求较高，
6、适应群众较窄；第三，提供的接口较少，兼容主流软件较少；实现的3D页面通过以下几个特点解决：（1）PBR材质PBR（Physicallly-Based Rendering），指基于物理渲染材质。生活中物体显示出的颜色通常由两种因素决定：自身因素和外部因素，外部因素大部分是由光照决定；因此基于物体就需关注物体本身和光照两个方面。首先对于物体本身，考虑物体表面不可能是绝对光滑的平面，所以需要引入微表面理论，基于微表面进行研究；然后需要关注光的物理性质，光包括了颜色、光通量、光强度、光亮度等一系列概念，拥有诸如反射、折射等性质，还会产生诸如菲涅尔等效果；此外在光与物体交互时，光线可能发生遮挡，也可能被
7、吸收，要遵循能量守恒定律。所以概括来说就是在收稿日期：2022-04-12基金项目：本科生科研训练计划（SRTP），项目编号：202110464034作者简介：王辰启（2001），男，本科生，研究方向为软件工程、计算机科学、可视化。E-mail：http：/Tel：+86-551-65690963 65690964ISSN 1009-3044Computer Knowledge and Technology电脑知识与技术Vol.18,No.36,December202292DOI:10.14004/ki.ckt.2022.2291Computer Knowledge and Technolog
8、y电脑知识与技术第18卷第36期(2022年12月)第18卷第36期(2022年12月)工程应用本栏目责任编辑：梁书遵循微表面理论，光学特性和能量守恒的前提下，根据物体本身特性通过数学推算出的物体表面的属性集就叫作PBR材质。在应用的过程中，通常情况下会根据物体的金属度和粗糙度两个属性一同构建PBR材质，通过cooktorrence模型中提到的F、G、D来说明金属度和粗糙度是如何影响PBR材质的6。f()1,v=D()h F()v,h G()1,v,h4()n1()nv（2）Puzzles拼图编辑器Puzzles拼图编辑器，也称为可视化逻辑编辑器，基于谷歌开源项目Blockly进行的开发，方式
9、类似MIT的儿童编程语言Scratch,类似玩乐高积木一样一块块拼图构建出应用程序。每一个图形对应的都是代码块，如图1所示，原理则是将Blockly代码块中代码转换成JavaScript，Dart，Python或者XML代码，之后编译器对转换的代码进行处理，实现所需要的逻辑效果。7-9图1 Puzzles拼图编辑器（3）glTF格式glTF格式本质上是一个JSON文件。这一文件描述了整个3D场景的内容。它包含了对场景结构进行描述的场景图。场景中的3D对象通过场景节点引用网格进行定义。材质定义了3D对象的外观，动画定义了3D对象的变换操作(比如选择、平移操作)。蒙皮定义了3D对象如何进行骨骼变换
10、，相机定义了渲染程序的视锥体设置。场景对象将以数组的形式存储在JSON文件中。glTF格式的JSON部分顶级元素如图2所示：scene：glTF格式的场景结构描述条目。它通过引用node来定义场景图。node：场景图中的一个节点。它可以包含一个变换(比如旋转或平移)，引用更多的子结点。它可以引用网格和相机，以及描述网格变换的蒙皮。camera：定义了用于渲染场景的视锥体配置。mesh：描述了场景中出现的3D对象的网格数据。它引用的accessor对象可以用来访问真实的几何数据。它引用的material对象定义了3D对象的外观。skin：定义了用于蒙皮的参数，参数的值通过一个accessor对象
11、获得。animation：描述了一些节点如何随时间进行变换(比如旋转或平移)。accessor：一个访问任意数据的抽象数据源。被mesh、skin和animation元素使用来提供几何数据，蒙皮参数和基于时间的动画值。它通过引用一个bufferView对象，来引用实际的二进制数据。material：包含了定义3D对象外观的参数。它通常引用了用于3D对象渲染的texture对象。texture：定义了一个sampler对象和一个image对象。sampler对象定义了image对象在3D对象上的张贴方式10。需要注意的是，上述都是常规的glTF结构，但是在实际的应用场景中，一些几何文件、纹理文件
12、，包括图片文件都不在这个json文件中，因此需要外部引入，于是glTF也采用了和3d tiles一样的uri方式引入文件，除此之外glTF还可以读取和管理外部的文件，如二进制文件，图片文件等等。3 Verge3D制作3D网页在应用的过程中，Verge3D不用再和three.js一样需要学习大量的模型代码进行构建模型，也不需要关心在构建模型的同时构建动画等效果，只需要在自己所熟悉的三维设计工具中构建模型，最后发布到网页上进行动画的拼图实现即可。所以Verge3D在3D网页开发中可以分成两个部分，第一部分为3D模型构建部分，第二部分为3D模型部署在网页的部分：（1）模型构建在应用的过程中，Verg
13、e3D具有glTF这样的格式，再加上当前前端主流开发模式采用vue+node.js的开发方式，使得JSON文件在前端的数据交换变得十分的常见，所以Verge3D兼容市面上大部分3D建模开发工具，如Blender、3dMax、Maya等，人们可以借助这些图2 glTF的JSON结构93Computer Knowledge and Technology电脑知识与技术第18卷第36期(2022年12月)第18卷第36期(2022年12月)本栏目责任编辑：梁书工程应用3D建模开发工具，来实现整个网页制作过程中对场景的构建，摄像机的摆放，材质的渲染。模型的构建大概方式如下：第一、新建App相当于为3D模
14、型创建一个三维场景，该场景提供模板和模块。第二、在建模软件导入相关插件Verge3D提供了多种插件以满足多种建模软件的需要，提供glTF的导出格式，使得建模软件创建的数据能以JSON的格式传入到前段页面。第三、建立模型模型可直接通过软件进行建立，不必再利用代码实现模型对象的创建，同时可以直接设置好渲染器，摄像机，光源，物体的材质，世界的环境等。最后都会以JSON对象的形式导出为glTF文件。（2）网页部署在我们通过自己的三维设计模型工具成功导出glTF格式的模型后，可以对模型再次加工使其具有如动画，事件等功能，同时还要将该模型镶嵌在网页当中，大致方法如下：第一、拼图编程事件绑定将模型导出到Ve
15、rge3D后，便可对传入glTF文件进行解析，在网页端渲染成3D页面，Verge3D提供的拼图式编程，可以让人们为3D模型对象直接添加动画或者事件。第二、网页构建Verge3D支持将文件上传至云，也可以部署到本地服务器中，在我们自己的页面中，只需要在元素中调取对应url，就可以在个人的网页中实现3D效果。最终效果如图3所示。图3 3D网页效果展示4 Verge3D的优势总结Verge3D在3D网页开发中的优势十分明显，首先因其结合了多种3D网页编程的js库，功能上向下兼容，可拓展性更强，其次在这些基础上延伸出可视化编程，方便了零计算机基础的艺术家和高计算机基础的程序员进行3D网页开发。并且因其
16、具有PBR材质的渲染，所能达到的效果也比较惊人，外加简单的开发步骤，只需要导出为相对应的格式，就可以实现3D场景。5 结束语本文旨在让更多的人了解到3D网页的开发，对Verge3D的技术支持和开发方式进行了简单的分析，简单介绍了运用Verge3D与其他开发软件进行3D网页开发的异同，Verge3D作为一种工具，提高了设计师设计页面的开发效率。3D网页开发作为当前网络趋势，在更加未来的元宇宙构建当中，无疑会成为其核心力量，这也说明了3D网页还有很长的路要走，还有很多值得去学习。参考文献：1 聂帅,秦爽,麦文.基于WebGL技术三维模型呈现研究J.计算机产品与流通,2019(7):87-89.2 荣艳冬.基于WebGL的3D技术在网页中的运用J.信息安全与技术,2015,6(8):90-92.3 李倩.基于WebGL的3D技术在网页中的运用J.电子测试,2020(12):125-126.4 高齐琦,江婷,田世隆,等.基于Three.js的3D磁盘阵列设计J.计算机系统应用,2018,27(11):241-246.5 孟鹏.基于Three.js的建筑物室内三维模型重建J.科学技术创新,201