Web页面三维动态展示技术研究与应用

陈燕红 古丽米拉·克孜尔别克 谢卫国 吕永杰

摘 要： 现代展示设计呈现出从静态展示转向动态呈现、从被动观察转向主动体验、从现实空间扩展到虚拟空间的发展趋势。为了顺应现代展示的发展趋势，从数字化交互的角度出发，阐述基于实物三维模型、WebGL和HTML5的Web页面三维动态展示技术，并基于此实现了新疆民族手工艺品三维动态展示系统，详细介绍了实现该系统所涉及的关键问题。结果表明，用户使用该系统可以从各个角度观察物品，增强了用户和产品间的互动以及直接观察的真实感。

关键词： WebGL； 动态网页； 三维动态展示； 手工艺品； 交互设计； 虚拟现实技术

中图分类号： TN911.73?34 文献标识码： A 文章编号： 1004?373X（2018）20?0024?04

Abstract： The modern display design has a development trend of turning from static display to dynamic presentation， from passive observation to active experience， and from real space to virtual space. Proceeding from the perspective of digital interaction， a Web page 3D dynamic display technology based on the physical 3D model， WebGL and HTML5 is elaborated， based on the technology， the 3D dynamic display system of Xinjiang ethnic handicrafts is implemented， and the key issues involved in the implementation of the system are discussed in detail， so as to comply with the development trend of modern display. The results show that the system can make users observe articles from various angles， which enhances the interaction between users and products and sense of reality of direct observation.

Keywords： WebGL； dynamic Web page； 3D dynamic display； handicraft； interactive design； virtual reality technology

0 引 言

目前，产品三维动态展示已成为现代工业设计体系中的重要组成部分，是一个多学科交叉的研究领域，在其发展的过程中受经济、科技、艺术水平的影响比较显著。尤其是近年来体验经济背景下，交互设计和虚拟现实技术的兴起，现代展示设计呈现出从静态展示转向动态呈现、从被动观察转向主动体验、从现实空间扩展到虚拟空间的发展趋势。

本文从数字化交互的角度出发，研究基于实物三维模型、WebGL、动态网页技术的Web页面三维动态展示关键技术。文章详细介绍了基于相关技术实现的新疆民族手工艺品三维動态展示系统。用户使用该系统可以从各个角度观察物品，增强了用户和产品间的互动以及直接观察的真实感。

1 三维动态展示技术的优势

随着虚拟现实技术中三维展示技术的不断发展，越来越多的行业开始应用这种更加直观真实的方式来对自己的公司以及产品进行宣传。三维动态展示技术具有传统宣传方式所没有的优势：

1） 操作方便。利用鼠标或键盘，可随意控制浏览角度，随心所欲地实现360°旋转，上下左右、前后大小都可调节，让用户体验身临其境的奇妙感受，从而充分满足用户的观赏需求。

2） 功能强大。质量较高的三维全景摄影采用人机交互的多媒体界面和信息导航交互方式，再在这些展示中加上动画、声音等多媒体元素，打造全新的三维展示手法。

3） 身临其境。三维模型展示，配合高精度图片贴图技术，多倍放大、图像不失真、清晰明了、栩栩如生的展示对象，完整保留住场景的真实性，给客户在各个角度、不同位置全面地展示出所有景致。

2 Web页面三维展示核心技术

2.1 WebGL

WebGL是一种把JavaScript和OpenGL ES 结合在一起的3D绘图标准。通过增加OpenGL ES 的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。这样WebGL技术就免去了开发网页专用渲染插件的麻烦，可以实现在网页中不用插件即可展示三维模型。WebGL完美地解决了现有的网页交互式三维动画的两个重要问题：无需任何浏览器插件支持，通过HTML脚本本身即可实现网页三维动画交互的制作；用标准的、跨平台的、统一的OpenGL接口实现了底层的图形硬件加速功能进行的图形渲染。

2.2 Three.js

JavaScript编写的WebGL第三方库Three.js是一款运行在浏览器中的3D引擎并且具有很多3D显示功能。开发者可以用它创建包括摄影机、光影、材质等各种对象的三维场景。Three.js虽然只是WebGL的第三方库，但却是支撑三维展示的脊梁。

1） 创建组件

在Three.js中用场景（scene）、相机（camera）和渲染器（renderer）这三个组件就能把需要展示的物体渲染到网页中。场景就相当于容器，所有开发者要展示的物品都要放到场景中。相机决定了在场景的哪一个角度把物品展示出来，就如同人的眼睛一样，在不同的角度看到的东西自然不同。渲染器决定渲染结果应该画在页面的哪个元素上、怎样去画、用什么方式去画。这三者的关系其实就是，场景存放物体，相机拍场景，取一个合适的角度将实物拍下来，然后渲染器把相机拍下的景传到浏览器上显示。创建三个组件的代码如下：

var scene = new THREE.Scene（）；

var camera = new THREE.PerspectiveCamera（75，

window.innerWidth/window.innerHeight， 0.1， 1 000）；

var renderer = new THREE.WebGLRenderer（）；

创建场景相机和渲染器，设置渲染器的大小为窗口的内宽度，也就是内容区的宽度：

renderer.setSize（window.innerWidth， window.innerHeight）；

document.body.appendChild（renderer.domElement）；

2） 添加物体到场景

场景、相机和渲染器创建完成后就可以添加实物模型到场景中。如要将一个几何体加入到场景中，代码如下：

var geometry = new THREE.CubeGeometry（1，1，1）；

var material = new THREE.MeshBasicMaterial（{color： 0x00ff00}）；

var cube = new THREE.Mesh（geometry， material）；

scene.add（cube）；

3） 场景渲染

添加完实物模型后就剩下最后一步渲染了。渲染就是使用渲染器结合相机和场景来展现需要展示的物品的画面，核心代码为：

render（ scene， camera， renderTarget， forceClear ）

其中，renderTarget為渲染的目标，默认是渲染到前面定义的render变量中；forceClear在每次绘制之前都将画布的内容清除，即让自动清除标志autoClear为false。

3 系统实现

本文基于三维动态展示技术实现了新疆民族手工艺品三维动态展示系统。系统主要功能有产品缩略图展示、产品三维动态展示以及后台各类信息管理等。下面主要介绍系统实现过程中涉及到的关键问题。

3.1 技术方案

新疆民族手工艺品三维动态展示系统主要分为前台平面展示缩略图、三维动态展示和后台系统管理三个部分。系统使用的主要开发工具和主要技术有3ds MAX，WebGL，JSP语言以及MySQL数据库。具体技术方案如下：

1） 实物三维建模是三维动态展示技术中很重要的技术环节。目前，实物三维建模方法主要有三种：利用三维软件建模、通过仪器设备测量建模、利用图像或者视频来建模。

2） 基于WebGL技术和动态网页技术构建软件系统。

3） 利用Three.js技术嵌入三维实物模型。

4） 对系统进行调试，并完善系统的设计。

3.2 三维模型嵌入Web页面

在Web页面三维动态展示中，三维实物模型构建是非常重要的步骤。直接选择用三维扫描仪来扫描所要展示的实物，然后用3D制图软件建立产品的三维模型，如图1所示。并通过Photoshop软件进行后期的制图，将做好的图片留作模型贴图，如图2所示。最后，利用WebGL技术将渲染好的三维实物模型（见图3）嵌入Web页面。

3.3 产品三维动态展示

系统将所有实物三维模型整理到一起进行产品分类展示并提供缩略图展示，如图4所示。用户单击某个模型的缩略图后，会打开三维动态展示页面。在该页面中，用户可以随意控制浏览角度，随心所欲地进行上下、左右、前后、大小调节，从而体验身临其境的奇妙感受，如图5所示。

4 结 论

本文基于数字化模型并结合交互设计和虚拟现实技术，阐述了Web页面三维动态展示关键技术，介绍了实现新疆民族手工艺品三维动态展示系统的技术要点。但该系统还无法满足实际应用要求。在后续研究中，结合虚拟现实技术，进一步完善系统三维展示效果。同时，系统将增加手机APP客户端，从而方便用户随时随地体验真实的三维动态展示。虽然该系统的应用和推广还面临很多问题和困难，但它的优势和应用前景十分乐观。该系统能让一个从未到过新疆的出游者身临其境地感受新疆各民族手工艺品的特色与文化魅力。

参考文献

[1] 魏书寒，孙麒.基于HTML5和WebGL的三维智慧社区管理系统的设计与研究[J].工业控制计算机，2017，30（5）：139?140.

WEI Shuhan， SUN Qi. 3D intelligent community management system based on HTML5 and WebGL [J]. Industrial control computer， 2017， 30（5）： 139?140.

[2] 霍冬，郑伟华，盛步云.基于WebGL的机械产品三维展示技术研究[J].制造业自动化，2013，35（18）：73?77.

HUO Dong， ZHENG Weihua， SHENG Buyun. A research of mechanical products′ 3D display technology based on WebGL [J]. Manufacturing automation， 2013， 35（18）： 73?77.

[3] 张玄，黄蔚.3D机房运维可视化系统的设计与实现[J].软件，2016，37（7）：89?93.

ZHANG Xuan， HUANG Wei. Design and implementation of 3D data room operation and maintenance visualization system [J]. Computer engineering & software， 2016， 37（7）： 89?93.

[4] 刘爱华，韩勇，张小垒，等.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息，2012，10（5）：79?81.

LIU Aihua， HAN Yong， ZHANG Xiaolei， et al. Research and implementation of network 3D visualization based on WebGL technology [J]. Geospatial information， 2012， 10（5）： 79?81.

[5] 郑华，宿景芳.面向Web的三维模型生成与处理技术[J].现代电子技术，2015，38（24）：83?86.

ZHENG Hua， SU Jingfang. Web?oriented 3D model generation and processing technology [J]. Modern electronics technique， 2015， 38（24）： 83?86.

[6] 王磊，高珏，金野，等.基于Web3D无插件的三维模型展示的研究[J].计算机技术与发展，2015，25（4）：217?220.

WANG Lei， GAO Jue， JIN Ye， et al. Research on three?dimensional model display based on Web3D without plug?in [J]. Computer technology and development， 2015， 25（4）： 217?220.

[7] 陈滔滔，江晓宇，温佩贤，等.基于Web3D的人脸模型定制系统[J].系统仿真学报，2014，26（2）：382?388.

CHEN Taotao， JIANG Xiaoyu， WEN Peixian， et al. Face model customization system based on Web3D [J]. Journal of system simulation， 2014， 26（2）： 382?388.

[8] 方路平，李国鹏，洪文杰，等.基于WebGL的医学图像三维可视化研究[J].计算机系统应用，2013，22（9）：25?30.

FANG Luping， LI Guopeng， HONG Wenjie， et al. 3D visualization of medical images based on WebGL [J]. Computer systems & applications， 2013， 22（9）： 25?30.

[9] 罗怀荣，石军锋.基于WebGL 3D技术的可视化温室环境监测系统设计[J].江苏农业科学，2017，45（7）：189?192.

LUO Huairong， SHI Junfeng. Design of visual greenhouse environment monitoring system based on WebGL 3D technology [J]. Jiangsu agricultural sciences， 2017， 45（7）： 189?192.

[10] 吴志强，祝忠明，刘巍，等.机构知识库三维模型检索与展示技术研究与实践[J].数据分析与知识发现，2017，1（1）：73?80.

WU Zhiqiang， ZHU Zhongming， LIU Wei， et al. Retrieving 3D models from institutional repository [J]. Data analysis and knowledge discovery， 2017， 1（1）： 73?80.