摘 要

随着虚拟现实技术和互联网日新月异的发展，网络用户对于网页浏览产品的体验要求越来越高。网页展示的产品需要给用户带来更加沉浸，更加逼真，更加直观的体验。而且商家将产品信息发布到网页上时，往往只能向用户展示二维的信息，比如文字或者图片。只有这些文字参数和二维的图片是不能为用户带来一种身临其境的体验的。网页展示产品的效果大不如实体店中产品展示的效果，用户可以拿起产品从各个角度去观察。

基于网络的虚拟现实技术，是互联网与虚拟现实（Virtual Reality）技术结合的产物，其目的是在互联网上建立三维的虚拟场景，让用户乐意拥有身临其境的体验。在网上电子商务方面，将其销售产品展示做成网页3D展示的形式，一定能引来更多顾客的注意。人们还可以通过3D虚拟现实技术，根据一些建筑物的图片、建筑设计的图纸等资料，可以重建以前的名胜古迹并让人们在其中游览。使用3D虚拟现实技术实现网络上的3D效果展示相当于创建一个3D场景，这种技术尤其适合线上虚拟展厅、建筑房地产虚拟漫游展示等。

本文对基于Web的产品3D效果展示及实现研究的研究背景及研究现状进行了剖析，从而了解了该问题的重要性，并结合实际情况，对主流的两种三维虚拟展示技术和几种网页3D开发技术进行了分析和比较。提出了采用Blender建模软件及Blend4web来实现网上虚拟商品展示的设计方案，用户可以从各个角度观察产品，增强了用户和产品之间的互动以及直接观察的真实感，并大大降低了产品3D效果网页展示的复杂度。

关键词：虚拟现实；Web3D；建模；商品展示

Abstract

With the rapid development of virtual reality technology and the Internet, web users have higher and higher requirements for the experience of web browsing products. The products displayed on the web need to bring more immersive, realistic and intuitive experience to users. Moreover, when the product information is published to the web page, the merchants can only display two-dimensional information, such as text or pictures, to the users. Only these text parameters and two-dimensional pictures cannot bring the user an immersive experience. The effect of product display on the webpage is much less than that in the physical store. Users can pick up the product and observe it from all angles.

Web-based Virtual Reality technology is the product of the combination of the Internet and Virtual Reality technology. Its purpose is to establish a three-dimensional Virtual scene on the Internet, so that users are willing to have an immersive experience. In the aspect of online e-commerce, the display of its sales products in the form of webpage 3D display is sure to attract more customers' attention. People can also use 3D virtual reality technology, according to the pictures of some buildings, architectural design drawings and other materials, can rebuild the historical sites and let people visit them. Using 3D virtual reality technology to realize the 3D effect display on the network is equivalent to creating a 3D scene. This technology is especially suitable for online virtual exhibition hall and virtual tour display of real estate construction.

In this thesis, the research background and research status of web-based product 3D effect display and implementation are analyzed, so as to understand the importance of this problem. Combined with the actual situation, two mainstream 3D virtual display technologies and several Web page 3D development technologies are analyzed and compared. In this thesis, Blender modeling software and Blend4web are adopted to realize the design scheme of online virtual commodity display. Users can observe the products from all angles, which enhances the interaction between users and products as well as the sense of reality of direct observation, and greatly reduces the complexity of product 3D effect webpage display.

Keywords: Virtual reality；Web3D；Modeling；Commodity display

目 录

第1章 绪论 1

1.1研究背景及意义 1

1.2国内外研究现状 1

1.2.1 国内三维虚拟展示研究现状 1

1.2.2 国外三维虚拟展示研究现状 2

1.3研究内容及思路 2

1.3.1研究内容 2

1.3.2研究重难点 2

1.3.3论文结构 3

第2章 商品三维虚拟展示技术分析 5

2.1基于几何模型的商品三维虚拟展示技术 5

2.1.1建模技术 5

2.1.2技术实现 6

2.2基于照片的商品三维虚拟展示技术 6

2.2.1全景技术 6

2.2.2技术实现 6

2.3二者比较 6

2.4 本章小结 7

第3章 实现方法 8

3.1 建模软件的选择 8

3.1.1 3ds Max 8

3.1.2 Blender 8

3.2 Web页面三维展示核心技术 8

3.2.1 VRML 9

3.2.2 X3D 9

3.2.3 Java3D 9

3.2.4 Cult3D 10

3.2.5 Virtools 10

3.2.6 WebMax 10

3.2.7 WebGL 10

3.2.8 Blend4web 11

3.3 本章小结 12

第4章 模型的建立与优化 13

4.1 模型的建立 13

4.1.1 杯体建模 13

4.1.2 杯盖建模 14

4.1.3 其他建模 14

4.2 材质与贴图 15

4.2.1杯体材质贴图 15

4.2.2杯盖材质贴图 15

4.2.3其他材质贴图 16

4.3 物理模拟 17

4.4 环境与渲染 18

4.5 网页展示 18

4.6本章小结 19

第5章 总结与展望 20

5.1 全文总结 20

5.2 研究展望 20

参考文献 22

附录 24

致谢 27

第1章 绪论

1.1研究背景及意义

随着中国互联网的发展和计算机的普及，电子商务的迅猛发展，人们已经接受了一种全新的消费方式即网络消费，网络消费有方便、快捷、实惠的特点，这些特点适应了人们快节奏的生活。网络购物被更多的人所接受，传统销售行业也受到了网络技术发展的波及，开始在这种新的商业模式中谋求发展。企业商家需要利用网络平台的便利，转变营销思路，然后在电子商务领域取得一些进展。

当前的网页产品展示大多都是二维的，顾客只能从文字、图片中去获得产品的信息，让用户感觉不到真实性，从而顾客在下单购买产品后拿到手上会有巨大的反差，接受不了的就只能选择退货。但是如果商家使用了网络虚拟技术来展示他们的产品，让顾客能拥有更加真实且立体的视觉感，而且顾客能对产品进行更为细致的观察，可以仔细比对产品的材质、款型。比起传统的二维展示，三维展示就能让顾客有更多的想象空间。

3D展示系统能让用户对产品进行360度全方位的观察，它能够和顾客进行交互、承载了更多的信息、让顾客感到更加真实。二维的图片和文字都是不可能达到这种效果的。对产品进行网页3D展示在一定程度上让网上浏览变得更加人性化，在顾客浏览网页的同时，给顾客增添了一点的趣味性。从而能在提高顾客购买欲望的同时降低顾客的退货率。因此，解决产品的网页3D效果虚拟展示的问题迫在眉睫，其在文化上、技术上、产品设计理念上都极具可行性。

1.2国内外研究现状

1.2.1 国内三维虚拟展示研究现状

早在2009年，徐晓华就看出了网络数字商品展示的不足，对两种主要的虚拟现实展示技术进行了研究和分析比较。提出了两种网上虚拟商品展示的设计方案，解决了电子商务领域实现三维展示的关键技术问题^[1]。2011年，王海萍把主要的基于网络的虚拟展示方法分为了三种，并且分别阐述了其中典型的技术的原理及其特点，最后得出Web3D将在更多领域成为一种主要技术的结论^[2]。2014年洪英汉对网页中网络虚拟展示技术的概念及其实现方法进行了总结，在他设计的三维展示系统中，用户仅仅通过鼠标就能对产品进行细致的观察，解决了传统的二维展示方法不够真实，信息不可靠的问题，并且提高了网站的趣味性，让电子商务的发展前景更为广阔^[3]。2018年官平对网页产品三维效果展示技术进行了简要介绍，并分析了几项主流的虚拟展示技术，研究了网页3D虚拟展示技术的应用方法^[4]。

1.2.2 国外三维虚拟展示研究现状

2012年XingrninXU简要介绍了虚拟现实技术和Web 3D技术，并阐述了以下8种典型的Web 3D开发技术:VRML、X3D、Java 3D、Cult 3D、ShockWave 3D、Virtools、perspective和WebMax^[5]。2013年Pedro Sánchez Luis通过使用web应用程序并提供物理现实的模拟空间视图来方便访问大学设施，为用户提供任何类型的困难(残疾、语言技能等)，以及与ULL的可访问交互^[6]。2016年Bayona Sussy提出了一种基于Web3D技术的虚拟现实技术在高校院系建筑结构中的应用。包括使用3D图形引擎来实现允许交互式三维部署的实际功能^[7]。2018年Wen Zhou本文提出了一种轻量级的可视化框架S-LPM框架，该框架包括一种基于Dijkstra的网格分割操作和一种新的基于体素的重复检测/删除操作，以有效地在Web浏览器中显示大型三维模型^[8]。

1.3研究内容及思路

1.3.1研究内容

通过分析和比对两种主流的商品三维虚拟展示技术，并对建模软件进行选择，对网页3D原理及其技术的研究提出设计方案。

利用开源三维软件Blender进行建模并且进行网页展示，还要实现一定的交互性：

1. 鼠标左击不放，移动鼠标模型旋转的结果。
2. 鼠标右击不放，移动鼠标模型移动的结果。
3. 鼠标滚动相机角度远近拉伸，场景中的模型由小变大。

本次选择建立的3D场景的预想图为图1.1所示，除此之外本文还选择了在电子商务领域十分常见的电脑机箱。此次我对第一个模型重点进行了优化，所以后文会对第一个模型的制作及优化进行详细讲解。

表1.1 模型优化

1.3.2研究重难点

（1）选择正确且简便的建模思路构建模型，并尽可能的精细。

（2）对建立好的模型进行材质贴图，调用渲染器进行渲染，让模型看起来更加逼真。

（3）将优化好的模型进行导出完成网页展示，并拥有一定的交互性。

图1.1 预想图

1.3.3论文结构

（1）说明了本文的研究背景并了解其研究的现状，明确了研究的意义，根据研究内容规划论文的组织结构如图1.2所示。

（2）对目前两种主流的商品三维虚拟展示技术进行研究，并对两种方案进行分析和比较，确定了大致的设计方向。

（3）比较了主流的建模软件和Web 3D实现方法，提出了使用Blender和Blend4web来实现产品3D效果网页展示的方案。

（4）详细描述了方案的执行过程和步骤，完成了产品的3D模型的建立优化以及网页展示。

（5）对全文进行总结，对研究不够透彻的地方做出说明，并且提出以后这个方向的研究展望。

图1.2 论文组织结构图

第2章 商品三维虚拟展示技术分析

随着互联网科技日新月异的发展，电子商务中出现了一条非常重要的销售渠道——网页。它在展示商品方面有着实体店无法比拟的优势。有了电子商务网站商家们就能在网站上展示自己的商品，让天南地北的顾客都能在网站上进行商品的采购。但现在的电子商务网站也存在着明显的不足，网页里的商品展示的仅仅有产品的图片及其文字描述，有些还有简单的二维动画。但这些展示的信息不能给予顾客真实感和立体感，与实物还是有一定的差距，顾客不能亲自触摸商品，这样的展示不能让顾客了解到产品的结构，功能，从而大大降低了顾客的购买率，阻碍了电子商务的发展。因此亟需找到一种能够向顾客传递更多的信息的展示方法，能让顾客在网页浏览商品时更有真实感，这样产品才能更加吸引顾客的注意力^[9]。

这几年，虚拟现实技术成为了行业内的发展方向。利用这种技术用户能在网页里360度观察产品，自由的与产品进行交互^[10]。目前已经实际应用的主流技术分为两类，一类是基于几何模型商品三维虚拟展示技术，另一类基于照片的商品三维虚拟展示技术。

2.1基于几何模型的商品三维虚拟展示技术

2.1.1建模技术

目前基于网页的虚拟现实技术包括Director、Viewpoint、Cult3D、VRML、Java 3D 等， 且支持建模开发工具3ds Max、Blender、Maya、 Autocad 等。它们都是从各个角度实现在网页上或各种文档格式中建立互动的三维模型，用以表现完美的三维实体。它能嵌入3D 互动效果的编辑及播放功能，并可以把图像、文本、声音、动画等这些多媒体元素非常方便而有机的结合起来，创造出快速、互动的三维场景^[1]。

图2. 1 基于几何模型的商品三维虚拟展示技术

2.1.2技术实现

这种技术设计思路大致是：首先收集产品的信息或者草图，利用3ds Max或Blender等建模工具构建3D模型，再对产品的模型进行一系列的优化使其更加的逼真，比如在模型表面加上材质贴图，对模型进行物理模拟，然后对场景的灯光进行环境纹理的设置，再利用Viewpoint、Java 3D及VRML等集成软件进行场景、灯光的设置，并定制交互动作，用户在最终设计的网页中能直观而清晰的看到产品的三维效果图，并且能够与之进行一系列的交互动作。

2.2基于照片的商品三维虚拟展示技术

2.2.1全景技术

全景技术也称为全景摄影或虚拟实景技术，是目前全球范围内迅速发展并逐步流行的一种视觉新技术，是基于系列静态图像的虚拟现实技术。这种技术需要使用一台照相机对产品进行360度的全方位无死角的拍摄，再将照片导入到软件中，利用编程代码或者进行设置拼接成一个全息的影响，然后在互联网上显示出来，用户能够使用鼠标来控制镜头的方向，可以通过鼠标的操作来左移、右移镜头，甚至由远及近的观察。还能使用特殊的鱼眼镜头来对产品拍摄两张图像，即一张水平视角，一张垂直视角。利用这种技术，不但可以全方位无死角的观察产品，还可以上下浏览，真正实现全方位的三维互动效果。