CN110322571A - 一种页面处理方法、装置及介质 - Google Patents

Abstract

本发明公开了一种页面处理方法、装置及介质，所述方法包括：接收针对目标页面的编辑指令，确定所述目标页面的目标区域；获取所述目标区域对应的待编辑图像；根据所述目标页面对应的三维场景，确定所述待编辑图像在所述三维场景中对应的待编辑三维模型；获取所述待编辑三维模型在所述三维场景中对应的吸附区域信息；根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。方便根据编辑需求在三维场景中移动待编辑三维模型。保证了用户基于页面对三维模型进行更细粒度的编辑的实现，提高了用户与三维模型进行交互的使用体验。

Description

一种页面处理方法、装置及介质

技术领域

本发明涉及互联网通信技术领域，尤其涉及一种页面处理方法、装置及介质。

背景技术

随着计算机和互联网技术的快速发展，显示终端大量普及，用户浏览页面也越来越便捷。为了带给用户更好的获取信息、进行交互等的体验，页面可以以更高的精度向用户展示显示内容。比如，页面可以渲染三维立体模型进行显示，页面中显示的对象(比如游戏中的人物、场景和基础地形)可以使用三维立体模型来建模。在基于页面的显示内容获取信息、进行交互等时，用户往往有就页面中显示的对象进行进一步查看甚至修改等的需求。

目前，对于对应显示对象(比如汽车，可以包括引擎盖、车轮、车窗、后备箱等)的编辑往往局限于当前页面显示的该显示对象的某一视角平面(比如汽车的背面，可以只有后备箱)。这样的编辑处理影响用户与模型进行交互的体验。

发明内容

为了解决现有技术应用在对页面编辑时，用户与模型进行交互的使用体验差等问题，本发明提供了一种页面处理方法、装置及介质：

一方面，本发明提供了一种页面处理方法，所述方法包括：

接收针对目标页面的编辑指令，确定所述目标页面的目标区域；

获取所述目标区域对应的待编辑图像；

根据所述目标页面对应的三维场景，确定所述待编辑图像在所述三维场景中对应的待编辑三维模型；

获取所述待编辑三维模型在所述三维场景中对应的吸附区域信息；

根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。

另一方面提供了一种页面处理装置，所述装置包括：

指令接收模块：用于接收针对目标页面的编辑指令，确定所述目标页面的目标区域；

图像获取模块：用于获取所述目标区域对应的待编辑图像；

模型确定模块：用于根据所述目标页面对应的三维场景，确定所述待编辑图像在所述三维场景中对应的待编辑三维模型；

吸附区域信息获取模块：用于获取所述待编辑三维模型在所述三维场景中对应的吸附区域信息；

图像生成模块：用于根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。

另一方面提供了一种电子设备，所述电子设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上述的页面处理方法。

另一方面提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如上述的页面处理方法。

本发明提供的一种页面处理方法、装置及介质，具有如下技术效果：

本发明基于待编辑三维模型对应的吸附区域信息，建立待编辑三维模型与所述三维场景中对应区域位置的吸附关系，方便根据编辑需求在三维场景中移动待编辑三维模型。保证了用户基于页面对三维模型进行更细粒度的编辑的实现，提高了用户与三维模型进行交互的使用体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案和优点，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。

图1是本发明实施例提供的一种应用环境的示意图；

图2是本发明实施例提供的一种页面处理方法的流程示意图；

图3是本发明实施例提供的根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像的一种流程示意图；

图4是本发明实施例提供的修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型的一种流程示意图；

图5也是本发明实施例提供的修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型的一种流程示意图；

图6也是本发明实施例提供的修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型的一种流程示意图；

图7是本发明实施例提供的在所述三维场景中，将所述目标三维模型由所述分离状态位置移动至所述吸附状态位置的一种流程示意图；

图8是本发明实施例提供的基于骨骼件维度修改待编辑三维模型的UI界面示意图；

图9是本发明实施例提供的基于模型部件维度修改待编辑三维模型的UI界面示意图；

图10是本发明实施例提供的基于贴图维度修改待编辑三维模型的UI界面示意图；

图11是本发明实施例提供的一种页面处理装置的组成框图；

图12是本发明实施例提供的一种页面处理装置的组成示意图；

图13是本发明实施例提供的一种服务器的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或服务器不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

请参阅图1，图1是本发明实施例提供的一种应用环境的示意图，如图1所示，该应用环境中，目标页面中的待编辑图像通过对对应的三维模型的渲染实现，目标页面对应的显示内容以较高的精度呈现给用户。当需要就待编辑图像进行进一步查看甚至修改等时，可以对待编辑图像对应的三维模型进行编辑。在编辑时，可以利用该三维模型对应的吸附区域信息，根据编辑需求在三维场景中移动该三维模型。需要说明的是，图1仅仅是一种示例。

在本发明实施例中，用户可以通过显示终端获取目标页面的显示内容，显示终端包括但不限于移动智能电话、平板电子设备、便携式计算机(例如笔记本电脑等)、个人数字助理(PDA)、桌面型计算机、智能可穿戴设备。

具体的，显示终端中可以运行应用程序客户端，目标页面可以是基于内部链接(应用程序的后台服务器提供的页面链接，内部链接对应的页面资源由后台服务器提供)打开的页面，也可以是基于外部链接(与应用程序对接的第三方服务器提供的页面链接，外部链接对应的页面资源由第三方服务器提供)打开的页面。应用程序包括但不限于社交类应用(如微信应用)、具备娱乐功能的应用(如视频应用、音频应用、游戏应用和阅读软件)以及具备服务功能的应用(如地图导航应用、团购应用)。对于目标页面的显示内容不作限定。

在实际应用中，如图8-10所示，可以通过运行于显示终端上的浏览器展示目标页面，目标页面的显示内容可以为渲染三维模型显示的游戏内容。

以下介绍本发明一种页面处理方法的具体实施例，图2是本发明实施例提供的一种页面处理方法的流程示意图，本说明书提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的系统或服务器产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。本发明实施例提供的页面处理方法可以由客户端独立执行，可以由服务器独立执行，也可以由客户端与服务器进行交互以执行。具体的如图2所示，所述方法可以包括：

S201：接收针对目标页面的编辑指令，确定所述目标页面的目标区域；

在本发明实施例中，如图1所示，目标页面可以载入有用于渲染至少一个显示图像的三维模型，渲染三维模型实现目标页面中对应的显示图像的呈现。建模过程完成对三维模型的构建，所述三维模型包括通过蒙皮绑定在一起的模型基底与骨骼集合，以及加载在所述模型基底上的贴图，所述骨骼集合包括至少一个骨骼件。同时，将构建的所述三维模型导出以对应的Web端可用的模型格式，比如OBJ格式(一种三维模型格式)、FBX格式(FilmBoX软件所使用的格式)和GLTF格式(Graphics Language Transmission Format，图形语言传输格式)。贴图格式可以为JPG格式(一种图像格式)和PNG格式(Portable NetworkGraphics，便携式网络图形)，它们与Web端的兼容性更好，同时这样贴图文件的体积可以更小，能够减少首屏加载时间。

进一步的，目标页面可以载入GLTF格式的三维模型(比如先在对应的服务器下载该GLTF格式的三维模型，再将下载至客户端本地的该GLTF格式的三维模型载入内存)，GLTF格式具有较高压缩率，这样模型文件的体积可以更小。其中，在将三维模型载入对应的内存的同时，可以使用Three.js引擎(一种基于三维绘图协议的三维引擎)将所述三维模型解析为以网页作为目标页面可理解的JSON(一种数据交换格式)对象。其中，WebGL(WebGraphics Library，web图形库)可以作为一种三维绘图协议。

在一个具体的实施例中，响应于针对目标页面的编辑指令，目标区域以高亮的呈现形式在所述目标页面中自动呈现，落入所述目标区域的显示图像指向在目标页面对应的三维场景中具有吸附区域信息的三维模型。进一步的，当目标页面载入三维模型后，可以通过Three.js引擎对在目标页面对应的三维场景中具有吸附区域信息的三维模型进行高亮显示。

在另一个具体的实施例中，所述目标区域可以基于预设的定位规则来确定(比如，确定目标区域位于目标页面的中部、底部；当目标页面中存在作为人物的显示对象时，确定用于显示人物面部的区域为目标区域)，也可以通过对所述目标页面的实时选取来确定(比如，自定义的在目标页面中框选出目标区域)。目标区域的确定有助于突出目标页面中需要进行编辑的显示对象。

在另一个具体的实施例中，针对目标页面的编辑指令可以由用户通过目标页面上的虚拟对象(比如“编辑”按钮)触发，当然编辑指令的触发形式还可以包括声音触发(麦克风采集声音，通过提取具有特定含义的语音来触发)、图像触发(摄像头采集图像数据，通过提取具有特定含义的表情、手势来触发)。

S202：获取所述目标区域对应的待编辑图像；

在本发明实施例中，目标区域表征了目标页面中的对应位置和范围，可以基于目标区域和目标页面的相对关系，将落入所述目标区域的显示图像作为待编辑图像。也可以对落入所述目标区域的显示图像作主题性区分，将与主题内容相关程度更高的部分作为待编辑图像。比如，落入所述目标区域的显示图像包括与主题内容相关程度较高的主题部分和与主题内容相关程度较低的背景部分，可以对背景部分作过滤处理，得到凸显主题部分且背景部分透明的待编辑图像。

S203：根据所述目标页面对应的三维场景，确定所述待编辑图像在所述三维场景中对应的待编辑三维模型；

在本发明实施例中，目标页面可以载入有用于渲染至少一个显示图像的三维模型，渲染三维模型实现目标页面中对应的显示图像的呈现。当待编辑图像是通过渲染对应的三维模型显示时，可以根据所述待编辑图像获取其在所述三维场景中对应的待编辑三维模型。具体的，建模过程完成对三维模型的构建后，目标页面可以载入所述三维模型，基于所述三维模型创建对应的三维场景。

S204：获取所述待编辑三维模型在所述三维场景中对应的吸附区域信息；

在本发明实施例中，所述吸附区域信息可以包括吸附状态位置、吸附间距、分离状态位置和分离间距。所述吸附区域信息表征了所述待编辑三维模型与所述三维场景中的对应区域是否存在吸附关系以及当吸附关系存在时对应的参数信息。吸附关系可以理解为当某一三维模型与对应三维场景中的某一区域的间距小于或等于吸附间距时，该三维模型自动附着至该区域，产生吸附效果；而当该三维模型与该区域的间距大于分离间距时，吸附失效，该三维模型可以浮动离开该区域。这里，所述分离间距可以使用所述吸附间距的数值，所述分离间距也可以不使用所述吸附间距的数值。当所述分离间距不使用所述吸附间距的数值时，在对该三维模型与该区域的间距与吸附间距或分离间距进行对比时，可以使用对应的方向作参考。比如，当移动该三维模型靠近该区域时，设置此时的移动方向为第一方向，第一方向用作两者间距与吸附间距作对比时的前提条件。当移动该三维模型远离该区域时，设置此时的移动方向为第二方向，第二方向用作两者间距与分离间距作对比时的前提条件。

在一个具体的实施例中，所述三维场景中设置有与所述待编辑三维模型具有吸附关系的吸附坐标点(X，Y，Z)，所述吸附区域信息为所述吸附坐标点，所述吸附坐标点的数量不局限于一个。

在另一个具体的实施例中，所述三维场景中设置有与所述待编辑三维模型具有吸附关系的定位三维模型，所述吸附区域信息为所述定位三维模型中的吸附骨骼件对应的位置，所述待编辑三维模型与所述定位三维模型通过所述吸附骨骼件实现吸附。所述待编辑三维模型与所述三维场景中的对应区域的吸附关系通过两个模型间的吸附关系实现，这样后续对所述待编辑三维模型进行编辑的灵活性、适应性更高。当然，所述吸附骨骼件的数量不局限于一个。

S205：根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。

在本发明实施例中，如图3所示，所述根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像，包括：

S301：根据所述吸附区域信息，在所述三维场景中将所述待编辑三维模型由吸附状态位置移动至分离状态位置；

比如待编辑三维模型对应一汽车引擎盖模型，三维场景中除了该汽车引擎盖模型还包括前箱体模型、车窗模型、车轮模型、发动机模型等等。吸附区域信息指向与该汽车引擎盖模型具有吸附关系的前箱体模型的位置(可以是它在三维场景中的一坐标点，也可以是它的吸附骨骼件的当前位置)。也就是说，汽车引擎盖模型相对于前箱体模型是可进行位置移动的。吸附状态位置是所述汽车引擎盖模型与前箱体模型处于吸附状态(附着在一起)时它的位置，分离状态位置是所述汽车引擎盖模型与前箱体模型处于分离状态(汽车引擎盖模型浮动离开前箱体模型)时它的位置。在所述三维场景中将所述待编辑三维模型由吸附状态位置移动至分离状态位置，可以方便对所述待编辑三维模型对应的显示对象(比如汽车引擎盖)全角度的查看以及修改。进一步的，还可以便于对因吸附状态受到遮挡的显示对象(比如汽车引擎盖模型与前箱体模型呈吸附状态时，前箱体内的发动机受到遮挡)的查看以及修改。有助于实现对三维场景中对应三维模型的更细粒度的编辑，保证局部细节效果更好的显示内容在页面的显示。

S302：修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型；

基于骨骼件维度修改待编辑三维模型时，如图4所示，所述待编辑三维模型包括至少一个骨骼件，所述修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型，包括：

S401：当所述编辑信息包括骨骼调节信息时，确定所述待编辑三维模型对应的待调节骨骼件；

所述待调节骨骼件可以是为实现某一编辑效果的骨骼集合，可以不局限于某一个骨骼件。比如待编辑三维模型对应一游戏角色头部模型，该游戏角色头部模型的构成骨骼集合中可以包括鼻骨骼件、颧骨骼件、泪骨骼件、上颌骨骼件和下颌骨骼件。当骨骼调节信息用于调节鼻骨骼件以实现游戏角色鼻梁挺拔的显示效果时，可以确定待调节骨骼件为鼻骨骼件。

S402：获取所述待调节骨骼件对应的初始属性信息和调节阈值；

初始属性信息包括待调节骨骼件在进行当前次骨骼件调节时的调节基准值，反映了待调节骨骼件当前的位置、角度以及大小等。所述调节基准值可以由客户端向服务器请求获得。调节基准值可以由三维引擎获取。为避免模型出错，骨骼件的调节范围有一定极限，调节阈值则表征该极限对应的临界值。

在实际应用中，对待调节骨骼件的调节不局限于当前次骨骼件调节，用户对骨骼件的调节可以是动态变化的。在所述编辑指令触发的执行步骤S302后还可以自动触发针对待调节骨骼件的修改指令，或者由用户另行触发针对待调节骨骼件的修改指令。编辑指令和修改指令可以基于用户在目标页面中的进度条上进行刻度移动(可以以拖动刻度的形式，也可以通过刻度调节按键“+”和“－”)而触发，可参见图8。

S403：根据所述骨骼调节信息对应的调节参考值，将所述初始属性信息修改为目标属性信息；

所述骨骼调节信息包括从骨骼件位移信息、骨骼件旋转信息、骨骼件缩放信息组成的群组中选择的至少一个。对骨骼件多维度的调节，可以更好的满足用户对模型的编辑需求。骨骼调节信息对应的调节参考值可以包括对待调节骨骼件的位移大小、位移方向、旋转方向、旋转角度、旋转参考点、缩放比例、缩放性质(比如是否为均匀缩放)等。

在一个具体的实施例中，在一次骨骼件调节的编辑中，可以同时对待调节骨骼件作位移、旋转、缩放三个维度的调节，可以基于待调节骨骼件初始属性信息在三维场景中对应的XYZ坐标值进行修改。

在实际应用中，用户在目标页面中的进度条上进行刻度拖动而触发编辑指令或者修改指令时，根据预设的刻度获取针对所述待调节骨骼件的调节参考值。比如所述待调节骨骼件对应的调节进度条设置有1-30的刻度，设置每一个刻度对应的调节位移大小值为0.02(长度单位)、调节旋转角度为0.31(角度单位)，调节缩放比例为0.001。

S404：当所述调节参考值小于或等于所述调节阈值时，根据所述目标属性信息生成所述目标三维模型；

调节阈值可以量化的表征所述待调节骨骼件在对应维度的临界值。方便对基于调节参考值和调节基准值而生成的指向目标属性信息的数值的计算。保证在有效的模型中进行反映用户个性化的交互操作。

S405：当所述调节参考值大于所述调节阈值时，根据所述调节阈值修改所述目标属性信息得到修改后的目标属性信息，根据所述修改后的目标属性信息生成所述目标三维模型。

当所述调节参考值大于所述调节阈值时，根据所述调节阈值修改所述目标属性信息得到修改后的目标属性信息，一方面避免了模型出错，一方面最大程度的反映了用户对待调节骨骼件进行调节的趋势。

基于模型部件维度修改待编辑三维模型时，如图5所示，所述待编辑三维模型包括至少一个模型部件，所述修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型，包括：

S501：当所述编辑信息包括模型部件修改信息时，确定所述待编辑三维模型对应的待修改模型部件；

所述待修改模型部件可以是为实现某一编辑效果的模型部件集合，可以不局限于某一个模型部件。比如待编辑三维模型对应一游戏角色头部模型，该游戏角色头部模型可以包括头颅模型部件、面部模型部件和发型模型部件。当模型部件修改信息用于修改发型模型部件以实现改变游戏角色发型的显示效果时，可以确定待修改模型部件为发型模型部件。

S502：对所述待修改模型部件对应的显隐属性信息或者颜色属性信息进行修改，以得到所述目标三维模型。

在实际应用中，如图9所示，作为显示对象的游戏角色可以包括多个发型模型部件，每个发型模型部件有对应的发型模型部件标示，模型部件修改信息可以指向对应的发型模型部件标示。比如，游戏角色头部模型当前使用的发型模型部件为1号(卷发；棕色)，同时1号的状态为显示。根据模型部件修改信息修改游戏角色头部模型使用的发型模型部件为3号(直发；黑色)，此时3号的状态为显示，1号的状态为隐藏。当然，若需要游戏角色头部模型使用“直发，黄色”的发型模型部件，也可以对当前使用的3号(直发；黑色)的颜色进行修改。

基于贴图维度修改待编辑三维模型时，如图6所示，所述待编辑三维模型包括模型基底和加载于所述模型基底上的至少一张贴图，所述修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型，包括：

S601：当所述编辑信息包括贴图修改信息时，获取至少一张待处理贴图以及所述模型基底对应的贴图修改位置；

所述待处理贴图为用于实现某一编辑效果的至少一张贴图。比如待编辑三维模型对应一游戏角色头部模型，该游戏角色头部模型可以包括模型基底(比如面部模型部件)和加载于所述模型基底(比如面部模型部件)上的腮红贴图、眉毛贴图等。当贴图修改信息用于修改眉毛贴图以实现改变游戏角色眉型的显示效果时，可以确定待处理贴图为眉毛贴图。

在实际应用中，贴图修改信息对应的显示效果为游戏角色带有黑色八字胡和棕色弦月眉，那么待处理贴图可以包括八字胡贴图和弦月眉眉毛贴图。贴图修改位置为面部，具体为上唇位置和眼睛上方位置。

S602：分别对每张所述待处理贴图对应的颜色属性信息进行修改，得到至少一张待拼合贴图；

若待处理贴图的颜色需要修改，则将八字胡贴图的颜色修改为黑色，将弦月眉眉毛贴图的颜色修改为棕色。进行颜色修改时，可以在所述目标页面创建绘图画布(比如Canvas)，利用所述绘图画布对对应的待处理贴图进行像素级着色。

S603：对至少一张所述待拼合贴图进行拼合，得到一张待加载贴图；

可以在所述目标页面创建绘图画布，根据预设的拼合规则(考虑贴图修改位置)，将至少一张待拼合贴图的内容绘制在所述绘图画布上，生成一张待加载贴图。

S604：根据所述贴图修改位置，在所述模型基底上加载所述待加载皮肤贴图，以得到所述目标三维模型。

比如当前游戏角色的面部模型部件的皮肤贴图表现为上唇位置没有胡须、眼睛上方位置为一字眉。可以使用所述待加载皮肤贴图替换当前皮肤题图，在所述模型基底上加载所述待加载皮肤贴图。贴图维度的修改提高了对待编辑三维模型进行修改的细节程度。

同时需要说明的是，本发明实施例中，对待编辑三维模型的修改维度并不仅限于上述骨骼件维度、模型部件维度和贴图维度，具体的修改方式也不局限于上述。当然，上述修改维度可以组合使用以修改待编辑三维模型来得到目标三维模型。比如，可以对游戏角色头部模型进行“捏脸”操作，基于上述三个修改维度调整面部的轮廓，调整脸颊的胖瘦，调整五官的位置、角度及颜色，调整头发样式与颜色，调整腮红等样式与颜色。

S303：在所述三维场景中，将所述目标三维模型由所述分离状态位置移动至所述吸附状态位置。

具体的，如图7所示，所述在所述三维场景中，将所述目标三维模型由所述分离状态位置移动至所述吸附状态位置，包括：

S701：在移动所述目标三维模型的过程中，获取所述目标三维模型的当前位置，得到所述当前位置与所述吸附状态位置之间的位置间距；

对吸附状态位置的描述可以参见步骤S301，这里不再赘述。

S702：根据所述吸附区域信息，获取吸附间距；

S703：当所述位置间距小于吸附间距时，将所述目标三维模型吸附至所述吸附位置。

对吸附间距、吸附效果的描述可以参见步骤S204，这里不再赘述。

当然，当所述待编辑三维模型不存在与所述三维场景中任何区域的吸附关系时，可以根据所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。

由以上本说明书实施例提供的技术方案可见，本说明书实施例中基于待编辑三维模型对应的吸附区域信息，建立待编辑三维模型与所述三维场景中对应区域位置的吸附关系，方便根据编辑需求在三维场景中移动待编辑三维模型。保证了用户基于页面对三维模型进行更细粒度的编辑的实现，提高了用户与三维模型进行交互的使用体验。同时在对待编辑三维模型进行修改时，用户可以得到实时编辑、实时预览的视觉体验。

本发明实施例还提供了一种页面处理装置，如图11所示，所述装置包括：

指令接收模块1110：用于接收针对目标页面的编辑指令，确定所述目标页面的目标区域；

图像获取模块1120：用于获取所述目标区域对应的待编辑图像；

模型确定模块1130：用于根据所述目标页面对应的三维场景，确定所述待编辑图像在所述三维场景中对应的待编辑三维模型；

吸附区域信息获取模块1140：用于获取所述待编辑三维模型在所述三维场景中对应的吸附区域信息；

图像生成模块1150：用于根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。

进一步的，如图12所示，页面处理装置可以对应有负责不同功能的各模块(比如基于Three.js引擎的GLTFLoader.js模块，可以实现在Web端加载GLTF格式的三维模型)。在Web端可以采用了Webpack(一种打包工具)作为模块打包工具，对各模块进行打包。这样在开发阶段，可以针对每一个模块进行灵活的分模块开发。在上线阶段，通过Webpack进行统一打包处理并上线，便于架构上进行维护，同时代码冗余少利于压缩。

需要说明的，所述装置实施例中的装置与方法实施例基于同样的发明构思。

本发明实施例提供了一种电子设备，该电子设备包括处理器和存储器，该存储器中存储有至少一条指令、至少一段程序、代码集或指令集，该至少一条指令、该至少一段程序、该代码集或指令集由该处理器加载并执行以实现如上述方法实施例所提供的页面处理方法。

存储器可用于存储软件程序以及模块，处理器通过运行存储在存储器的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、功能所需的应用程序等；存储数据区可存储根据所述设备的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器还可以包括存储器控制器，以提供处理器对存储器的访问。

所述电子设备可以为客户端，也可以为服务器，本发明实施例还提供了一种服务器的结构示意图，请参阅图13，该服务器1300用于实施上述实施例中提供的页面处理方法，具体来讲，所述服务器结构可以包括上述页面处理装置。该服务器1300可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(Central ProcessingUnits，CPU)1310(例如，一个或一个以上处理器)和存储器1330，一个或一个以上存储应用程序1323或数据1322的存储介质1320(例如一个或一个以上海量存储设备)。其中，存储器1330和存储介质1320可以是短暂存储或持久存储。存储在存储介质1320的程序可以包括一个或一个以上模块，每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器1310可以设置为与存储介质1320通信，在服务器1300上执行存储介质1320中的一系列指令操作。服务器1300还可以包括一个或一个以上电源1360，一个或一个以上有线或无线网络接口1350，一个或一个以上输入输出接口1340，和/或，一个或一个以上操作系统1321，例如Windows ServerTM，Mac OS XTM，UnixTM，LinuxTM，FreeBSDTM等等。

本发明的实施例还提供了一种存储介质，所述存储介质可设置于电子设备之中以保存用于实现方法实施例中一种页面处理方法相关的至少一条指令、至少一段程序、代码集或指令集，该至少一条指令、该至少一段程序、该代码集或指令集由该处理器加载并执行以实现上述方法实施例提供的页面处理方法。

可选地，在本实施例中，上述存储介质可以位于计算机网络的多个网络服务器中的至少一个网络服务器。可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是：上述本发明实施例先后顺序仅仅为了描述，不代表实施例的优劣。且上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置和电子设备实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种页面处理方法，其特征在于，所述方法包括：

接收针对目标页面的编辑指令，确定所述目标页面的目标区域；

获取所述目标区域对应的待编辑图像；

根据所述目标页面对应的三维场景，确定所述待编辑图像在所述三维场景中对应的待编辑三维模型；

获取所述待编辑三维模型在所述三维场景中对应的吸附区域信息；

根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。

2.根据权利要求1所述的方法，其特征在于，所述三维场景中设置有与所述待编辑三维模型具有吸附关系的定位三维模型，所述吸附区域信息为所述定位三维模型中的吸附骨骼件对应的位置，所述待编辑三维模型与所述定位三维模型通过所述吸附骨骼件实现吸附。

3.根据权利要求1所述的方法，其特征在于，所述根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像，包括：

根据所述吸附区域信息，在所述三维场景中将所述待编辑三维模型由吸附状态位置移动至分离状态位置；

修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型；

在所述三维场景中，将所述目标三维模型由所述分离状态位置移动至所述吸附状态位置。

4.根据权利要求3所述的方法，其特征在于，所述在所述三维场景中，将所述目标三维模型由所述分离状态位置移动至所述吸附状态位置，包括：

在移动所述目标三维模型的过程中，获取所述目标三维模型的当前位置，得到所述当前位置与所述吸附状态位置之间的位置间距；

根据所述吸附区域信息，获取吸附间距；

当所述位置间距小于吸附间距时，将所述目标三维模型吸附至所述吸附位置。

5.根据权利要求3所述的方法，其特征在于，所述待编辑三维模型包括至少一个骨骼件，所述修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型，包括：

当所述编辑信息包括骨骼调节信息时，确定所述待编辑三维模型对应的待调节骨骼件；

获取所述待调节骨骼件对应的初始属性信息和调节阈值；

根据所述骨骼调节信息对应的调节参考值，将所述初始属性信息修改为目标属性信息；

当所述调节参考值小于或等于所述调节阈值时，根据所述目标属性信息生成所述目标三维模型；

当所述调节参考值大于所述调节阈值时，根据所述调节阈值修改所述目标属性信息得到修改后的目标属性信息，根据所述修改后的目标属性信息生成所述目标三维模型。

6.根据权利要求5所述的方法，其特征在于，所述骨骼调节信息包括从骨骼件位移信息、骨骼件旋转信息、骨骼件缩放信息组成的群组中选择的至少一个。

7.根据权利要求3所述的方法，其特征在于，所述待编辑三维模型包括至少一个模型部件，所述修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型，包括：

当所述编辑信息包括模型部件修改信息时，确定所述待编辑三维模型对应的待修改模型部件；

对所述待修改模型部件对应的显隐属性信息或者颜色属性信息进行修改，以得到所述目标三维模型。

8.根据权利要求3所述的方法，其特征在于，所述待编辑三维模型包括模型基底和加载于所述模型基底上的至少一张贴图，所述修改位于所述分离状态位置的所述待编辑三维模型，得到位于所述分离状态位置的目标三维模型，包括：

当所述编辑信息包括贴图修改信息时，获取至少一张待处理贴图以及所述模型基底对应的贴图修改位置；

分别对每张所述待处理贴图对应的颜色属性信息进行修改，得到至少一张待拼合贴图；

对至少一张所述待拼合贴图进行拼合，得到一张待加载贴图；

根据所述贴图修改位置，在所述模型基底上加载所述待加载皮肤贴图，以得到所述目标三维模型。

9.一种页面处理装置，其特征在于，所述装置包括：

指令接收模块：用于接收针对目标页面的编辑指令，确定所述目标页面的目标区域；

图像获取模块：用于获取所述目标区域对应的待编辑图像；

模型确定模块：用于根据所述目标页面对应的三维场景，确定所述待编辑图像在所述三维场景中对应的待编辑三维模型；

吸附区域信息获取模块：用于获取所述待编辑三维模型在所述三维场景中对应的吸附区域信息；

图像生成模块：用于根据所述吸附区域信息和所述编辑指令携带的编辑信息，在所述三维场景中编辑所述待编辑三维模型，以得到目标图像。

10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1-8任一所述的页面处理方法。