CN105590342A - 一种构建三维展品展示场景的系统 - Google Patents

Abstract

本发明涉及一种构建三维展品展示场景的系统，用以在网页浏览器中在线编辑和构建三维展品展示场景，包括：展示环境模块，用以设置三维展品的展示模式、镜头属性、光源、辅助坐标和效果预览，模型设置模块，用以在线编辑三维展品属性和设置热点，用户管理模块，用以用户登录和身份信息验证。与现有技术相比，本发明具有协同性好、实时性强、兼容性好等优点。

Description

一种构建三维展品展示场景的系统

技术领域

本发明涉及一种构建展示场景的系统，尤其是涉及一种构建三维展品展示场景的系统。

背景技术

在传统的三维展品场景构建方式中，生成的三维产品在线预览总是需要额外的插件支持，来完成三维动画视图的渲染工作，这使得三维产品的在线展示兼容性和应用普及受到一定限制。

传统的三维展品场景构建过程中，总是需要通过对场景进行编辑制作后，生成导出相应文件才能在浏览器中查看三维展品的预览效果，一旦发现有地方需要修改就需要重新对模型或代码进行编辑修改，再重新生成进行预览，这样使得工作效率受到很大的负面影响。

传统的三维展品场景构建需要较为专业的编制基础，对使用用户的专业要求过高，参与三维产品展示场景构建的人员往往是更专业于展品的布局设计，而不是专业的编程人员。因此，很难做到让专业的设计人员专心于三维产品展示场景的构建，还需花很多尽力去掌握一些其他编程领域的相关知识，使得团队工作效率变低。

传统的三维展品场景构建往往使用客户端软件进行场景构建，让后再统一发布最终展品在浏览器上进行展示。在制作过程中，团队人员总是需要在客户端保存对应的文件及代码，及时使用版本控制等手段，也很难做到协同工作，可能出现重复编辑或错误覆盖等问题，在工作量较大的情况下，会使得团队的协同工作效率变低。

发明内容

本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种协同性好、实时性强、兼容性好的构建三维展品展示场景的系统。

本发明的目的可以通过以下技术方案来实现：

一种构建三维展品展示场景的系统，用以在网页浏览器中在线编辑和构建三维展品展示场景，包括：

展示环境模块，用以设置三维展品的展示模式、镜头属性、光源、辅助坐标和效果预览；

模型设置模块，用以在线编辑三维展品属性和设置热点；

用户管理模块，用以用户登录和身份信息验证。

所述的展示环境模块包括：

展示模式管理器，与模型设置模块连接，用以设置展品的展示模式，通过模式接口来设置镜头是否能旋转、镜头是否能缩放、鼠标是否能拖动展品、镜头旋转速度、镜头缩放速度、展品被拖动的速度；

展示镜头管理器，用以接收展示模式管理器的模式镜头信号，调节镜头的视角、镜头观察的初始位置和镜头观测目标的初始位置，通过镜头管理器来设置镜头相关的属性，可以设置镜头的视角、渲染范围、镜头的起始位置、镜头的视点目标位置；

光源对象管理器，用以接收展示模式管理器的模式光源信号，为三维展品的场景构建提供模拟光线支持，并且设置光源位置、光源目标位置、光源强度、光源的光色和光源的放射角度，通过拖动光源位置滚动条可以直接调整光源的位置；

辅助坐标定位器，用以接收展示模式管理器的模式定位信号，与展示模式管理器连接，在三维展品的场景中提供三维坐标及网格辅助线，通过勾选添加辅助坐标选项，可以在三维场景中建立网格平面场景及三维坐标轴，辅助设计者定位三维模型；

场景效果实时预览器，分别与展示镜头管理器、光源对象管理器和辅助坐标定位器通信，用以三维展品的场景的实时渲染和显示预览，所述的场景效果实时预览器可以动态响应设计者对三维场景及模型参数的调整，点击暂停或启动可以禁用或开启鼠标对三维场景的交互功能，便于设计者的对场景及模型的构建调整，点击刷新可以更新浏览器的缓存效果，用以避免不同浏览器缓存机制导致三维模型构建时的更新不及时。

所述的模型设置模块包括：

展品模型管理器，与展示环境模块通信，用以在网页浏览器中实时编辑三维展品模型，可以填写模型的名称用于后期的维护管理，勾选是否产生阴影及是否接受阴影，用于设定该模型是否能根据光源来产生阴影或接受其他模型对其造成的阴影效果，通过拖动展品位置滚动条及展品自转滚动条可以动态调整展品位置及摆放角度；

热点对象管理器，与展品模型管理器通信，用以实现三维展品的热点交互，并且设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度和热点所关联的信息页面信息。

所述的展示模式管理器包括：

观察镜头视角转动单元，用以调节观察镜头视角的转动角度和转速，以滚动条的形式作为参数输入，并能同步在预览器中响应实时效果，提高设计者的构建工作效率；

观察镜头拉伸缩放单元，用以调节观察镜头的拉伸和缩放速度；

三维展品拖动单元，用以调节三维展品的相对拖动速度。

所述的展品模型管理器包括：

三维模型导入器，用以将预制展品三维模型导入到展品模型管理器中，导入过程中可以赋予预制展品三维模型阴影属性效果，提高了三维展品在三维场景中展示的视觉效果；

三维模型编辑器，接收三维模型导入器的导入信息，用以在线调整和编辑导入的预制展品三维模型。

所述的展示模式包括以三维展品为中心的镜头转换模式和以镜头为中心的全景展示模式，提供再次构建的功能，设计者直接拖拽模型在三维场景中的位置及摆放角度，并同步在预览器中得到响应，大大提高了三维模型构建的效率。

与现有技术相比，本发明具有以下优点：

一、协同性好，本发明使用统一服务器的网站式协作平台，客户端不保存任何三维展品场景构建所需的文件或代码，所有文件及代码全部上传至服务器中，保证了团队协同工作时的多人调用和上传、更新的同步，大大提高了团队协同工作的效率，缩短了三维展品场景构建的周期；

二、实时性强，整个构建过程中，提供了实时渲染并显示预览的功能，达到了所见即所得，能随时审查三维展品场景展示的效果和网页渲染性能，及时把控模型精度及设计布局效果；

三、兼容性好，本系统的三维展品场景构建的实现技术是基于WebGL和Htm15，WebGL提供了直接调用客户端GPU渲染三维展品的功能，Htm15使得客户端可以通过浏览器直接调用WebGL的API接口功能，达到了很好的兼容性，使得浏览器无需安装任何额外的插件即可直接渲染三维展品场景并在浏览器中展示实时效果。

附图说明

图1为本发明的系统结构示意图。

其中，1、展示模式管理器，2、展示镜头管理器，3、光源对象管理器，4、辅助坐标定位器，5、场景效果实时预览器，6、展品模型管理器，7、热点对象管理器，8、用户管理模块，11、观察镜头视角转动单元，12、观察镜头拉伸缩放单元，13、三维展品拖动单元，61、三维模型导入器，62、三维模型编辑器。

具体实施方式

下面结合附图和具体实施例对本发明进行详细说明。

实施例：

本发明提供了一种可在浏览器中免插件展示三维展品的场景构建系统，可以使原本集中在3DMax和Photoshop软件中的场景构建工作，集成在统一服务器的网络环境中协同工作、保证实时预览构建效果、避免代码编程操作高效的完成三维产品展示场景的构建工作，并且使得展品可以在浏览器中无需安装额外插件的情况下，进行三维效果展示。

如图1所示，1.一种构建三维展品展示场景的系统，用以在网页浏览器中在线编辑和构建三维展品展示场景，其特征在于，包括：

展示环境模块，用以设置三维展品的展示模式、镜头属性、光源、辅助坐标和效果预览；

模型设置模块，用以在线编辑三维展品属性和设置热点；

用户管理模块8，用以用户登录和身份信息验证，为了在三维展品场景构建过程中使各设计者用户可以协同工作，提高工作效率，使得设计者之间可以有明确的分工安排。

用户管理模块8提供了多个成员协同构建三维展品场景的功能，本系统可以添加多个系统成员，所有的三维展品场景构建过程中的文件、相关代码都上传至统一的应用服务器中，通过网页平台可以随时操作编辑构建三维展示场景，方便多个成员同时协同工作，提高了整个三维展品场景构建的工作效率与质量。

展示环境模块包括：

展示模式管理器1，与模型设置模块连接，用以设置展品的展示模式，通过模式接口来设置镜头是否能旋转、镜头是否能缩放、鼠标是否能拖动展品、镜头旋转速度、镜头缩放速度、展品被拖动的速度，展示模式管理器1包括：

观察镜头视角转动单元11，用以调节观察镜头视角的转动角度和转速，以滚动条的形式作为参数输入，并能同步在预览器中响应实时效果，提高设计者的构建工作效率；

观察镜头拉伸缩放单元12，用以调节观察镜头的拉伸和缩放速度；

三维展品拖动单元13，用以调节三维展品的相对拖动速度。

通过Threejs封装了WebGL的展品展示模式，用户可以选择以展品为中心的镜头转换展示模式及以镜头为中心的全景展示模式，为实际应用提供了很大的便捷性，用户可以设置编辑展示模式的相关参数来调整展示时鼠标的灵活性、是否可拖动展品、是否可旋转镜头来满足实际展示时的需求；

以展品为中心的镜头转换模式工作原理如下：

设置观察镜头的视角能否转动，默认为允许转动；若允许转动，可以调节观察镜头的转动速度的相对值；设置能否拉伸缩放镜头来观察展品，默认为允许；若允许缩放，可以调节镜头缩放速度的相对值；设置是否允许拖动三维展品，默认为允许；若允许拖动，可以调节拖动三维展品移动速度的相对值。

以镜头为中心的全景展示模式工作原理如下：

设置第一人称观察镜头的转动速度相对值；设置第一人称观察镜头行走移动速度的相对值，若需要全景观看效果，可以设置该值为0。

展示镜头管理器2，用以调节镜头的视角、镜头观察的初始位置和镜头观测目标的初始位置，展示镜头管理器是管理观察三维展品镜头属性的管理器，可以设置镜头的观察视角、镜头的三维场景渲染范围、镜头的初始位置及镜头的初始目标位置，不同的镜头观察视角会产生不同的三维展品视觉上的形变效果，三维场景渲染范围决定了镜头当前所能观看的三维展品场景范围，渲染范围越大带来的单位时间渲染处理开销越大，而渲染范围过小则影响三维展品的展示效果，可以通过展示镜头管理器来设置符合实际应用需求的展示镜头属性值；

光源对象管理器3，用以为三维展品的场景构建提供模拟光线支持，并且设置光源位置、光源目标位置、光源强度、光源的光色和光源的放射角度，光源对象管理器提供了对三维展品场景的光源对象管理，传统的三维展品场景构建工作中，光源对三维展品的影响效果往往是在制作三维展品模型时一起渲染完成的，各种光源对展品模型的造成的影响效果一旦有调整需求，则需要重新编辑三维展品模型并导出新的模型文件。本系统中，光源的影响效果与三维展品模型的构建分开管理，交由光源对象管理器单独管理，可以在三维展品场景中添加一个或多个基本环绕光源、平行光源、单点光源，可以调整光源的位置、目标、光强、光色、放射角度，并且通过拖动光源位置滚动条可以直接调整光源的位置，光源对象管理器提供了光源对象的设计辅助线，使设计者在编辑过程中能更直观的观察到光源变化对三维展品模型在场景中展示效果的影响；

辅助坐标定位器4，，用以在三维展品的场景中提供三维坐标及网格辅助线，通过勾选添加辅助坐标选项，可以在三维场景中建立网格平面场景及三维坐标轴，辅助设计者定位三维模型，辅助坐标定位器是为了方便设计设在构建三维展品场景所提供的辅助工具。辅助坐标定位器会根据镜头渲染范围的设置值来自动调整网格的部署范围，同时添加了三维坐标给场景构建过程中提供定位参考，在整个构建过程中设计者可以随时开启或关闭辅助坐标定位器，来观察三维展品场景的实际构建效果；

场景效果实时预览器5，用以三维展品的场景的实时渲染和显示预览，该预览器可以动态响应设计者对三维场景及模型参数的调整，点击暂停或启动可以禁用或开启鼠标对三维场景的交互功能，便于设计者的对场景及模型的构建调整，点击刷新可以更新浏览器的缓存效果，用以避免不同浏览器缓存机制导致三维模型构建时的更新不及时。

场景效果实时预览器是提供了在整个三维展品场景构建过程中的效果预览功能，场景效果实时预览器对设计者在操作展示模式管理器、展示镜头管理器、展品模型管理器、光源对象管理器、热点对象管理器、辅助坐标定位器时所产生的参数变化，都会做出实时渲染并将三维展品场景的效果实时的显示在场景效果实时预览器中，让设计者实时看到三维展品场景构建的效果，达到了所见即所，方便快速的构建出符合实际应用需求的三维展品场景。

模型设置模块包括：

展品模型管理器6，与展示模式管理器1连接，用以在网页浏览器中实时编辑三维展品模型，可以填写模型的名称用于后期的维护管理，勾选是否产生阴影及是否接受阴影，用于设定该模型是否能根据光源来产生阴影或接受其他模型对其造成的阴影效果，通过拖动展品位置滚动条及展品自转滚动条可以动态调整展品位置及摆放角度，展品模型管理器6包括：

三维模型导入器61，用以将预制展品三维模型导入到展品模型管理器6中，导入过程中可以赋予预制展品三维模型阴影属性效果，提高了三维展品在三维场景中展示的视觉效果；

三维模型编辑器62，与三维模型导入器61连接，用以在线调整和编辑导入的预制展品三维模型，提供再次构建的功能，设计者直接拖拽模型在三维场景中的位置及摆放角度，并同步在预览器中得到响应，大大提高了三维模型构建的效率。

提供了对由3DMax预先制作好的展品三维模型的导入及二次编辑功能。本系统通过对WebGL、Htm15、Ajax、JQuery技术的集成，可以在网页浏览器中实时的编辑导入的三维展品模型，可以调节展品的三维位置坐标、展品旋转角度并且通过Ajax技术实时动态的在浏览器预览窗口显示场景展示效果，使整个设计过程无需设计任何代码编辑或编程操作，而且能观察到设计过程中任何细微的变化，提高了团队工作的效率与展品设计质量。

展示模型管理器是用来管理三维展品展示场景中三维模型的管理器，传统的三维展示场景构建的三维模型管理总是把三维模型构建的工作全部交由独立的三维模型构建平台，如3Dmax。实现对三维模型的各种特性及展示细节进行制作编辑，然后导出三维模型在三维场景中完成构建工作，一旦对三维模型有调整的需求，则需要再次制作修改后导出三维模型，使得整个三维展品场景的构建工作变得繁琐且效率低。本系统的展示模型管理器可以将三维模型的变化、调整工作直接在本系统内进行管理，无需进行多次三维模型编辑制作。在3Dmax中完成最基本的三维模型制作工作后，将三维模型文件导出。在展示模型管理器中将相应的三维模型文件导入上传至系统服务器，再通过展示模型管理器对三维展品模型进行调整制作；

热点对象管理器7，与展品模型管理器6连接，用以实现三维展品的热点交互，并且设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度和热点所关联的信息页面信息，热点对象管理器是一个对整个三维展品场景中的交互热点进行管理的管理器。为了让三维展品能具有更多的用户交互功能，本系统利用WebGL中射线与模型碰撞的判断功能，将浏览器中二维点击操作映射至三维展品场景中，设计了交互热点对象。热点对象管理器提供了对热点的添加、编辑管理，可以为每个热点设置名称，便于团队人员协同编辑管理，可以设置热点在三维场景中三维坐标位置、设置热点的尺寸、颜色、点击后的颜色、透明度、关联信息的页面信息、展示页面尺寸、展示页面方式。若要将三维展品设置为一个交互对象，只需在该展品模型位置部署一个热点对象，将其透明度设置为0即可。

集成上述所有模块可以实现三维展品场景的基本构建功能，为了使本系统有更强的兼容性、三维展品渲染具有更高的效率，本系统集成了Htm15和WebGL技术来解决兼容性和高效性两个问题，同时为了提高开发效率及系统可维护性和稳健性，本系统使用了Threejs框架来具体实现WebGL的功能接口；整个系统使用VisualStudio平台开发，开发语言使用C#语言，数据库使用SQLServer。

Claims (6)

1.一种构建三维展品展示场景的系统，用以在网页浏览器中在线编辑和构建三维展品展示场景，其特征在于，包括：

展示环境模块，用以设置三维展品的展示模式、镜头属性、光源、辅助坐标和预览效果；

模型设置模块，用以在线编辑三维展品属性和设置热点；

用户管理模块(8)，用以用户登录和身份信息验证。

2.根据权利要求1所述的一种构建三维展品展示场景的系统，其特征在于，所述的展示环境模块包括：

展示模式管理器(1)，与模型设置模块连接，用以设置展品的展示模式；

展示镜头管理器(2)，用以接收展示模式管理器(1)的模式镜头信号，调节镜头的视角、镜头观察的初始位置和镜头观测目标的初始位置；

光源对象管理器(3)，用以接收展示模式管理器(1)的模式光源信号，为三维展品的场景构建提供模拟光线支持，并且设置光源位置、光源目标位置、光源强度、光源的光色和光源的放射角度；

辅助坐标定位器(4)，用以接收展示模式管理器(1)的模式定位信号，在三维展品的场景中提供三维坐标及网格辅助线；

场景效果实时预览器(5)，分别与展示镜头管理器(2)、光源对象管理器(3)和辅助坐标定位器(4)通信，用以三维展品的场景的实时渲染和显示预览。

3.根据权利要求1所述的一种构建三维展品展示场景的系统，其特征在于，所述的模型设置模块包括：

展品模型管理器(6)，与展示环境模块通信，用以在网页浏览器中实时编辑三维展品模型；

热点对象管理器(7)，与展品模型管理器(6)通信，用以实现三维展品的热点交互，并且设置热点的三维坐标位置、热点尺寸、热点的旋转角度、热点的初始颜色、热点被点击后的颜色、热点的透明度和热点所关联的信息页面信息。

4.根据权利要求2所述的一种构建三维展品展示场景的系统，其特征在于，所述的展示模式管理器(1)包括：

观察镜头视角转动单元(11)，用以调节观察镜头视角的转动角度和转速；

观察镜头拉伸缩放单元(12)，用以调节观察镜头的拉伸和缩放速度；

三维展品拖动单元(13)，用以调节三维展品的相对拖动速度。

5.根据权利要求4所述的一种构建三维展品展示场景的系统，其特征在于，所述的展品模型管理器(6)包括：

三维模型导入器(61)，用以将预制展品三维模型导入到展品模型管理器(6)中；

三维模型编辑器(62)，接收三维模型导入器(61)的导入信息，用以在线调整和编辑导入的预制展品三维模型。

6.根据权利要求2所述的一种构建三维展品展示场景的系统，其特征在于，所述的展示模式包括以三维展品为中心的镜头转换模式和以镜头为中心的全景展示模式。