unity通过Mesh网格绘制图形(三角形、正方体、圆柱)
一、介绍
mesh类:通过脚本创建或是获取网格的类,网格包含多个顶点和三角形数组。顶点信息包含坐标和所在面的法线。
unity中3d的世界的所有图形全部都是由三角形构成的。
比如unity已经装配好的几种图形我们可以看一下:
我们可以在unity中通过mesh类来绘制图形。
所以在我们绘制其它图形之前,首先完成一个小目标,画一个三角形。
二、绘制三角形
首先做准备工作:
1.在场景中创建一个空物体,并挂载meshrenderer和meshfilter组件。//我们先不考虑碰撞器的问题,所以不添加collider
2.创建一个默认材质,拖入meshrenderer组件中,为可视化做准备。
3.创建一个脚本,挂载在空物体上。然后开始编辑代码
using system.collections.generic; using unityengine; public class test : monobehaviour { // 网格渲染器 meshrenderer meshrenderer; // 网格过滤器 meshfilter meshfilter; // 用来存放顶点数据 list<vector3> verts; // 顶点列表 list<int> indices; // 序号列表 private void start() { verts = new list<vector3>(); indices = new list<int>(); meshrenderer = getcomponent<meshrenderer>(); meshfilter = getcomponent<meshfilter>(); generate(); } public void generate() { // 把顶点和序号数据填写在列表里 addmeshdata1();//三角形 // 用列表数据创建网格mesh对象 mesh mesh = new mesh(); mesh.setvertices(verts); //mesh.vertices = verts.toarray(); mesh.setindices(indices, meshtopology.triangles, 0); //mesh.triangles = indices.toarray(); // 自动计算法线 mesh.recalculatenormals(); // 自动计算物体的整体边界 mesh.recalculatebounds(); // 将mesh对象赋值给网格过滤器,就完成了 meshfilter.mesh = mesh; } // 填写顶点和序号列表 void addmeshdata1() { verts.add(new vector3(0, 0, 0)); verts.add(new vector3(0, 0, 1)); verts.add(new vector3(1, 0, 1)); indices.add(0); indices.add(1); indices.add(2); } }
运行后是这个样子的:
然后来解读一下代码:
准备了一个list<vector3> verts
来存放三角形的各个顶点坐标
准备了一个list<int> indices
来存放读取的顶点坐标的顺序
获取了空物体的meshrenderer
和meshfilter
。
注意:
meshfilter: 网格过滤器
作用:指定mesh(物体的几何形状)
meshrenderer: 网格渲染器
网格渲染器从网格过滤器中获得几何体的形状然后进行渲染。
即:mesh是网格,meshfilter是从网格中获取图形的组件,meshrenderer是渲染从meshfilter获取到的图形的组件。
然后为list<int> indices
增加了三个点,(0,0,0),(0,0,1),(1,0,1),并且就是按照这个顺序读取
mesh.setvertices(verts); //mesh.vertices = verts.toarray();
使用这两种方法任选其一为mesh添加顶点
mesh.setindices(indices, meshtopology.triangles, 0); //mesh.triangles = indices.toarray();
使用这两种方法任选其一为mesh添加三角形的顶点顺序
// 自动计算法线 mesh.recalculatenormals(); // 自动计算物体的整体边界 mesh.recalculatebounds(); // 将mesh对象赋值给网格过滤器,就完成了 meshfilter.mesh = mesh;
这里注意一点,三角形会在三个顶点分别生成法线垂直于平面,法线的朝向遵循左手定则
即,一个三角形面有三条法线。所以这个三角形是朝上的,摄像头从上而下就能看到此三角形。如果将摄像头放在三角形的下方朝上看,那么就会看不到此三角形。
自下而上去看,并不能看到三角形。
三、绘制正方体
正方体有6个面,一共12个三角形组成,这边我们偷个懒,只拼装三个面。
那么就需要7个顶点,6个三角形。
注意遵循左手定则,则我们需要添加的六个三角形是:
012 023 145 152 253 356
void addmeshdata2() { verts.add(new vector3(0, 0, 0)); verts.add(new vector3(0, 1, 0)); verts.add(new vector3(1, 1, 0)); verts.add(new vector3(1, 0, 0)); verts.add(new vector3(0, 1, 1)); verts.add(new vector3(1, 1, 1)); verts.add(new vector3(1, 0, 1)); indices.add(0); indices.add(1); indices.add(2); indices.add(0); indices.add(2); indices.add(3); indices.add(1); indices.add(4); indices.add(5); indices.add(1); indices.add(5); indices.add(2); indices.add(2); indices.add(5); indices.add(3); indices.add(3); indices.add(5); indices.add(6); }
绘制出来是这样的:
将线框关闭,我们发现三个面就好像融合在一起了一样:
我们知道,unity是根据面(三角形的三个顶点)的法线的方向的不同,来判断面的朝向,而在上面的示例中,2号点,既在0123平面上,也在2563平面上,也在1254平面上,而它并没有三根法线(这里其实是四个三角形共享2号点,有四个法线,但是不知道同面的两根法线是否都参与mesh.recalculatenormals()中的计算导致法线平均值向左方向偏移,等大佬指正)。
所以在调用mesh.recalculatenormals();
unity会自动将这三个法线计算,最终得出一个平均值,作为最后的法线。当然1,3,5三个点也是因为是交界处也会计算法线的平均值。最后渲染出像是都处在同一个平面的效果。
解决的办法也很简单,就是将重合的点不共用,拆开来进行计算
即添加12个点,6个三角形分别是:
012 023 456 467 8910 81011
void addmeshdata4() { verts.add(new vector3(0, 0, 0));//0 verts.add(new vector3(0, 1, 0));//1 verts.add(new vector3(1, 1, 0));//2 verts.add(new vector3(1, 0, 0));//3 verts.add(new vector3(0, 1, 0));//4 verts.add(new vector3(0, 1, 1));//5 verts.add(new vector3(1, 1, 1));//6 verts.add(new vector3(1, 1, 0));//7 verts.add(new vector3(1, 0, 0));//8 verts.add(new vector3(1, 1, 0));//9 verts.add(new vector3(1, 1, 1));//10 verts.add(new vector3(1, 0, 1));//11 indices.add(0); indices.add(1); indices.add(2); indices.add(0); indices.add(2); indices.add(3); indices.add(4); indices.add(5); indices.add(6); indices.add(4); indices.add(6); indices.add(7); indices.add(8); indices.add(9); indices.add(10); indices.add(8); indices.add(10); indices.add(11); }
这样产生的就是棱角分明的正方体了(背面空空)
四、绘制圆柱体
首先看一下成品的效果
其实就是用两个圆形面加上侧面的一些拼接成的矩形构成
注意点:
1.侧面和上下圆形不共享使用顶点,而侧面各个三角形需要共享使用顶点。原因是法线的朝向问题,正方形那里讲的很清楚了。
2.我这里用mathf.sin方法和mathf.cos方法来计算圆形面上各个顶点的坐标,方法参数是弧度。
void addmeshdata7(int n)//n为圆形包含三角形的数量 { int a = 360 / n; verts.add(new vector3(0, 0, 0)); for (int i = 0; i < n; i++) //上面 { verts.add(new vector3(mathf.sin(a * mathf.deg2rad), 0, mathf.cos(a * mathf.deg2rad))); a += 360 / n; } verts.add(new vector3(0, -2, 0)); for (int i = 1; i < n + 1; i++) //下面 { verts.add(verts[i] + new vector3(0, -2, 0)); } debug.log("verts.count: " + verts.count); for (int i = 0; i < n; i++) //绘制上面 { indices.add(0); indices.add(i + 1); if (i + 1 >= n) { indices.add(1); } else { indices.add(i + 2); } } for (int i = n + 1; i < 2 * n + 1; i++) //绘制下面 { debug.log("i " + i); indices.add(n + 1); if (i + 2 >= 2 * n + 2) { indices.add(n + 2); } else { indices.add(i + 2); } indices.add(i + 1); } int oldcount = verts.count; debug.log(oldcount); for (int i = 0; i < oldcount; i++) { verts.add(verts[i]); } for (int i = oldcount + 1; i <= oldcount + n; i++) //绘制侧面 { indices.add(i); indices.add(i + n + 1); if (i + 1 >= n + oldcount) { indices.add(oldcount + 1); } else { indices.add(i + 1); debug.log(verts[i + 1]); } indices.add(i + n + 1); if (i + n + 2 > 2 * n + 1 + oldcount) { indices.add(oldcount + n + 2); indices.add(oldcount + 1); } else { indices.add(i + n + 2); indices.add(i + 1); } } }
下一篇讨论unity通过mesh网格绘制球体&通过柏林噪声绘制地形
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。