WPF 3D足球导览

      根据博文：获取足球的3d坐标后，在每一个坐标位置创建一个modelvisual3d元素，既能实现炫酷的3d界面。在此基础上我基于这些点构建了3d足球。

动态效果图：

每一个足球的块上，我贴上了不同的图，点击图获取对应的信息在右侧显示。

 

实现原理：

  首先对所有顶点根据y值进行分层，第一层的顶点见下图：

     

所有与第一层相互连接的点为第二层：

    

以此类推，总共可获得八层顶点。

 

然后，拿到第一层（第一组）的顶点（5个），第一组五个顶点组成了正五边型，正五边形每一条边对应两个顶点，根据距离计算，可以从第二层中找到与第一层顶点距离最近的点，如下图第一层的正五边形的其中一条边ab，在第二层中可以通过计算拿到与a、b两个点距离最近的c、d两个点。然后以c、d作为基点从第三层中又可以得到同时距离c、d 两个点距离最近的两个点e、f。  

 

 从上面两个图你可以直观的看见，在第二层中分别与a、b距离最近的点只能是c、d。 在第三层中同时距离c点和d点最近的点只能是e、f。  abcdef六个点即构成了足球的一个面。 

按照这种以层级和距离的方式即可计算得到足球的每一面所包含的3d坐标。

循环计算实现逻辑代码：

// get bucky ball all blocks
private void getbuckyballblocks()
{
    // buckyballpoints -> list<list<point3d>>
    int nlevelcount = buckyballpoints.count; // 总层数 - 8
    for (int i = 0; i < nlevelcount; i++) // 
    {
        int ncurlevel = i;  //当前层
        //  下一层
        int nsecondlevelbasecur = ncurlevel + 1;
        //  第三层
        int nthirdlevelbasecur = ncurlevel + 2;

        //  three levels as a group， and every group defined five blocks
        //（1,2,3）（2,3,4）（3,4,5）（4,5,6）（5,6,7）（6,7,8）
        if (nthirdlevelbasecur < nlevelcount)
        {
            // 计算距离，根据距离判断是否属于同一个面
            this.calculatebuckyballblocks(buckyballpoints[ncurlevel], 
                buckyballpoints[nsecondlevelbasecur],
                buckyballpoints[nthirdlevelbasecur]);
        }
    }
    // 第一层（现成的正五边形）
    this.buckyballblocks.add(buckyballpoints[0]);
    // bottom block points  第八层（现成的正五边形）
    this.buckyballblocks.add(buckyballpoints[buckyballpoints.count - 1]);
}

通过以上方式获得每一个面对应的顶点坐标后，即可通过坐标构建平面。 

关键代码：

// 根据顶面创建3d平面
private meshgeometry3d createblockmeshgeometry3d(list<point3d> ltpoints)
{
    point3d[] point3ds = new point3d[ltpoints.count];
    for (int i = 0; i < ltpoints.count; i++)
        point3ds[i] = ltpoints[i];

    meshgeometry3d ogeometry = new meshgeometry3d()
    {
        positions = new point3dcollection(point3ds)
    };

    if (ltpoints.count == 6)
        ogeometry.triangleindices = new int32collection(new int[] { 0, 1, 2, 0, 2, 3, 0, 3, 4, 0, 4, 5 });
    else if (ltpoints.count == 5)
        ogeometry.triangleindices = new int32collection(new int[] { 0, 1, 2, 0, 2, 3, 0, 3, 4 });
    else
        showerrorandexit();

    pointcollection texcoords = new pointcollection();
    for (int i = ltpoints.count -1; i >= 0; i--)
        texcoords.add(new point(ltpoints[i].x, ltpoints[i].y));
    ogeometry.texturecoordinates = texcoords;

    return ogeometry;
}

最后给每一个构建的平面的visual属性附上加载的图片和点击事件既能实现我demo中的效果。

最后附上demo整体效果图：

    工具：visual studio 2017

    工程：wpf c#

    源代码下载：