在屏幕中心呈现对象的方法、系统、电子设备及存储介质与流程

1.本发明涉及页面渲染技术领域，尤其涉及一种在屏幕中心呈现对象的方法、系统、电子设备及存储介质。


背景技术：

2.三维场景渲染是web开发、游戏开发等众多领域中呈现三维可视化效果的重要实现方式。相关技术中，将已知对象呈现在屏幕中心位置，较为常见的方案是将对象包裹在一个球体内，如图1所示；然后，根据球体的半径进行模拟计算，得到球体(代指对象)在屏幕中呈现的位置。
3.然而，本技术的发明人在实现本发明创造的过程中发现：由于大多对象无法与其包裹球很好的贴合，得到的球体和对象在屏幕中位置的中心存在偏差，如图1所示效果，导致最终呈现在屏幕上的效果也会偏离屏幕的中心。


技术实现要素：

4.有鉴于此，本发明实施例提供一种在屏幕中心呈现对象的方法、系统、电子设备及存储介质，便于使对象呈现在屏幕中心位置。
5.为达到上述发明目的，采用如下技术方案：
6.第一方面，本发明实施例提供一种在屏幕中心呈现对象的方法，所述方法包括步骤：根据用户触发指令，在三维场景中构建第一包裹盒；所述第一包裹盒用于盛放待呈现对象构成的粒子群；将所述第一包裹盒围绕第一中心点进行反向变换，得到第二包裹盒；所述第一中心点为第一包裹盒的中心点；根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位置；所述相机为虚拟相机工具；将所述第二包裹盒的中心点与所述相机的设置位置围绕所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点；其中，视点用于表示相机在三维场景中的设置位置；根据所述相机的目标视点与目标焦点，将所述待呈现对象投影至屏幕中心位置呈现。
7.可选地，所述在三维场景中构建第一包裹盒包括：将待呈现对象转换为粒子群；其中，若所述待呈现对象为单个物体，则选取对应物体的边界点组成粒子群；若所述待呈现对象为多个物体，且在第一预定数量内，则选取每个物体的边界点组成粒子群；若所述待呈现对象为多个物体，且超过所述第一预定数量，则将每个物体视为一个粒子组成粒子群；在所述粒子群的周围构建包裹盒。
8.可选地，所述将所述第一包裹盒围绕第一中心点进行反向变换，得到第二包裹盒包括：将盛放粒子群的第一包裹盒围绕所述第一中心点反向旋转；其中，所述第一中心点为三轴坐标系的原点，每个粒子围绕第一中心点，从z轴正方向偏向x轴负方向旋转第一预设角度，以及从xz平面偏向y轴负方向旋转第二预设角；计算旋转后粒子群对应的第二包裹盒，以及第二包裹盒的中心点。
9.可选地，根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位
置包括：以所述第二包裹盒的中心点作为当前相机焦点；控制相机沿z轴正方向朝所述当前相机焦点拍摄；当第二包裹盒投影在屏幕中心时，根据相机参数确定得到相机在三维场景中的设置位置。
10.可选地，所述将所述第二包裹盒的中心点与所述相机的设置位置按照所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点包括：将所述第二包裹盒的中心点，绕所述第一中心点按照第一预设角度及第二预设角度进行正向旋转，得到所述相机的目标焦点；以及，将所述相机的设置位置，绕所述第一中心点按照第一预设角度及第二预设角度进行正向旋转，得到所述相机的目标视点。
11.第二方面，本发明实施例还提供一种在屏幕中心呈现对象的系统，包括：构建程序模块，用于根据用户触发指令，在三维场景中构建第一包裹盒；所述第一包裹盒用于盛放待呈现对象构成的粒子群；反向变换程序模块，将所述第一包裹盒围绕第一中心点进行反向变换，得到第二包裹盒；所述第一中心点为第一包裹盒的中心点；计算程序模块，根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位置；所述相机为虚拟相机工具；正向变换程序模块，用于将所述第二包裹盒的中心点与所述相机的设置位置围绕所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点；其中，视点用于表示相机在三维场景中的设置位置；呈现程序模块，用于根据所述相机的目标视点与目标焦点，将所述待呈现对象投影至屏幕中心位置呈现。
12.可选地，所述构建程序模块，包括：转换程序单元，用于将待呈现对象转换为粒子群；其中，若所述待呈现对象为单个物体，则选取对应物体的边界点组成粒子群；若所述待呈现对象为多个物体，且在第一预定数量内，则选取每个物体的边界点组成粒子群；若所述待呈现对象为多个物体，且超过所述第一预定数量，则将每个物体视为一个粒子组成粒子群；构建程序单元，用于在所述粒子群的周围构建包裹盒。
13.可选地，所述计算程序模块，具体用于：以所述第二包裹盒的中心点作为当前相机焦点；控制相机沿z轴正方向朝所述当前相机焦点拍摄；当第二包裹盒投影在屏幕中心时，根据相机参数确定得到相机在三维场景中的设置位置。
14.第三方面，本发明实施例提供一种电子设备，包括：一个或者多个处理器；存储器；所述存储器中存储有一个或者多个可执行程序，所述一个或者多个处理器读取存储器中存储的可执行程序代码，运行与所述可执行程序代码对应的程序，以用于执行第一方面任一所述的在屏幕中心呈现对象的方法。
15.第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现第一方面任一所述的在屏幕中心呈现对象的方法。
16.本发明实施例提供的在屏幕中心呈现对象的方法、系统、电子设备及存储介质，通过在三维场景中构建第一包裹盒，将粒子群包裹，接着对第一包裹盒进行反向变换得到第二包裹盒，根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位置；将所述第二包裹盒的中心点与所述相机的设置位置按照所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点；这样，通过采用包裹盒包裹盛放待呈现对象的粒子群，并进行反向、正向变换，在待呈现对象变换视野角度时，仍然能够确定出相机的目标视点和目标焦点，从而便于使对象呈现在屏幕中心位置。
附图说明
17.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
18.图1为相关技术中一实施例将待呈现对象包裹于球体中计算相机和视点位置的示意图
19.图2为本发明一实施例在屏幕中心呈现对象的方法的流程示意图；
20.图3为本发明一实施例相机视点和焦点位置示意图；
21.图4为本发明另一实施例在屏幕中心呈现对象的方法流程示意图；
22.图5为本发明又一实施例在屏幕中心呈现对象的系统架构示意框图；
23.图6为本发明电子设备的一个实施例架构示意框图。
具体实施方式
24.下面结合附图对本发明实施例进行详细描述。
25.应当明确，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
26.本发明实施例提供的在屏幕中心呈现对象的方法，可应用于web开发、用户界面开发、游戏开发等应用界面渲染的场景中，便于使对象呈现于屏幕中心位置。
27.需要说明的是，该方法可以以软件的形式固化于某一制造的实体产品中，当用户在使用该产品时，可以再现本技术的方法流程。
28.在对本发明实施例详细描述之前，先对本发明一个或多个实施例中涉及的技术术语或名词进行解释如下：场景：物体呈现的空间；相机：渲染软件中用来观察物体的一个工具；渲染器：将通过相机观察到的场景呈现在屏幕上。
29.图2为本发明一实施例在屏幕中心呈现对象的方法流程示意图；参看图2所示，所述在屏幕中心呈现对象的方法包括步骤：
30.s110、根据用户触发指令，在三维场景中构建第一包裹盒。
31.所述第一包裹盒(axis-aligned bounding box)用于盛放待呈现对象构成的粒子群。
32.s120、将所述第一包裹盒按照第一中心点进行反向变换，得到第二包裹盒。
33.所述第一中心点为第一包裹盒的中心点；计算粒子群的第一包裹盒的中心点o，可以通过取三轴坐标系中三个维度的中值得到所述中心点o。
34.s130、根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位置。
35.所述相机为虚拟相机工具，是一种从3d到2d(三维到二维)的投影工具；示例性地，在three.js中设有相机按钮，选择相应种类的相机，就会在画布中创建相机，其作用就是不断的拍摄创建好的场景，然后通过渲染器(render)渲染到屏幕中，如果想通过不同的角度观看场景，就需要修改相机的位置来拍摄场景；本实施中的相机主要是指透视相机(perspectivecamera)。
36.已知相机参数主要包括：fov摄像机视锥体垂直视野角度；aspect摄像机视锥体长宽比；near摄像机视锥体近端面；far摄像机视锥体远端面。
37.s140、将所述第二包裹盒的中心点与所述相机的设置位置(指在三轴坐标系中的位置)按照所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点。
38.请参看图3所示，视点用于表示相机在三维场景中的设置位置，焦点表示相机观察的目标所在位置，一般默认焦点位置是世界坐标系中的原点，当然也可以通过control.target.set()额外设置焦点位置。
39.在观察目标(target)的过程中，相机控件orbitcontrols可以控制相机相对于所述焦点绕某个轴旋转的角度，这样可以实现从多个角度观察对象；其中，oribitcontrols是绕着目标的控制器。
40.s150、根据所述相机的目标视点与目标焦点，将所述待呈现对象投影至屏幕中心位置呈现。
41.使用透视投影，视锥体(frustum，用于确定相机视野内的东西)中的所有内容都以直线投影到视点；其中，视锥体是3d空间中将被投影到屏幕上的区域。此区域之外的任何内容都不会出现在屏幕上。这是因为它要么太近要么太远，或者因为相机没有指向(look at)它。
42.本实施例中，通过切换渲染器传入的相机参数，来展示相机需要实时渲染的内容，呈现在屏幕中心位置。
43.本实施例中，通过在三维场景中构建第一包裹盒，将粒子群包裹，接着对第一包裹盒进行反向变换得到第二包裹盒，根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位置；将所述第二包裹盒的中心点与所述相机的设置位置按照所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点；这样，通过采用包裹盒包裹盛放待呈现对象的粒子群，并进行反向、正向变换，在待呈现对象变换视野角度时，仍然能够确定出相机的目标视点和目标焦点，从而便于使对象呈现在屏幕中心位置。
44.由此，本发明实施例能在各个角度下，使其呈现在屏幕的中心位置，并且视点和焦点计算方式简单高效。
45.请参看图4所示，在一些实施例中，步骤s110中，所述在三维场景中构建第一包裹盒包括：
46.s111、将待呈现对象转换为粒子群。
47.其中，若所述待呈现对象为单个物体，则选取对应物体的边界点组成粒子群；若所述待呈现对象为多个物体，且在第一预定数量内，则选取每个物体的边界点组成粒子群；若所述待呈现对象为多个物体，且超过所述第一预定数量，则将每个物体视为一个粒子组成粒子群。
48.s113、在所述粒子群的周围构建包裹盒。
49.本发明实施例提供的技术方案，首先将所有的对象，不管是单个物体还是多个物体，都看作是粒子群，在其周围构建包裹盒，便于后续高效计算。
50.请参看图4所示，在一些实施例中，所述将所述第一包裹盒按照第一中心点进行反向变换，得到第二包裹盒(s120)包括：将盛放粒子群的第一包裹盒围绕所述第一中心点反向旋转；其中，所述第一中心点为xyz三轴坐标系的原点o，每个粒子围绕第一中心点，从z轴
正方向偏向x轴负方向旋转第一预设角度α(左旋夹角)，以及从xz平面偏向y轴负方向旋转第二预设角度β(下旋夹角)，所述第一预设角度α与第二预设角度β为相机观察角度；计算旋转后粒子群对应的第二包裹盒，以及第二包裹盒的中心点。
51.其中，第一预设角度为预先自定义的相机视锥体水平视野角度(polar angle)，第二预设角度为预先自定义的相机视锥体垂直视野角度(azimuthal angle)。简单说，就是两个方向上的观察角度。
52.根据观察角度需要，可以自行设置第一预设角度和第二预设角度。
53.本实施例中，可以通过预设不同的预设角度，可以在各个角度下，使待呈现对象准确地呈现在屏幕的中心位置。
54.在一些实施例中，根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位置(步骤s130)包括：以所述第二包裹盒的中心点作为当前相机焦点；控制相机沿z轴正方向朝所述当前相机焦点拍摄，可以使用相机控件orbitcontrols控制相机；当第二包裹盒投影在屏幕中心时，根据相机参数确定得到相机在三维场景中的设置位置。
55.本实施例中，根据已知的相机参数，计算变换后得到的第二包裹盒的正面视野，即以新的中心点q作为焦点，照相机在z轴正方向往焦点看，投影在屏幕中心时，相机的位置p作为视点。以此位置设置相机，可以保证投影在屏幕中心呈现对象。
56.其中，根据相机参数确定得到相机在三维场景中的设置位置为本领域技术人员所熟知的技术，为叙述简要，在此就不再赘述。
57.在一些实施例中，所述将所述第二包裹盒的中心点与所述相机的设置位置围绕所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点包括：将所述第二包裹盒的中心点，绕所述第一中心点按照第一预设角度及第二预设角度进行正向旋转，得到所述相机的目标焦点；以及，将所述相机的设置位置，绕所述第一中心点按照第一预设角度及第二预设角度进行正向旋转，得到所述相机的目标视点。
58.本实施例中，通过将焦点q和视点p再次绕着第一中心点o按照定义的第一预设角度与第二预设角度进行旋转，即右旋α，上旋β，得到最终的焦点和视点位置。
59.本实施例中，通过将所有的对象，不管是单个物体还是多个物体，都看作是粒子群。先计算粒子群的原中心点，然后对粒子群以原中心进行视野角度的反方向变换，再计算变换后的粒子群的第二包裹盒及其中心点。在正向视野下，根据第二包裹盒和其中心点，以及相机参数，计算得到相机位置，即视点。最后将第二包裹盒的中心点和相机位置以原中心点，再根据原来变换方向变换回去，得到最后的焦点和视点位置，即视野位置；将该视野位置传入渲染器中，可以保证对象投影至屏幕中心呈现出来。
60.实施例二
61.图5为本发明一实施例在屏幕中心呈现对象的系统架构示意框图，请参看图5所示，基于与前述实施例一中各实施例相同的技术构思，还提供一种在屏幕中心呈现对象的系统，包括：构建程序模块210，用于根据用户触发指令，在三维场景中构建第一包裹盒；所述第一包裹盒用于盛放待呈现对象构成的粒子群；反向变换程序模块220，将所述第一包裹盒围绕第一中心点进行反向变换，得到第二包裹盒；所述第一中心点为第一包裹盒的中心点；计算程序模块230，根据第二包裹盒的中心点及相机参数，计算相机在三维场景中的设置位置；所述相机为虚拟相机工具；正向变换程序模块240，用于将所述第二包裹盒的中心
点与所述相机的设置位置围绕所述第一中心点进行正向变换，得到所述相机的目标视点与目标焦点；其中，视点用于表示相机在三维场景中的设置位置；呈现程序模块260，用于根据所述相机的目标视点与目标焦点，将所述待呈现对象投影至屏幕中心位置呈现。
62.本实施例的系统可以用于执行图1所示方法实施例的技术方案，其实现原理和技术效果与实施例一类似，此处不再多赘述，可相互参看。
63.在一些实施例中，所述构建程序模块210，包括：转换程序单元，用于将待呈现对象转换为粒子群；其中，若所述待呈现对象为单个物体，则选取对应物体的边界点组成粒子群；若所述待呈现对象为多个物体，且在第一预定数量内，则选取每个物体的边界点组成粒子群；若所述待呈现对象为多个物体，且超过所述第一预定数量，则将每个物体视为一个粒子组成粒子群；构建程序单元，用于在所述粒子群的周围构建包裹盒。
64.在一些实施例中，所述计算程序模块，具体用于：以所述第二包裹盒的中心点作为当前相机焦点；控制相机沿z轴正方向朝所述当前相机焦点拍摄；当第二包裹盒投影在屏幕中心时，根据相机参数确定得到相机在三维场景中的设置位置。
65.另外，可以理解的是，图5所示的系统，也适用于实施例一中其它实施例执行步骤流程，具体可参看实施例一中相关描述，在此就不再赘述。
66.本发明实施例提供的在屏幕中心呈现对象的系统，通过采用包裹盒包裹盛放待呈现对象的粒子群，并进行反向、正向变换，在待呈现对象变换视野角度时，仍然能够确定出相机的目标视点和目标焦点，从而便于使对象呈现在屏幕中心位置。
67.实施例三
68.本发明还实施例提供了一种电子设备，包括：一个或者多个处理器；存储器；所述存储器中存储有一个或者多个可执行程序，所述一个或者多个处理器读取存储器中存储的可执行程序代码，运行与可执行程序代码对应的程序，以用于执行实施例一任一所述的在屏幕中心呈现对象的方法。
69.图6为本发明电子设备一个实施例的结构示意图，其可以实现本发明实施例一任一所述的方法，如图6所示，作为一可选实施例，上述电子设备可以包括：壳体41、处理器42、存储器43、电路板44和电源电路45，其中，电路板44安置在壳体41围成的空间内部，处理器42和存储器43设置在电路板44上；电源电路45，用于为上述电子设备的各个电路或器件供电；存储器43用于存储可执行程序代码；处理器42通过读取存储器43中存储的可执行程序代码来运行与可执行程序代码对应的程序，用于执行前述是实施例一中任一所述的在屏幕中心呈现对象的方法。
70.处理器42对上述步骤的具体执行过程以及处理器42通过运行可执行程序代码来进一步执行的步骤，可以参见本发明在屏幕中心呈现对象的方法实施例一的描述，在此不再赘述。
71.该电子设备以多种形式存在，包括但不限于：(1)移动通信设备：这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。这类终端包括：智能手机、多媒体手机、功能性手机，以及低端手机等。(2)超移动个人计算机设备：这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括：pda、mid和umpc设备等，例如ipad。(3)便携式娱乐设备：这类设备可以显示和播放多媒体内容。该类设备包括：音频、视频播放模块(例如ipod)，掌上游戏机，电子书，以及智能玩具和便携式车载导航
设备。(4)服务器：提供计算服务的设备，服务器的构成包括处理器、硬盘、内存、系统总线等，服务器和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。(5)其他具有数据交互功能的电子设备。
72.本发明还实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现前述实施例一中任一所述的在屏幕中心呈现对象的方法。
73.根据上述各实施例公开可知，本发明实施例提供的在屏幕中心呈现对象的方法及系统，能在各个角度下，使对象准确地呈现在屏幕的中心位置，并且视点和焦点计算方式简单高效。
74.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
75.本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。
76.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质还可为磁碟、光盘、只读存储记忆体(read-oily memory，rom)或随机存储记忆体(raidom access memory，ram)等。
77.以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。