使用上一篇文章(https://www.cnblogs.com/ljzc002/p/9353101.html)中提出的方法,编写一个简单的宇宙飞船3D模型,在这篇文章中对模型制作流程和数学计算步骤进行介绍,并为模型添加简单的材质。
我们首先对要制作的3D模型轮廓进行估计,然后制作一个拥有足够多顶点的、与模型轮廓近似的网格对象(这里选用条带类网格对象),接着对网格的部分顶点位置进行变换产生模型的细节,最后为模型设置一个材质。
当然Babylon.js还支持更复杂的纹理类型,我翻译了Babylon.js官方教程中关于反射与折射,反射探查,地图纹理,多重材质,动态纹理,高亮描边的文档(部分文档翻译的不明确,因为官方文档本身的表述也不是很明确),可以在下载。
1、从顶部看,估计飞船的首尾长度为30单位,船体最宽处半径为7单位,船头处呈圆滑的锥形;从船头方向看,船体顶部为较扁的圆弧,船底部边缘圆滑中间平直(有点像上个世纪的航天飞机)。草图如下:
对于船体上部,高度低于2的部分直接使用半径为7的圆弧作为仓壁,高于2的部分则将高度削减二分之一;对于船体下部,将大致形状设为压扁到四分之一的半圆,再将高度低于-1的部分设为平直的船底。
规定船体沿x轴方向摆放,船体中心位于世界坐标系原点,船头朝向x轴负方向,船顶朝向y轴正方向。
事实上,在编写3D模型时固定的长度数值并没有决定性的意义(当然过大或过小可能导致物体脱出视场),决定模型形状的关键是各处尺寸之间的比例关系,具体的尺寸大小都可以在载入模型后根据需要进行缩放,这里将船体长度设为30单位是为了在预设的编辑场景里方便查看。
然后开始构建一个符合上述轮廓的条带网格。
2、开始编写条带网格的路径(顶点数组),首先生成一个半径是7的圆形路径,规定圆弧由128个顶点组成(事实上最终生成的路径有129个顶点):
1 function MakeRing(radius,sumpoint)//两个参数分别是圆形的半径和圆形由多少个顶点组成 2 { 3 var arr_point=[];//顶点数组 4 var radp=Math.PI*2/sumpoint;//每一个顶点在圆弧上转过的角度 5 for(var i=0.0;i<sumpoint;i++) 6 { 7 var x=0; 8 var rad=radp*i; 9 //算出顶点的y、z坐标 10 var y=radius*Math.sin(rad); 11 var z=radius*Math.cos(rad); 12 arr_point.push(new BABYLON.Vector3(x,y,z)); 13 } 14 arr_point.push(arr_point[0].clone());//为了保持首尾相连,要再添加一次第一个顶点 15 return arr_point; 16 }