德怀特霍华德身高,2017端午节放假安排时间表,大宋奇案狸猫换太子
根据博文：获取足球的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#
源代码下载：
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论