WPF 3D足球导览
程序员文章站
2022-07-02 12:23:08
获取足球的3D坐标后,在每一个坐标位置创建一个ModelVisual3D元素,既能实现炫酷的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#
源代码下载:
推荐阅读