一种基于魔方模型三维动态数据展示的方法

Step3：利用css的transform属性将六个基础面按照一定的形式分别进行平移、旋转、缩放，构建成三维的立方体魔方模型，实现效果示意如图4所示；

Step4：建立相应的页面资源池，分别使用一个唯一的值代表这些页面，方便进行调用，示例如下；

页面1(调用值：1)、页面2(调用值：2)……页面n(调用值：n)

Step5：定义xlist、ylist两个数组，将各个页面代表的值填入这两个数组，示例如下；

xlist＝[1,3,5…n]

ylist＝[2,4,6…n-1]

Step6：通过调用xlist、ylist两个数组里的调用值初始化魔方六个基础面要显示内容，即将页面资源池相应的页面放入魔方的六个基础面；

Step7：先设定向上旋转、向下旋转、向左旋转及向右旋转四个交互触发手势并为每一交互触发手势设置一对应的三维魔方模型旋转处理方法，当检测识别出相应的交互触发手势i(比如向下手势)，并执行交互触发手势i对应的三维魔方模型旋转处理方法i，对三维魔方模型进行相应旋转(即向下旋转魔方)，显示对应基础面上的页面，实现效果示意如图5所示。

与现有技术相比，本发明的积极效果为：

本发明不仅在视觉显示上增添了页面空间层次效果，而且在互动设计上，人们通过鼠标或者手势的操控就可以进入到网页内前进或后退的操控整个网页，使浏览者可以体验到多维空间带来的乐趣。本发明提供的三维空间感不论在视觉上还是交互上对浏览者都具有相当大的吸引力。

附图说明

图1为本发明的方法流程示意图；

图2为初始二维平面示意图；

图3为二维平面产生三维透视效果图；

图4为三维魔方构建示意图；

图5为三维魔方转动示意图；

图6为本发明三维魔方模型图；

图7为初始化后魔方展示效果图；

图8为本发明魔方转动展开示意图。

具体实施方式

下面结合附图对本发明进行进一步详细描述。

(一)构建三维魔方模型

在新建的vue工程里，新建MagicCube.vue页面，使用css3的transform属性构建三维魔方模型，具体实现方式如下所示：

step1：建立魔方六个基础面div；

Step2：利用css的perspective属性指定了观察者与z＝0平面的距离，使具有三维位置变换的元素产生透视效果，配置文件格式如下

Step3：生成基础面的div的样式，定义div的长度、宽度、位置及背景，配置文件格式如下

.box-page{

height:37rem；

width:32rem；

position:absolute；

backface-visibility:hidden；

background-image:url("../../assets/ic_cube_single.png")；

background-size:100％100％；

}

Step4：使用CSS3:nth-child()选择器匹配父元素box-page中的第一个元素，将基础面往Z轴方向平移一段距离，生成魔方的front面，配置文件格式如下

Step5：使用CSS3:nth-child()选择器匹配父元素box-page中的第二个元素，将基础面往Z轴方向平移一段距离，然后以Y轴为中心倾斜90度，生成魔方的right面，配置文件格式如下

Step6：使用CSS3:nth-child()选择器匹配父元素box-page中的第三个元素，将基础面往Z轴方向平移一段距离，然后以X轴为中心倾斜90度，再在将div进行一定放缩，生成魔方的top面，配置文件格式如下

Step7：使用CSS3:nth-child()选择器匹配父元素box-page中的第四个元素，将基础面往Z轴方向平移一段距离，然后以Y轴为中心倾斜-90度，生成魔方的top面，配置文件格式如下

Step8：使用CSS3:nth-child()选择器匹配父元素box-page中的第五个元素，将基础面往Z轴方向平移一段距离，然后以X轴为中心倾斜-90度，再在将div进行一定放缩，生成魔方的bottom面，配置文件格式如下

Step9：使用CSS3:nth-child()选择器匹配父元素box-page中的第六个元素，将基础面往Z轴方向平移一段距离，然后以Y轴为中心倾斜180度，生成魔方的back面，配置文件格式如下

执行完以上步骤后即可完成在二维平面上构建三维魔方模型，具体模型如图6所示。

(二)定义要展示的所有的页面组件

在MagicCube.vue页面里定义两个数组xlist与ylist，使用import导入所有的页面组件，将需要展示的页面值填入数据xlist与ylist，xlist与ylist的值如下所示；

xlist＝[x0，x1，x2，……，xn]

ylist＝[y0，y1，y2，……，yn]

其中，xn代表第n个页面，n可以是10，也可以是100，同理yn也是一样，将页面资源池里的页面分成两组，通过页面值去调用页面，比如x1就代表了页面1，x2代表页面2。

(三)初始化魔方六面要显示的页面

使用vue的component组件将xlist与ylist各个值页面导入魔方六个面的div里面，各个面的预设值为：

FrontPageName＝xlist[0]

RigthPageName＝xlist[1]

BackPageName＝xlist[2]

LeftPageName＝xlist[3]

TopPageName＝ylist[0]

BottomPageName＝ylist[n]

初始化后魔方展示效果如图7所示。页面只有要显示的时候才进行分配，以右转为例，初始为魔方前面(显示页面0，代表值为x0)，魔方右面(显示页面1，代表值为x1)，魔方背面(显示页面2，代表值为x2)，魔方右面(显示页面2，代表值为x3)，x3～xn不做分配及使用；第一次右转后，魔方前面(显示页面1，代表值为x1)，魔方右面(显示页面2，代表值为x2)，魔方背面(显示页面3，代表值为x3)，魔方右面(显示页面4，代表值为x4)，上下面显示页面不变；经过第n次右转后，魔方前面(显示页面n-3，代表值为xn-3)，魔方右面(显示页面n-2，代表值为xn-2)，魔方背面(显示页面n-1，代表值为xn-1)，魔方右面(显示页面n，代表值为xn)，上下面显示页面不变，这时x0～xn-4不做分配及使用；y1～yn同理。

(四)动态数据变化展示

通过集成libGesture.js手势翻转库判断转动的方向，当交互触发时，使用css的keyframes属性生成转动动画，当转动动画结束后，通过vue的computed属性监视FrontPageName、leftPageName，BackPageName、RigthPageName、topPageNam及bottomPageName的取值变化，生成新的dom进行显示，具体转动效果如图8所示。

以上实施仅用以说明本发明的技术方案而非对其进行限制，本领域的普通技术人员可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明的精神和范围，本发明的保护范围应以权利要求书所述为准。