用cocos实现的立方体宣传查看页面

cocos进入3.x时代，我也努力跟进，实现了一个将页面映射到立方体上进行旋转查看的效果。

效果如下：

要点

为了这个效果，我主要实现了3个要点：

• 将页面准确映射到立方体上面，适配不同尺寸的手机屏幕。
• 对页面内容进行正常滑动、点击操作。
• 不同页面数量能够在立方体上滑动屏幕循环查看。

页面映射到立方体

创建立方体和页面

因为需要在4个面上显示不同的页面内容，引擎自带的立方体并不能简单地满足这个功能。这里我使用了4个quad拼凑成一个四面体，放在一个节点下，方便后面进行整体旋转。

四个quad节点的坐标分别是：前(0,0,0.5)，右(0.5,0,0)，后(0,0,-0.5)，左(-0.5,0,0)

（图一：立方体拼凑示意）

页面就是普通的渲染节点。不用scrollview做页面滚动，之后统一用屏幕操作来处理。

页面没有铺满屏幕，在上方空出了导航栏的空间。

（图二：页面布局示意）

canvas的宽度尺寸是750，写有内容的页面的宽度是600（后面用pageWidth表示），居中。

屏幕宽适配，页面距离canvas顶部始终是250（后面用top表示） ，距离底部始终是60（后面用bottom表示） 。

页面节点加了mask组件所以只显示了一部分内容。

透视摄像机参数调整

做3d项目，首当其冲的是透视摄像机的引入。需要先了解它的各项参数的意思，才好完成一些3d功能。

我想实现的是：调整主摄像机的参数，可以让立方体的前quad模型在页面上呈现和“图二”一样的尺寸效果。

主要是调整主摄像机的位置坐标和fov值。（我想保持立方体不动）

x坐标影响quad左右显示，因为页面左右对称，所以x坐标为0 。

y坐标影响quad上下显示，值越大，页面越靠下。

y的值可以直接由：(top-bottom)/(2*pageWidth)得到。这里是：(250-60)/(2*600)=0.1583333

z坐标影响quad两边的空间，值越大，离quad越远，页面显示越小。

摄像机距离立方体距离和fov的大概关系如下：

（因为用了宽适配，不想fov影响宽度，所以fov axis使用了horizontal）

（图三：透视摄像机距离和fov关系，俯视图）

红色实线代表了前quad模型。宽度是1

绿色实线是近裁剪面。

BC比上AD的大小是：600/750 . 这里用ratio表示

AD尺寸：2*near*tan(fov/2)

可以算出DisZ和Fov的关系是：

DisZ=1/(2*tan(Fov/2)*ratio)

当Fov取60度时，DisZ是：1.0825 。那么主摄像机距离原点就是：1.5825（前quad距离立方体节点0.5）

调整z坐标后的效果如下。

（图四：调整主摄像机z坐标后的效果）

可以看到调整主摄像机的z值后，透视摄像机的前quad模型和正交摄像机的页面宽度保持了一致。

因为设备屏幕宽高比（aspect）不一致，所以quad的高度需要在启动后调节。

适配需求：页面距离canvas顶部始终是250 ，距离底部始终是60 。

quad高度和透视摄像机的关系如下图：

（图五：透视摄像机和立方体前quad的关系，左视图）

其中绿色实线为近裁剪面，红色实线为前quad模型

黄色虚线是xz平面，经过立方体中心。

蓝色虚线是摄像机xz平面，经过近裁剪面中心。

近裁剪面的宽度除以高度等于aspect，这个可以通过屏幕尺寸得到。

在cocos里可以通过camera.aspect得到

通过之前的公式，计算得到红色实线即前quad的高度为：

1/(ratio*aspect)-(top+bottom)/pageWidth

如果基于iphoneSE的屏幕，该值为：1.706666

调整好x，y，z和fov值后的效果：

（图六：调整完摄像机参数后的效果）

可以看到，2d页面和quad已经完全重合了！✌

立方体旋转

我直接监听了input的touchmove事件，然后根据delta来旋转立方体。

旋转的时候，使用到了四元数，四元数又是一个新词，不好理解，

但是cocos做了很好的封装，使用起来很方便。

旋转api用到了Quat.fromAxisAngle函数，代表了基于旋转轴和旋转角度的旋转。

旋转轴很容易确定，因为只是水平方向的旋转，那么就是绕着y轴旋转。即Vec3.UP

旋转角度做了一个限制，就是希望玩家即使从屏幕一侧滑到另一侧，也不会看到背面。

所以，最大旋转角度为90度。每次滑动屏幕距离是deltaX，那么每次的旋转角度是：90*deltaX/屏幕宽度

核心旋转代码是：node.rotate(quat)

设置后效果如下：

（图七：立方体旋转示意）

动图中，文字页面还没有映射到立方体上，所以为各个面加了基础颜色。

图七中的效果，仅是旋转跟随滑动。当松手后，应该需要像pageview那样，根据一个阈值，要么还原，要么旋转到下一个页面。

我使用了tween的方式，在松手后，直接旋转到原角度或者下一个页面的角度。

为了方便，在旋转的时候加了锁，只有tween完成后，才可以进行下一次滑动旋转。

这里还根据需要旋转的角度，算了一下时间，最长0.5秒，最短0.1秒。做一个线性插值。

最后的旋转效果如下：

（图八：立方体旋转示意，带自动旋转）

页面映射

我使用了rendertexture渲染贴图，为立方体的前，右，后，左各面片分别创建了对应的渲染贴图、材质、摄像机。材质绑定对应的渲染贴图。将材质赋值给各quad面片。为每个面设置一个layer。然后让对应的摄像机只拍摄这个layer。将渲染贴图赋值给对应的摄像机。

总之创建了：

4个渲染贴图，4个材质，4个摄像机。

都配置好后的效果如下：

（图九：配置渲染贴图后的效果）

现在会有2个问题：不同屏幕尺寸，内容会变形；内容没有铺满。

只要将各面的摄像机尺寸和主正交摄像机的orthoHeight设置成一样，

将各面的渲染贴图的尺寸设置成(aspect*orthoHeight,orthoHeight)

就能保证屏幕完整映射到立方体各面上。如下：

（图十：页面完整映射到立方体各面）

现在内容还是处于拉伸或者压缩的状态，因为页面的宽高比和屏幕的不一致。

只需要将渲染贴图的材质的tiling offset参数进行调整，

去掉黑色区域就可以还原内容的尺寸比例。

tilingOffset的x,y对应uv的xy缩放，tilingOffset的zw对应uv的xy偏移。

宽度是600/750=0.8；

所以tilingOffset的x设置为0.8 .

x方向应该采样0.1~0.9这个范围。所以将tilingOffset的z设置为0.1。

tilingOffset的y需要用公式：y=(screenHeight-top-bottom)/screenHeight来运算。

w需要用公式：z=top/screenHeight来运算。

最后用

material.setProperty('tilingOffset',new Vec4(0.8,(screenHeight-top-bottom)/screenHeight,0.1,top/screenHeight))  

来设置最终的渲染效果，如下动图所示：

（图十一：对材质进行tilingoffset后的效果）

然后再加上一个背景图

调整一下各个摄像机的参数

主透视摄像机用depth only，priority 设置成最高

页面的正交摄像机用solid color,clear color用半透明白色， priority 设置成中等

主正交摄像机priority设置成最低，用于背景渲染。

将各页面材质的technique设置成1-transparent。

就实现了相对高级一点的效果：

（图十二：添加背景和透明度的效果）

对立方体各面内的页面进行长图滑动和点击

我的做法概要：

在滑动的第一帧，判断是想上下滑，还是想左右滑。

如果判断deltaY大于deltaX,则上下滑动，对当前页面进行content坐标处理。

如果无移动，则对当前页面进行点击处理。

页面点击是利用世界坐标进行的判断。

最后的效果如下：

（图十三：添加滑动和点击的效果）

因为不是3d内容范畴，所以写的比较简单。嘿嘿。

对不同数量的页面进行映射

我用过切换页面的layer，但是这样只能适用至少3个页面的情况。如果只有1、2个就不行了。

所以最后使用了切换摄像机的visibility来实现。

每次旋转结束，判断前，右，后，左四个页面，应该是哪个一。

然后设置摄像机的visibility来对应。

并且因为只有4个面片，所以layer也只需要用到1，2，4，8即可。

去掉一个页面后的效果如下（也是开头的效果）

（图十四：只有3个页面的效果）

END...