CN101739633A - 一种交互式三维虚拟城市电子商务平台的实现方法 - Google Patents

Abstract

本发明公开了一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，提供了一种在网络上逼真展示三维店铺及三维物品的崭新方式。为用户提供了一个三维虚拟空间和实时交互为特征的虚拟现实，能够多方位的展现商品，充分表现出商品的特色与立体感，用户能够详细地查看商品的各种特征，提供给用户极大的观察空间和自由。其技术方案为：方法包括：通过对物品进行360°环绕拍摄得到的图像进行自动处理，生成逼真的物体三维展示的物品展示文件，通过3DSMax和AutoCAD、Photoshop等软件构建虚拟城市建筑物及三维店铺，通过java、flash RIA(Rich Internet Application)技术实现一个可供用户浏览、交互的虚拟商城平台；采用Flash 3D技术和虚拟现实技术，把物品三维展示的文件嵌入到三维效果的店铺并把该文件嵌入进虚拟城市网页。本发明应用于电子商务技术领域，也是虚拟现实技术的范畴。

Description

一种交互式三维虚拟城市电子商务平台的实现方法

技术领域：

本发明涉及一种交互式三维虚拟城市电子商务平台的实现方法，涉及虚拟全景展示和真实全景展示技术领域，电子商务领域。

背景技术：

在以往电子商务网站中，信息展示手段往往局限于文字和图片，而文字和图片仅能提供平面的效果，与实物均有一定的差距，从而妨碍了电子交易中消费者进行最终决策，而虚拟现实技术的引入提高了电子商务的可行性。

而flash3D、虚拟现实技术在展示商品的应用目前都还比较浅。

(1)现在用于3D展示的产品，主要是客户通过相关渠道了解到专业的3D服务提供团队，然后，这些团队使用专业的摄影仪器和专业的摄影人员，对需展示的商品拍照，得到物品的全景照片，然后再通过flash as脚本语言，对拍出的图片进行读取和相应的操作处理，得到3D效果的商品展示。

(2)需要专业团队亲自来处理产品，比较麻烦，成本较高。

(3)特征物体偏移量的计算和抠图技术，目前基本上还处于实验阶段，在商业中的应用比较少。

发明内容：

本发明的目的是解决上述问题，其目的在于实现一般的用户用最普通的数码相机用较简便的方法就能够动手制作3D效果的产品展示的方法。

(1)通过生成逼真的物体三维展示的物品展示文件

(2)构建虚拟城市建筑物及三维店铺，实现一个可供用户浏览、交互的虚拟商城平台。

(3)实现把商品360度显示的文件嵌入到三维仿真的城市、店铺中，使用户能够在交互式的城市中浏览商品达成交易。

三维虚拟商场产品展示平台的应用有可能大幅度改善顾客在网上购买商品的经历，显著提高电子商务的可行性。

为了实现上述功能，本发明采用的具体技术方案是：

一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现包括以下步骤：

(1)本发明通过3DSMax和AutoCAD、Photoshop等软件构建虚拟城市建筑物，同时制作道路、绿化等设施，进行整体的美化，渲染出图。

(2)使用3DsMax对三维虚拟城市建筑室内店铺制作，同时制作柜台、货架等店铺内物件充实店铺，输出店铺动画展示JPG或者AVI格式文件。

(3)通过flex技术将提供的建筑物图片及店铺图片制作成flash文件，并将3D效果的店铺flash嵌套到建筑楼宇的flash中。

(4)基于三维地图引擎实现城市地图的浏览和图形交互等功能。

(5)通过JSP搭建用户管理后台，实现购买店铺、上传商品三维展示文件等日常店铺管理操作功能。

(6)本发明通过对物品进行360°环绕拍摄得到的图像进行自动处理，生成逼真的物体三维展示的*.swf/*.gif/*.java格式的物品展示文件

(7)采用Flash 3D技术和虚拟现实技术，把物品三维展示的*.swf/*.gif/*.java文件嵌入到三维效果的店铺并把该文件嵌入进虚拟城市网页。

作为优选的一种方案：所述步骤(1)包括：

(1.1)使用AutoCAD软件进行虚拟城市的整体规划，规划内容有地块、绿化、河道、道路等。按城市规划道路细分，主干道，次干道，高架，步行街，地铁，地下通道等。根据商品的属性将城市规划成女装区、鞋帽区、数码区等不同的区域，每个区域有一个中心广场。且区域的规划具有较好的可扩展性。

(1.2)将AutoCAD中的规划文件导入到3dsMax软件中，生成地块。

(1.3)地块生成完毕，渲染地块文件，拼合渲染文件，供后期制作2维地图，为后期制作拼合整体提供条件。

(1.4)在3dsMax软件中，根据已经设定的原画和背景信息，进行三维模型的制作，做到模型和原画吻合，和整个风格吻合.

(1.5)将建好的地块模型和建筑模型进行拼合处理，按照比例尺寸单独渲染出图。

(1.6)按照每个建筑模型的特点进行动画设置调整，进行动画渲染。

(1.7)对虚拟城市进行后期处理，包括：绿化，河流，道路元素，山势等，按需求表现制作方式。

进一步在步骤(1.4)中，建筑物的来源主要分成现实中的知名建筑物与设计人员自行创建的建筑物这两种。对于现实中的知名建筑物主要是根据航拍图及照片。建筑物的建模主要包括以下步骤：首先在3dsMAX软件中根据建筑物的图片或者自行创建一个长方体，然后然后进行划分，底部、广告牌、主墙面；然后对墙面和窗户进行划分；再进一步对对窗户进行绘制，选中所有需要绘制窗户的墙面，对其进行插入操作，然后对窗户进行做适当改变，同理制作出底部门面；最后加入门、底部等各种细节，最后完成一个建筑物的模型导出建筑物TGA格式图片。

在步骤(1.5)中队地块模型和建筑模型进行整合处理，渲染出图包括设置灯光的位置、灯光的角度进行渲染，导出城市TGA格式的图片。

在步骤(1.6)中对单个建筑模型进行动画制作，进行动画渲染包括：对建筑动画材质设计及编辑、建筑动画灯光效果控制、调节摄像机视角和路径，设定动画关键帧进行建筑动画渲染，最后输出建筑物动画的系列JPG格式图片及AVI格式动画文件。

更进一步，在步骤(1.6)中，单个建筑物动画的整体设计是建筑物由小渐大，最后定格在建筑物的正面。

在步骤(1.7)中，虚拟城市的后期处理包括：在photoshop软件中将由步骤(1.5)中的城市TGA格式文件进行拼装整合；再者铺上道路、河流、绿化等设施，并进行周边环境的2D效果处理；然后对虚拟城市进行整体的光线、色彩的调整；最后虚拟城市规划和制作部分完成，输出虚拟城市TGA格式图片。

作为优选的一种方案，步骤(2)的三维虚拟城市建筑室内商铺效果，同样使用3dsMax制作。同时制作柜台等商铺内物件充实商铺，达到美化丰富商铺的室内效果。首先使用AutoCAD软件进行商铺平面规划。然后在3dsMax软件中进行商铺的制作，按照前期的平面规划制作模型。进一步对店铺模型设定好摄象机视角，打好灯光，进行渲染。再进一步为了达到全方位浏览商铺及3D商品，调节摄象机路径，设定动画关键帧，进行动画渲染，输出店铺动画的系列JPG格式或者AVI格式文件。

作为步骤(3)，将步骤(1.6)中的单个建筑物的动画系列JPG图片和步骤(2)中的店铺动画系列jpg图片制作成flash，输出*.swf文件。并实现楼宇、店铺、货柜、商品flash的嵌套展现。3D效果店铺的嵌套实现主要包括：

(3.1)preLoading_mc：加载程序的进度条，用作加载主程序时的进度显示

(3.2)Loading_mc：加载切换时的进度条，用作加载商厦、铺位中心、铺位、以及它们之间的切换时所用的进度显示。会提供多种模板供用户选择。

(3.3)menu_mc：菜单，flash程序的主菜单，用于flash的铺位之间，铺位和铺位中心之间，以及返回商城展示的切换。会提供多种模板供用户选择。

(3.4)mall_mc：商城展示，用户所要展示的商品所在的商厦(按照步骤(1.6)提供的建筑物图片生成的一个展示的.swf文件)，会提供多种商厦模板(.swf文件)供用户选择。

(3.5)shopCenter_mc：铺位中心，用于展示用户铺位列表，会提供多种模板(.swf文件)供用户选择.

(3.6)Shop_mc：铺位，用于展示用户的商品，会提供多种模板(.swf)文件供用户选择。其中有二维图片展示和3d展示，二维展示就是直接导入图片进行展示，3d展示是导入用户上传商品的图片到服务器之后，由服务端生成的.swf文件到铺位里面的d3show_mc中。在d3show_mc中通过对导入的商品进行放大缩小(_xscale和_yscale属性进行调整)，拖动(startDrag()和stopDrag())。

进一步，在(3.6)中的商品3D展示即步骤(6)

作为步骤(4)的基于三维地图引擎实现城市地图的浏览和图形交互等功能的实现步骤包括：

(4.1)将步骤(1.4)输出的TGA格式城市图片进行切片，切图之前一般需要对某一范围的原始值进行修正，使其长高范围之差比为某一便于切图的比例(如3∶2，2∶1等)，然后从左上角(西北)开始对此固定范围进行切图，后续的不同等级城市地图之间采用四叉树数据结构，第n级上的一张瓦片(Tile)到第n+1级将裂变成4张。

进一步在所述步骤(4.1)中切片图片的大小统一为：256*256px。

再进一步在所述步骤(4.1)切片图片的命名格式是：x(坐标)y(坐标)z(坐标)zoom(放大率).png，如x0y0z0zoom3。

更进一步在所述步骤(4.1)重根据地图的缩放等级保存切片图片，等级为0则存放到zoom0文件夹下，等级1时则存放到zoom1文件夹下。

(4.2)基于预生成技术的Web地图显示客户端，由于地图时预先生成的，因此用户在请求地图时，无需再向服务器请求生成地图，这大大加快了地图的生成和显示速度，提高了用户体验和交互能力。

(4.3)三维地图引擎采用javascript技术开发，符合W3C规范，能够兼容多种浏览器。

进一步在所述步骤(4.3)中三维地图引擎是一个轻量级的客户端JS库，不需要任何插件，并且与后台数据的获取方式完全分离。

再进一步在所述步骤(4.3)中良好的OO设计和模式能够方便的扩展和重构，平滑移动的设计架构能够方便的移动地图。

作为步骤(5)就是通过JSP搭建平台架构，实现用户注册、登陆、购买店铺、上传商品三维展示文件等日常管理操作功能。

进一步在所述步骤(5)中，用户购买店铺的支付方式可通过支付宝和手机短信实现。

再进一步在所述步骤(5)中，上传的商品文件数量由用户购买的店铺模版决定，每个模版能上传的商品文件数量都不尽相同，用户能够根据自己需要购买相应的店铺模版。

本发明的物品360度展示系统它是一个在线全自动处理系统，用户所需要做的是选择他们想要展示的物品的图片并上传到服务器，接下来的事情都由系统自动去处理，生成物品360度的展示效果，期间完全不需要用户的再参与，最后用户便可看到生成的展示效果。

作为优选的一种方案，用户拍摄物品的图片要求：采用普通的数码相机；至少拍摄物品前、后、左、右四个角度的照片；拍摄角度越多效果越好；采用与物品颜色相差较多的纯色背景，能够达到更好的抠图效果；按物品拍摄角度顺序上传相应照片。

物品360度展示技术整个系统包括两大部分，整个系统包括两大部分，一部分是图片处理和GIF动画的生成模块，该模块使用java开发。

进一步图片处理和Gif动画生成模块中的描述信息包括：输入图片的全路径；压缩后的图片宽；压缩后的图片高；压缩后的质量；输出文件的路径；输入水印图片的文件名；输入水印的文字；水印文字的字体名称；水印文字的字体风格；水印文字的字体大小；水印文字的颜色；水印的透明度；水印所在位置的X坐标；水印所在位置的Y坐标；输出资源文件。

更进一步该步骤输出的资源文件还包括：resource文件夹(包括生成SWF需要的组件)；gif和swf文件；data.xml文件，用于描述图片的信息；图片序列，供SWF动画使用。其中gif和swf文件是最后可用的文件。

另一部分是用于生成SWF文件的模块，该模块使用flex开发。其中的data.xml是以上部分图片处理和GIF生成模块中生成的。

至此，一个基于虚拟现实技术的电子商务虚拟商城构建完成，相比较目前市场上的电子商务网站，本发明将电子商务与虚拟商品、虚拟城市结合起来，商品的展示不再是文件与平面的图片，商品的浏览也不再是几个平面网页的切换，作为网络买家来说能在一个跟现实差不多的城市中逛街，跟现场挑选商品一样从各个角度去观察商品，提供给消费者极大的观察空间和自由，刺激了消费者的购买欲望。作为网络卖家来说，三维效果的店铺更能吸引买家的眼球，物品360度现实系统能够方便的实现物品的三维效果展示，充分展现商品的特色和立体感，拉近商品与消费者的距离，促进商品的销售。

附图说明

图1是本发明的用户使用网站的基本流程图。

图2是本发明的用户制作、上传物品360度展示的流程图。

具体实施方式

下面结合附图和实施例对本发明作进一步的描述。

图1示出了本发明的一般用户访问网站的基本流程，在本实施例中，一般用户最多是作为买家角色。下面结合图1描述本方法实施例的各个步骤。

步骤s100：用户访问网站，能够登录也能够以游客身份继续使用以下步骤，但如果需要操作步骤s127，系统会提示需要登录才可进行下一步的操作。下面的步骤分两个方向进行，其一是用户使用搜索直接搜索目标产品的流程，另一个是用户浏览商城挑选商品的流程。

步骤s110：用户选择需要查找商品的所属分类，我们将商品分为女装、男装、鞋帽、数码等不同的类别。若用户不选择具体分类，系统则默认为在所有分类中查找。

步骤s111：输入描述商品的关键字，用户选择好商品的分类后，就能够关键字输入框输入描述商品的关键字。

步骤s112：查找商品，返回符合要求的结果列表。用户设定好查询条件后，点击查找即返回符合查询结果的店铺列表。

步骤s113：进入店铺，用户点击店铺列表中的某个店铺，即进入店铺显示店铺所在楼的flash播放。

步骤s114：点击进入店铺，展示店铺中心铺位falsh，店铺有不同铺位组及铺位上面的商品展示。若用户点击铺位则进入步骤s115，若点击商品则进入步骤s116。

步骤s115：进入铺位，点击铺位上的商品即进入步骤s116，或者返回到店铺中心s114。

步骤s116：点击商品后，就进入商品展示flash，用户能够用鼠标拖动商品或者观看商品360度的展示，还能够查看商品的详细信息。点击购买则进入步骤s117，不想购买即能够返回到商铺中心s114。

步骤s117：输入需购买的数量及其他要求，使用支付宝或者手机支付即可购买成功。购买成功后用户查找、浏览、购买商品过程结束。

步骤s121：浏览虚拟城市，能够在虚拟城市地图进行拖动、放大、缩小等操作。点击城市中的某一幢楼即进入步骤s113

在上述实施例的是用过程中，用户能够在不同商厦、店铺、铺位之间切换。

图2示出了本发明的用户制作、上传物品360度展示的实施例流程，在本实施例中，用户必须是登录的且购买了网站店铺的会员。下面结合图2描述本方法的各个步骤。

步骤s200：用户拍摄商品照片，在用户拍摄商品照片时，要求至少拍摄商品前、后、左、右四个角度的照片，并使用与商品颜色相差较大的纯色背景图片。

步骤s210：登录网站到个人管理中心。在个人中心用户能够进行上传商品文件、修改个人资料等操作。

步骤s211：上传商品图片，设置水印、边框等。点击上传，物品360度展示处理系统就会自动处理生成*.swf\*.gif等文件供用户选择。

步骤s212：上传物品文件到铺位，选择需上传的物品360展示文件，选择需上传的铺位，点击上传，即可将物品360度展示文件上传到指定铺位上。

上述实施例是提高给本领域普通技术人员来实现或者使用本发明的，本领域普通技术人员可在不脱离本发明的发明思想的情况下，对上述实施例做出种种修改或者变化，因而本发明的保护范围并不被上述实施例所限，而应该是符合权利要求书提到的创新性特征的最大范围。

Claims (8)

1.一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于

(1)生成逼真的物体三维展示的物品展示文件

(2)构建虚拟城市建筑物及三维店铺，实现一个可供用户浏览、交互的虚拟商城平台。

(3)通过搭建网站，实现把商品360度显示的文件嵌入到三维仿真的城市、店铺中，使用户能够在交互式的城市中浏览商品达成交易。

2.按照权利要求1的一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于：所述步骤(1)包括：

(2.1)、用户拍摄商品前、后、左、右至少四个角度的图片上传到平台图片处理系统。

(2.2)、图片处理系统将用户上传的商品图片经过图片处理模块、GIF动画生成模块、SWF文件生成模块将图片生成商品360度旋转展示的gif、swf、java格式的文件。

3.按照权利要求1的一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于：所述步骤(2)包括：

(3.1)、虚拟城市通过制作建筑高模，虚拟城市规划，后期精细处理，制作出逼真的城市建筑效果；采用USE用户试图，使用户能直观的浏览整个虚拟城市的全貌。

(3.2)、三维虚拟城市建筑室内商铺效果，制作柜台、货架、店铺招牌、沙发、植物等物件充实店铺。

(3.3)、通过jsp技术，flash3D技术，将3D效果的室内店铺嵌入到每个建筑物中，将三维虚拟城市嵌入到网页。

(3.4)、通过三维地图引擎实现城市地图的浏览和图形交互等功能，用户能够通过鼠标等操作、浏览、放大、缩小、多角度的观看建筑、商品的仿真三维动态展示。

4.按照权利要求1的一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于：所述步骤(3)包括：

(4.1)、通过jsp技术为用户提供一个个人管理平台。

(4.2)、通过个人管理平台用户能够选择已生成的商品360旋转展示的*.gif、*.java或者*.swf文件上传到指定店铺中。

5.按照权利要求2的一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于：所述步骤(1.2)中，图片处理模块包括

(5.1)、通过特征物体偏移量的识别和图片背景的自动抠取技术，对拍摄的照片进行自动化处理。

(5.2)、给图片添加水印。

6.按照权利要求4的一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于：所述步骤(4.1)中的个人管理平台，用户能够在个人管理平台进行购买店铺模版、上传商品、删除、修改商品信息等日常管理。

7.按照权利要求4的一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于：所述步骤(4.2)的用户上传商品到三维效果店铺，能够指定上传到店铺的具体货柜位置。

8.按照权利要求6的一种基于虚拟现实技术的交互式三维虚拟城市电子商务平台的实现方法，其特征在于：通过制作不同数量的货柜、不同显示效果的店铺为用户提供各种店铺模版。

Images