基于jQuery框架的产品3D展示技术的研究与实现

洪英汉　黄彬超

摘要：本文介绍了产品3D展示的优点，分析了搭建网站所要应用的技术，以及如何利用jQuery技术实现产品的3D展示，为商家降低开发成本。产品的3D展示为网站本身增添了不少特色，而且也更凸显出产品独有的特点，为客户提供全方位的产品信息，从而对提高产品的销售率，也为未来电子商务的发展有着重要的意义，前景是非常可观的。

关键词：3D展示； 网站； jQuery；

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2015）28-0144-02

1 搭建产品3D展示网站的意义

1.1研究意义

随着技术的进步，网络应用的发展，企业把自家产品放置网上，通过互联网强大的功能，企业可以方便地做到和顾客及时的沟通，且由原来的“一对多”转向“一对一”，针对性更加有效。目前，我们从购物网站所了解看到的产品展示，都是简单地用图片列出，虽然图片拍摄的角度不同，能够基本的体现出产品的外貌特性，但是还是缺乏灵活、清晰、炫酷的展示效果，产品有形而无神，难免会缺乏吸引力，以至很难抓住客户的心，所以我们就需要有一个很好的平台，相对完美的体现产品的特性，使产品形神合一，留住客户的心。

1.2 产品3D展示的优势

产品3D展示的提出就是为了解决产品不生动的问题，制造一个良好而又灵活清晰的平台，360°展现自己独一无二的产品，为客户提供多元的全方位的产品信息，冲击客户的眼球。产品3D展示能够有效地帮助客户了解产品的整体到细节、从外到内多维的商品详细信息，这对从事网络营销行业的企业来说，是一个非常不错的平台，更是需要通过产品3D展示来提高销售订单，增加业绩。因此研究如何呈现产品的3D展示，对电子商务的发展尤为重要。

1 产品3D展示网站的搭建

2.1 核心技术

2.1.1 jQuery框架

JQuery 是一个 JavaScript 轻量级的函数库，能够极大地简化、快速地编写Javascript代码，以下特性功能：

1）HTML 元素快速选取，便捷操作，改变页面内容；

2）CSS 属性操作自如，修改页面外观；

3）HTML 事件（events）函数，响应用户的交互操作；

4）Javascript 为页面添加特效、动画效果；

5）HTML DOM 快速遍历、操作修改；

6）AJAX异步加载技术，能够无刷新页面，获取服务器信息。

2.1.3 MVC三层架构

MVC是一种软件设计典范，一般是指MVC框架。程序代码可以通过使用模型（Model）、View（视图）、Controller（控制器）分离的方法组织。

模型（Model）应用程序核心部分，处理任务最多，负责存取数据，而且能为多个视图提供相应的数据，减少代码的重复书写，简洁高效。

视图（View）显示部分，根据模型提供的数据，合理地将数据呈现为用户能够清晰地看到的界面。

控制器（Controller）处理交互部分，通过接受用户的请求，然后决定调用哪一个模型去处理用户的请求，之后选择哪个视图来显示模型提供的数据。

2.2 服务器搭建方案

目前最流行应用最广的Web服务器是Apache服务器，它的优势在于可以运行在广泛使用的不同的计算机平台上，它的安全、可靠、快速、免费、稳定等特点备受人们青睐。MySQL是一个小巧的关系型数据库管理系统，而PHP是类似ASP的执行在服务器端的脚本语言。它们都适合用在搭建网站，再加上Apache+PHP+MySQL除了是开源项目，而且可以免费获取，支持不同的操作系统，可移植性好，因此，它们的组合是最佳的搭配方案。

目前在Windows下搭建PHP服务器有很多软件提供支持，有几款PHP服务器比较流行，如：XAMPP、WampServer、PHPNow、Vertrigo Server 、PHPStudy、AppServ、EasyPHP等。通过安装以上软件，可以快速搭建PHP服务器。

2.3 产品3D图片生成流程

制作产品3D展示所应用的图片需要有3D自动成像系统，即能够360度拍摄产品的系统，还应当配备一台电脑和一台照相机。3D自动成像系统包括了3D自动成像软件和3D拍摄硬件（摄影棚、转盘），需要向运营商购买。照相机需要配合3D自动成像软件，目前该软件只支持佳能（Canon）和尼康（Nikon）相机的某些型号。电脑配置最好推荐操作系统Windows XP、Windows 7，CPU频率2.0GHz ，内存2G ，硬盘160G。

以下简单的描述3D图片拍摄过程：

1）安装3D自动成像软件，如电脑已经安装好则跳过该步骤；

2）将转盘接通电源、并通过数据线连接到电脑，如未检测到转盘，需要安装和系统匹配的转盘驱动；

3）设置相机模式调到“M”档，自动关闭电源，选择“关”，启动实时取景功能，然后通过数据线连接到电脑；

4）打开软件（第一次使用需要导入授权文件），在软件中选择“照相机”功能模块，该模块中选择相机类型（如果相机有闪光灯，需要点击“关闭实时取景”功能），启动照相机。按照自己的意愿选择拍摄的参数，如拍摄的张数、感光度、光圈等。然后点击“启动”；

5）拍摄完成后，会自动弹出保存窗口，点击“确定”即可。

2.4 设计思路

产品3D展示要活灵活现的在Web页面上显示，需要结合HTML、CSS、Javascript的灵活应用。需要以什么样的方式去实现它，途径多种多样。以下介绍设计的大致思路：

1）需要在HTML中插入3D展示所需要的图片，图片由照相机拍摄产品所得，张数由拍摄时设定。由于是3D展示，所以需要影藏其他图片只剩默认的第一张图或用户选定的图；

2）为了能使图片随鼠标拖动而切换，所以应当绑定鼠标事件；

3） 能够按照用户的意愿操作切换图片，那么当用户在图片的上方开始点击鼠标拖动时，记录鼠标的坐标，用户移动时需要判断用户是左移动还是右移动，可根据用户移动后的坐标和刚开始拖动时的坐标比较得知；

4）得到用户的移动方向后，根据方向切换图片显示，记录新的鼠标坐标，继续判断用户的移动方向，然后切换图片，直到用户停止在指定区域上拖动产品图片；

5）当用户停止拖动时，需要马上停止图片切换功能，防止鼠标不拖动图片时，移动事件继续使图片切换。

2.5 程序实现

在HTML中产品展示布局特点，其中有一个总容器，容器内有包含图片的容器，还有一个遮罩层，遮罩层是用来挡住图片，比图片所在的层要高，避免鼠标真的拖动图片，而是在遮罩层上方拖动。图片都是按照产品3D展示的特点，有规律的排序。

给遮罩层绑定事件，记录鼠标刚开始拖拽时的坐标，代码如下：

$overlayer.bind（'mousedown touchstart'， function（e） {

if （e.type == "touchstart"） {

options.currPos = window.event.touches[0].pageX；

} else {

options.currPos = e.pageX；

}

options.clicked = true；

return false；

}）；

给遮罩层绑定事件，当鼠标拖动时，判断拖动的距离是不是大于width_step，如果大于再判断鼠标是左移动还是右移动，得知移动方向后切换图片，记录新的鼠标坐标，以便为下一次鼠标移动作对比。

当鼠标停止按下恢复原样时，阻止图片切换，为了让鼠标在遮罩层上方不拖动图片移动时，遮罩层的鼠标移动事件对图片切换功能不起作用。代码如下：

jQuery（document）.bind（'mouseup touchend'， function（） {

options.clicked = false；

}）；

页面展示效果，当鼠标按下，然后向左拖动时，页面产生的效果如下：

3 总结

本文提出基于产品3D展示网站的研究与实现是为了解决众多商家把产品搬移到互联网上而存在产品的外观特点不够详细，不吸引客户眼球等问题。不仅给网站增添了许多特色，更为客户能够全方位了解产品的特点提供可能，这就能够吸引更多的客户来了解或者购买商家的产品，从而提高销售量，使之未来普及应用可行性高。在研究开发过程验证了方案可行性的同时也存在着不足，即图片数量过多，加载速度慢。虽然本文方案存在着不足之处，但提高购物网站的趣味性有着良好的应用价值。

参考文献：

[1] 潘凯华，刘中华.专著.PHP从入门到精通（第二版）[M].清华大学出版社，2010.4-7.

[2] Jonathan Chaffer， Karl Swedberg.专著. jQuery基础教程（第四版）[M]. 人民邮电出版社，2013.1-2.

[3] 赵鹤芹.期刊.设计动态网站的最佳方案：Apache+PHP+MySQL[J]. 计算机工程与设计，2007，28（4）：933.

[4] 倪乐波，戚鹏，遇丽娜，王婧.期刊.Unity3d产品虚拟展示技术的研究与应用[J].数字技术与应用，2010，（09）：54.

[5] 韦宁.期刊. 基于ASP.NET的商品Cult3D展示[J]. 广西大学梧州分校学报，2004，14（3）：61.

[6] 赵然，陈璟. 基于对象全景图片的互动三维商品网络展示[J]. 中国传媒科技，2012，（24）：200.