折纸效果！ Cocos Creator 3.0

效果

折纸效果

实现

整体思路

思路遵循以下几步

• 初始化一个多边形。

• 折叠后分割成两个多边形。

• 如果需要继续分割，对场上的所有多边形进行折叠，折叠出新的多边形的层级正好与原来的相反。

整体思路

所以，所有的计算和渲染都可以转换成对一个多边形的操作。

为了简化计算，我们约定初始化的多边形为凸多边形。这么做有几个好处。

• 折叠后生成的仍是凸多边形，并且对于每个多边形只会折叠出两个凸多边形

• 渲染时，分割凸多边形为三角形特别方便，即能快速计算出顶点索引

计算

主要分为三块

• 多边形分割

• 线线交点

• 轴对称

分割

观察触摸方向和多边形各个点的关系。

可以发现，触摸方向 与 触摸方向中点指向多边形顶点 的夹角决定了分割后的多边形的点。

分割

• 当夹角大于90度时，该顶点正好是折叠多边形的顶点。

• 当夹角等于90度时，该顶点是两个多边形的顶点。

• 当夹角小于90度时，该顶点是底部多边形的顶点。

向量间的点积正好可以帮助我们判断夹角问题。

const dotValue = temp_v2_vector.dot(temp_v2_vector_3)
if (Math.abs(dotValue) === 0) {
    // 刚好在点上      
} else if (dotValue > 0) {
    // 在前面  
} else {
    // 在后面
}

交点

当被分割的多边形相邻两点与触摸方向的夹角不同时（属于两个多边形的点），需要计算触摸向量的垂直线与该线段的交点。

交点

直线上的一点可以用点和向量表示。