2 Babylonjs基础入门 创建直线 曲线 虚线

画线

线是由在三维空间中一系列的线段组成的，一个线段的结尾也是下一个线段的开头。线条可以由在三维空间中的一组点进行描述。

接下来我们实现一条线，这条线将由三个点组成，这三个点的位置坐标分别是：（0,0,0），（0,1,1），（0,1,0）。
我们将使用这些点的位置创建出Babylon.js可以识别的Vector3对象，并将这些Vector3放入按顺序放入一个数组内供Babylon.js使用。

第一种方法，直接使用push方法放入到一个数组：

var myPoints = [];

var point1 = new BABYLON.Vector3(0, 0, 0);
myPoints.push(point1);
var point2 = new BABYLON.Vector3(0, 1, 1);
myPoints.push(point2);
var point3 = new BABYLON.Vector3(0, 1, 0);
myPoints.push(point3);

第二种，直接声明数组是，将顶点对象放入：

var myPoints =[
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 1, 1),
    new BABYLON.Vector3(0, 1, 0)
];

接下来我们将使用MeshBuilder.CreateLines函数，并将数组作为参数传入，实现线的创建：

var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

属性	值	默认值
points	(Vector3[]) 一个由Vector3对象组成数组
updatable	(boolean) 如果当前线可以更新，需将此值设置为true	false
instance	(LineMesh)创建一个更新实例的线时，需要将需更新实例对象传入	null
colors	(Color4[]) Color4组成的数组，对应每一个点的颜色	null
useVertexAlpha	(boolean) alpha混合，如果设置为false，将由更快的渲染速度	true

创建虚线

我们可以使用MeshBuilder.CreateDashedLines函数来创建虚线。

var line = BABYLON.MeshBuilder.CreateDashedLines("lines", {
     points: dashedPoints,
     dashNb:dashedPoints.length, //预期所有的实现的个数
     dashSize:2, //实线的大小
     gapSize:2 //间隔的大小
 }, scene);

属性	值	默认值
points	(Vector3[]) 一个由Vector3对象组成数组
dashSize	(number)虚线实线部分长度	3
gapSize	(number) 虚线间隔部分长度	1
dashNb	(number) 虚线实现部分的个数	200
updatable	(boolean) 如果当前线可以更新，需将此值设置为true	false
instance	(LineMesh)创建一个更新实例的线时，需要将需更新实例对象传入	null

创建曲线

其实曲线的实现是由无限的直线拼接组成。接下来我们将通过CreateLines实现画一个圆。
首先我们使用三角函数将顶点创建出来：

//存储线的点的集合
var myPoints = [];
for(let i=0; i<=360; i++){
    myPoints.push(new BABYLON.Vector3(Math.sin(i/180*Math.PI), Math.cos(i/180*Math.PI), 0)); 
}

上面我们创建了361个顶点组成的数组，这个数组顶点刚好是沿Z轴旋转一周的顶点的集合。
然后，使用CreateLines添加到场景当中即可

//创建一条实线
var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

实时更新线

Babylon允许我们实时更新线和虚线。接下来我们实现如何实时更新。
首先，创建一条线的实例，当前线可以被更新，我们创建时需要将它的updatable属性设置为true。

 //当前线所经过的所有顶点的集合
 var myPoints = [
     new BABYLON.Vector3(0, 0, 0),
     new BABYLON.Vector3(0, 3, 5),
     new BABYLON.Vector3(5, 5, 5)
 ];

 //创建一条线
 var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints, updatable: true/*如果需要更新将updatable设置为true*/}, scene);

然后，我们再创建一组新的顶点，这组顶点的个数和更新的实例的顶点个数相同。

 //创建一个新经过的顶点集合，要求必须和原来的线的顶点数一样
 var newPoints = [
     new BABYLON.Vector3(0, 5, 0),
     new BABYLON.Vector3(5, 3, 5),
     new BABYLON.Vector3(2, 5, 2)
 ];
//更新线
BABYLON.MeshBuilder.CreateLines("lines", {points:newPoints, instance: lines/*增加instance配置，来表示更新的原来的线对象*/});