基于立方体模型的3D环境交互方法及其装置

本申请涉及操作界面下人机交互技术领域，特别是一种基于立方体模型的3d环境交互方法及其装置。

背景技术：

随着pc，手机等消费级电子设备计算性能的提升，数字化三维场景展示技术找到了更广阔的应用平台和目标受众。越来越多的领域将可交互的三维场景展示应用到线上宣传中，因此为创造更好的用户体验，技术人员一直在不断地对虚拟三维空间涉及的交互需求进行分析，以实现对现有技术的优化和更多方面的创新。虚拟三维空间中基本的交互需求包括对场景中虚拟相机，即用户视角的控制以及场景中虚拟物体的选择。与传统的二维空间相比，三维空间为信息呈现提供了更加丰富的方式，视角变换功能是三维虚拟空间具有的一项显著优势之一，用户通过控制虚拟相机的移动和旋转，实现在虚拟场景中的漫游，从而全方位地获取场景中的信息。

在视角控制技术中，最普遍的方式是探索式漫游，即由用户自主控制相机状态，包括相机的位置和面向角度两个属性。目前常见的实现方式是在界面设置多个按键，对应不同方向的移动和旋转，这种方式占用了较多的屏幕空间且无法支持用户的功能自定义布局。在虚拟物体选择需求中，无论是在数字博物馆等科普类应用程序还是在pc端和移动端的3d游戏应用中，普及率最高的方案都是directtouch(直接触控)的方式，即用户使用鼠标或手指直接点击目标物体以表示选择操作的方式。这种操作方式具有相应速度快的优势，但同时也伴随着操作精确度降低的问题，使用手指在屏幕上点击时误触现象更容易发生。

现有pc端也依赖于方向键的交互方案中，繁杂的ui堆砌对画面内容造成严重的遮挡，干扰用户对场景全局完整性的理解，同时容易导致用户错过部分信息。与此同时，为不同的功能设置不同的ui按键和配套的操作规则，这加大了新手用户的学习成本，用户需要时间学习和适应如何通过不同的操作执行各项功能。

屏幕区域滑动控制的交互方案将屏幕内较大区域设为移动或旋转的可交互区域，这种方式虽然降低了交互操作对输入位置的要求，但也增大了误触情况的发生(如用户在屏幕内滑动想要控制相机旋转时，鼠标与屏幕的初始接触位置放置有可交互物体，因此触发了物体选择功能)。

现有的ui界面自定义方式只是在屏幕二维空间内改变了ui图标的尺寸和位置，缺少与虚拟三维空间的呼应。另一方面，不同组件之间在布局上具有一定的互斥性，尤其是当用户需要放大某一项组件的接触面积时，由于组件之间互相独立，因此整体上降低了界面的美观性和屏幕空间的利用率。

而在移动端上依赖于方向键的交互方案为不同的功能设置了不同的ui按键和配套的操作规则，这加大了新手用户的学习成本，用户需要时间学习和适应如何通过不同的操作执行各项功能。

依赖于屏幕区域滑动的交互方案将屏幕内较大区域设为移动或旋转的可交互区域虽然降低了交互操作对输入位置的要求，但同时增大了误触情况的发生(如用户在屏幕内滑动想要控制相机旋转时，与屏幕的初始接触位置放置有可交互物体，因此触发了物体选择功能)，而由于移动端屏幕尺寸有限，ui密度较大等特点，这类现象更加容易发生，严重影响用户的交互效率和使用体验。

与此同时，移动端使用这类技术还存在另一项明显的缺陷，交互手的移动对画面内容造成了严重的遮挡，干扰用户对场景全局完整性的理解，同时容易导致用户错过部分信息。

界面自定义方式只是在屏幕二维空间内改变了ui图标的尺寸和位置，缺少与虚拟三维空间的呼应。另一方面，不同组件之间在布局上具有一定的互斥性，尤其是当用户需要放大某一项组件的接触面积时，由于组件之间互相独立，因此整体上降低了界面的美观性和屏幕空间的利用率。

技术实现要素：

本申请提供了一种基于立方体模型的3d环境交互方法及其装置用于解决现有技术中存在的交互界面操作方式导致屏幕被侵占，无法实现用户的功能自定义布置，直接接触式操作方式又会导致误操作率增高的技术问题。

本申请提供了一种基于立方体模型的3d环境交互方法，包括以下步骤：

步骤s1：在场景中新建立方体模型，设定渲染立方体模型的相机cameracube视口范围；

步骤s2：获取立方体模型的无线网格网络，记录立方体模型与其六个面对应的所有三角面片及其序号；

步骤s3：以任两个对立的面为一组，将立方体模型的六个面分为三组，分别赋予各组面三个不同颜色的纹理贴图，各颜色对应面分别设置执行对应功能；

步骤s4：新建环形ui，所新建的环形ui围绕立方体模型在屏幕上的投影区域设置，无交互行为时该环形ui样式为普通样式，在交互操作过程中，该环形ui颜色随立方体被触发功能的表面颜色而变化，实时显示当前执行的功能类别；

步骤s5：当输入端输入对立方体模型的拖拽动作时，cameracube相机在拖拽初始时向接触位置的方向发出射线，获取射线与立方体模型首个相交点所在三角面片序号，获取步骤2中该三角面片的序号，判断该交点所在表面并执行该表面对应功能，并根据该表面颜色改变环形ui样式，相应交互功能包括：立方体模型姿态调节、以立方体模型为接口的场景漫游、物体选择；如果该交点不在立方体在屏幕投影区域内，则旋转调整立方体模型的姿态，并充分判断操作；

步骤s510：每一次结束滑动或拖拽动作后，立方体位置复原为初始位置，同时恢复环形ui为普通样式，结束交互界面的操作输入。

优选的，当步骤5中识别输入端触发功能为以立方体模型为接口的场景漫游时，包括以下步骤：

步骤s61：将立方体模型在屏幕空间中投影位置记录为初始位置并设置立方体模型移动范围；

步骤s62：通过将屏幕空间中立方体模型的位移向量映射到虚拟相机在三维空间中的x-z平面上，根据该映射后的位移向量位置变化实现视角平移。

优选的，当步骤5中识别用户触发功能为立方体模型姿态调节时，包括以下步骤：

步骤s71：将立方体模型在屏幕空间中的投影位置记录为初始位置并设置移动范围；

步骤s72：通过将屏幕空间中立方体模型的位移向量映射到虚拟相机在三维空间中绕x轴和绕y轴的旋转实现视角旋转。

优选的，当步骤5中识别用户触发功能为物体选择时，包括以下步骤：

步骤s81：将立方体在屏幕空间中的投影位置记录为初始位置并设置移动范围:；

步骤s82:通过将屏幕空间中立方体的位移向量乘以一个放大系数实现向量的延伸；

步骤s83：以初始位置为原点在屏幕空间内沿向量方向画出线段使延长向量的轨迹可见，同时场景主相机以此向量的终点为目标方向向场景发射射线。

优选的，所述步骤s4中所新建环形ui的大小与立方体模型的有限移动范围相对应。

优选的，步骤s5中所用输入端为鼠标或手指。

本申请的另一方面还提供一种基于立方体模型的3d环境交互装置，包括：

建模模块(11)，用于在场景中新建立方体模型，设定渲染立方体模型的相机cameracube视口范围；

网格化模块(12)，用于获取立方体模型的无线网格网络，记录立方体模型与其六个面对应的所有三角面片及其序号；

定义模块(13)，用于以任两个对立的面为一组，将立方体模型的六个面分为三组，分别赋予各组面三个不同颜色的纹理贴图，各颜色对应面分别设置执行对应功能；

环形ui建立模块(14)，用于新建环形ui，所新建的环形ui围绕立方体模型在屏幕上的投影区域设置，无交互行为时该环形ui样式为普通样式，在交互操作过程中，该环形ui颜色随立方体被触发功能的表面颜色而变化，实时显示当前执行的功能类别；

拖拽滑动操作模块(15)，用于当输入端输入对立方体模型的拖拽动作时，cameracube相机在拖拽初始时向接触位置的方向发出射线，获取射线与立方体模型首个相交点所在三角面片序号，获取步骤2中该三角面片的序号，判断该交点所在表面并执行该表面对应功能，并根据该表面颜色改变环形ui样式，相应交互功能包括：立方体模型姿态调节、以立方体模型为接口的场景漫游、物体选择；如果该交点不在立方体在屏幕投影区域内，则旋转调整立方体模型的姿态，并充分判断操作；

结束模块(16)，用于每一次结束滑动或拖拽动作后，立方体位置复原为初始位置，同时恢复环形ui为普通样式，结束交互界面的操作输入。

本申请能产生的有益效果包括：

1)本申请所提供的基于立方体模型的3d环境交互方法，能简化虚拟三维应用中基础交互功能，包括移动，旋转和物体选择三项功能的交互方式，降低用户的学习成本。

2)本申请所提供的基于立方体模型的3d环境交互方法，满足用户在单手交互状态下也可以流畅自如的地使用手机，极大地降低手机掉落的风险，降低三维场景应用对用户双手交互的需求，扩大用户的使用情景。

3)本申请所提供的基于立方体模型的3d环境交互方法，通过整合交互功能的共通性，能有效减少屏幕内所需ui组件的数量，降低ui设计的屏占比，为三维空间的内容展示提供更多的连贯的屏幕空间。该方法尤其适用于手机端等需要单手操作的窄小屏幕环境下，同时也可以用于电脑端进行操作。

4)本申请所提供的基于立方体模型的3d环境交互方法，利用立方体的几何特性，总结三维场景中三项基础的交互需求，即平移、旋转和物体选择在用户输入环节具有的共通性，将原本独立的操作接口和各不相同的交互方式提炼为对一个立方体模型的不同表面的同一种拖拽/滑动操作。这个集成度较高的交互方法可以：首先降低ui屏占比，为场景内容的展示留出更连续的空间，使用户获得更完整的视野；简化用户操作步骤，只需要掌握拖拽/滑动一种操作方式，通过选择不同的表面即可实现不能功能的切换，降低学习成本；手部动作幅度需求小，用户单手交互下手机掉落的风险大大降低。

附图说明

图1为本申请提供的基于立方体模型的3d环境交互方法流程示意图；

图2为本申请提供一实施例中基于立方体模型的3d环境交互方法示意图；

图3为本申请提供的基于立方体模型的3d环境交互装置结构示意图；

具体实施方式

为使本发明实施方式的目的、技术方案和优点更加清楚，下面将结合本发明实施方式中的附图，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式是本发明一部分实施方式，而不是全部的实施方式。通常在此处附图中描述和示出的本发明实施方式的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施方式的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。

需要说明的是，在不冲突的情况下，本发明中的实施方式及实施方式中的特征可以相互组合。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，或者是该发明产品使用时惯常摆放的方位或位置关系，或者是本领域技术人员惯常理解的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本发明的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

参见图1，本申请提供的基于立方体模型的3d环境交互方法，包括：

步骤s1：在场景中新建立方体模型，设定渲染立方体模型的相机cameracube视口范围；

步骤s2：获取立方体模型的无线网格网络，记录立方体模型与其六个面对应的所有三角面片及其序号；

步骤s3：以任两个对立的面为一组，将立方体模型的六个面分为三组，分别赋予各组面三个不同颜色的纹理贴图，各颜色对应面分别设置执行对应功能；

步骤s4：新建环形ui，所新建的环形ui围绕立方体模型在屏幕上的投影区域设置，无交互行为时该环形ui样式为普通样式，在交互操作过程中，该环形ui颜色随立方体被触发功能的表面颜色而变化，实时显示当前执行的功能类别；

步骤s5：当输入端输入对立方体模型的拖拽动作时，cameracube相机在拖拽初始时向接触位置的方向发出射线，获取射线与立方体模型首个相交点所在三角面片序号，获取步骤2中该三角面片的序号，判断该交点所在表面并执行该表面对应功能，并根据该表面颜色改变环形ui样式，相应交互功能包括：立方体模型姿态调节、以立方体模型为接口的场景漫游、物体选择；如果该交点不在立方体在屏幕投影区域内，则旋转调整立方体模型的姿态，并充分判断操作；

步骤s510：每一次结束滑动或拖拽动作后，立方体位置复原为初始位置，同时恢复环形ui为普通样式，结束交互界面的操作输入。

本申请提供方法以立方体模型为操控介质，通过对立方体模型各面网格化后，标记不同颜色，在操作时，通过拖拽立方体模型，并获取拖拽时接触位置发射射线与立方体模型首个相交点，并判断该相交点在立方体模型的具体面上，并确定具体面对应功能，从而执行具体操作，操作简单，同时射线位置与手指操作端输入位置一致，能有效减少误操作，提高操作效率，减少学习操作所需时间。上述方法尤其适用于在较小操作区域内进行多种需要较大移动行程的操作，例如旋转、平移、漫游等能有效避免操作输入端脱离操作区域的问题，提高操作效率。

立方体模型各面对应具体操作，可以按现有技术中常用方法进行，在此不累述。以上方法可以基于unity3d引擎实现。

优选的，当步骤5中识别输入端触发功能为以立方体模型为接口的场景漫游时，包括以下步骤：

步骤s61：将立方体模型在屏幕空间中投影位置记录为初始位置并设置立方体模型移动范围；

步骤s62：通过将屏幕空间中立方体模型的位移向量映射到虚拟相机在三维空间中的x-z平面上，根据该映射后的位移向量位置变化实现视角平移。

按以上操作进行模型平移，能简便的实现对模型的移动，同时移动过程中无需大范围移动操作输入端，从而提高操作简便性，同时操作准确性较高。

优选的，当步骤5中识别用户触发功能为立方体模型姿态调节时，包括以下步骤：

步骤s71：将立方体模型在屏幕空间中的投影位置记录为初始位置并设置移动范围；

步骤s72：通过将屏幕空间中立方体模型的位移向量映射到虚拟相机在三维空间中绕x轴和绕y轴的旋转实现视角旋转。

按此操作能有效利用立方体模型实现对虚拟对象的旋转。

优选的，当步骤5中识别用户触发功能为物体选择时，包括以下步骤：

步骤s81：将立方体在屏幕空间中的投影位置记录为初始位置并设置移动范围:；

步骤s82:通过将屏幕空间中立方体的位移向量乘以一个放大系数实现向量的延伸；

步骤s83：以初始位置为原点在屏幕空间内沿向量方向画出线段使延长向量的轨迹可见，同时场景主相机以此向量的终点为目标方向向场景发射射线。

为避免射线远端投射的抖动问题以降低对用户操作的准确度的要求，加入射线重定向和延迟更新机制，即当射线远端经过可交互物体时，将该物体选为候选物体，射线与场景的交点更新为候选物体重心，同时降低射线随用户拖拽的变化速率，实现候选物体对射线的吸附效果，当拖拽行为结束时如存在候选物体则意味选中该物体。当位移向量决定的交点位置与前一候选物体距离达到阈值时，恢复射线的位置更新速率，取消候选物体。

优选的，包括：步骤9：当用户选择某一物体后，双击屏幕任意区域即可返回，进行下一次的操作。

优选的，所述步骤s4中所新建环形ui的大小与立方体模型的有限移动范围相对应。即随着立方体模型的移动，新建的环形ui移动，并保持与立方体模型的间距；

优选的，步骤s5中所用输入端为鼠标或手指。

参见图2，在一具体实施例中，本申请提供方法包括以下步骤：

以unity3d引擎作为开发环境对完整技术方案进行介绍，每一次独立的操作流程如图1所示。

步骤1：在场景中新建立方体模型，渲染立方体模型的相机cameracube，设定视口范围

步骤2：获取并记录立方体的mesh中与六个面对应的所有三角面片的序号

步骤3：两个对立面为一组，将立方体六个面分为三组，分别赋予三个颜色的纹理贴图，代表从不同表面操作立方体所执行的不同功能。

步骤4：新建环形ui，围绕立方体模型的屏幕投影区域，无交互行为时环形ui样式为普通样式，在交互操作的过程中，环形ui颜色随立方体被触发功能的表面颜色而变化，实时显示当前执行的功能类别。同时环形ui的大小与立方体的有限的移动范围相对应。

步骤5：功能设计。主要交互包括立方体姿态的调节和以立方体为接口的场景漫游及物体选择功能的实现。系统监听鼠标或手指等输入端的滑动或拖拽动作，立方体姿态提供锁定和非锁定两种状态，用户在非锁定状态下可通过在立方体外的屏幕空间中滑动控制立方体三个自由度的旋转。当用户对立方体模型进行拖拽时，cameracube相机在拖拽初始时向接触位置的方向发出射线，获取射线与立方体模型首个相交点所在的三角面片序号，通过步骤2得到的序号判断交点所在表面并执行对应的功能。

步骤6：功能具体实现。将立方体在屏幕空间中的投影位置记录为初始位置并设置移动范围。当步骤5中识别用户触发功能为平移时，通过将屏幕空间中立方体的位移向量映射到虚拟相机在三维空间中x-z平面的位置变化实现视角平移。

步骤7：功能具体实现。将立方体在屏幕空间中的投影位置记录为初始位置并设置移动范围。当步骤5中识别用户触发功能为旋转时，通过将屏幕空间中立方体的位移向量映射到虚拟相机在三维空间中绕x轴和绕y轴的旋转实现视角旋转。

步骤8：功能具体实现。将立方体在屏幕空间中的投影位置记录为初始位置并设置移动范围。当步骤5中识别用户触发工功能为物体选择时，通过将屏幕空间中立方体的位移向量乘以一个放大系数实现向量的延伸。以初始位置为原点在屏幕空间内沿向量方向画出线段使延长向量的轨迹可见，同时场景主相机以此向量的终点为目标方向向场景发射射线。为避免射线远端投射的抖动问题以降低对用户操作的准确度的要求，加入射线重定向和延迟更新机制，即当射线远端经过可交互物体时，将该物体选为候选物体，射线与场景的交点更新为候选物体重心，同时降低射线随用户拖拽的变化速率，实现候选物体对射线的吸附效果，当拖拽行为结束时如存在候选物体则意味选中该物体。当位移向量决定的交点位置与前一候选物体距离达到阈值时，恢复射线的位置更新速率，取消候选物体。

步骤9：当用户选择某一物体后，双击屏幕任意区域即可返回，进行下一次的操作。

步骤10：用户每一次对立方体的拖拽操作结束后，立方体位置复原为初始位置，同时恢复环形ui为普通样式。

参见图3，本申请提供的基于立方体模型的3d环境交互装置包括：

建模模块11，用于在场景中新建立方体模型，设定渲染立方体模型的相机cameracube视口范围；

网格化模块12，用于获取立方体模型的无线网格网络，记录立方体模型与其六个面对应的所有三角面片及其序号；

定义模块13，用于以任两个对立的面为一组，将立方体模型的六个面分为三组，分别赋予各组面三个不同颜色的纹理贴图，各颜色对应面分别设置执行对应功能；

环形ui建立模块14，用于新建环形ui，所新建的环形ui围绕立方体模型在屏幕上的投影区域设置，无交互行为时该环形ui样式为普通样式，在交互操作过程中，该环形ui颜色随立方体被触发功能的表面颜色而变化，实时显示当前执行的功能类别；

拖拽滑动操作模块15，用于当输入端输入对立方体模型的拖拽动作时，cameracube相机在拖拽初始时向接触位置的方向发出射线，获取射线与立方体模型首个相交点所在三角面片序号，获取步骤2中该三角面片的序号，判断该交点所在表面并执行该表面对应功能，并根据该表面颜色改变环形ui样式，相应交互功能包括：立方体模型姿态调节、以立方体模型为接口的场景漫游、物体选择；如果该交点不在立方体在屏幕投影区域内，则旋转调整立方体模型的姿态，并充分判断操作；

结束模块16，用于每一次结束滑动或拖拽动作后，立方体位置复原为初始位置，同时恢复环形ui为普通样式，结束交互界面的操作输入。

该装置能实现在较小操作面上进行多种需要较长移动行程的操作，操作准确性高，学习难度小，操作一致性高。

尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换,凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。