5. 具有参数化形状的物体

本教程翻译自官方教程Parametric Shapes，各位也可以进入本站镜像站点查看

本文目录

参数化形状-101课程

线条Lines

Updatable可更新形状的物体

Instance选项

Vect3和Vect4

Color3和Color4

下一步

延伸阅读

基础-难度L1

贡献者

参数化形状-101课程

在本章我们介绍一种特殊的形状，它们需要设置对应数据集或者参数才能画出来，包括：线条、线段系统、缎带、管子、挤压形状、车床形状以及不规则多边形等。由于101课程只是为入门者准备的，所以这里我们不打算深入太多，本章只是抛砖引玉的介绍一下线条的使用。此外，我们在课程中会使用 MeshBuilder 方法来创建物体，可能你在Playground中会接触到老版本 BABYLON.Mesh.Create 的创建方法，这个方法已经淘汰，所以请特别的注意。关于两个方法的优缺点以及创建所有参数化形状的方法，各位请移步到延伸阅读中去进一步探索。

线条Lines

    在3D世界中，线条由一系列分割的线段组成，它们首尾相连的排列在一起。从具体创建上来说，线条是由一系列的点组成。
    例如 (0, 0, 0), (0, 1, 1), (0, 1, 0) 这三个点会形成2条线段，把线段进行首尾相连，最后会形成一个弯折的线条。
    在Babylon中，这些点由是三维向量表示，会由 BABYLON.Vect3 对象进行初始化，然后把初始化好的点按顺序形成数组，最后传递给CreateLines进行线条的绘制。

//可以先初始化一个数据
var myPoints = [];
//然后初始化三个点，push到数组里
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)
];

由点组成的二维数组myPoints，我们需要把他作为Option中的points对象传递给CreateLines函数。

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

Playground 创建一个线条
 Playground 创建一个DNA螺旋线

你也可以用CreateDashedLines创建一条虚线，它比创建普通线条多出了三个选项：dashNb、dashSize、gapSize，可以定制虚线的样式。
CreateLines方法的 options 参数说明如下：

option	值类型&说明	default value
points	(Vector3[]) 点的数组，绘制线条所需的点路径	null
updatable	(boolean) 如果设置为true，则表示该物体的顶点数据可以被更新	false
instance	(LineMesh) 接受另一个线条的实例，把其Option导入到这里来	null
colors	(Color4[]) 颜色的数组，一般与points一一对应，定义每个点的颜色，两点之间线段的颜色由前一个点确定	null
useVertexAlpha	(boolean) 如果设置为false，则线条不支持透明度，会节省资源，增加渲染速度	true

Updatable可更新形状的物体

线条和虚线也有Updatable选项，假如设置为true，如果为真，则可以更改与线的每个顶点之间相关联的数据，从而进一步改变线条的路径。有关更详细的内容，可以看这里怎么样更新顶点

Instance选项

线条里有一个Instance选项，这个方法可以通过传递一组新的Points来更新线条的样式，形象的说也就是让线条可以扭动起来。首先我们要把Updatable设置为true，然后把新的点初始化为一个线条并传入到Instance中。请注意，新的点必须和之前点的数量保持一致，也就是Points数组的长度必须是一样的。

//首先创建一个线条
var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myArray, updatable: true}, scene);
//然后把上面的线条作为一个instance传入到新创建的线条中，完成更新，新线条可以不用传入Scene实例，也就是第三个参数不用传。注意myArray和myNewArray长度必须一致。
lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myNewArray, instance: lines});

Playground DNA螺旋线应用Instance实例

大多数（但不是所有）参数化形状都有Instance选项，因此都可以用这种方式更新它们的参数值。

Vect3和Vect4

向量是3D世界中的基本单位，Vect3表示三维向量，也叫作三元数。Vect4表示四维向量，也叫作四元数。Vect3用得比较多，例如位置、旋转、放大缩小都使用了Vect3，用它来表示X、Y、Z 这3个不同的坐标。而Vect4一般用来做三维空间的旋转变换，具体可以看看知乎的一篇科普文章如何形象地理解四元数？

var position = new BABYLON.Vect3(1,1,1);//三维向量
var quaternion = new BABYLON.Vect4(1,1,1,1);//四维向量

Color3和Color4

顾名思义，这代表了颜色，Color3表示rgb，Color4表示rgba，只是Babylon中的Color值都是用0至1表示的，例如Color3(0.5,0.5,0.5)，就相当于rgb(128,128,128)。

var rgb = new BABYLON.Color3(0.5, 0.5, 0.5);//颜色
var rgba = new BABYLON.Color3(0.5, 0.5, 0.5, 1);//透明度颜色

下一步

在上一章中关于常规形状的讲解中，你可能已经发现了，无论我们创建多少个物体，它们总是处于同一个位置，也就是3D场景的原点处(0, 0, 0)，而参数形状也同样是这样。其实无论是位置、大小还是方向，我们都可以对物体进行调整，准备好了么？下面就让我们开始下一章吧！物体的位置和旋转

贡献者

翻译/校对: Cow&Sheep
Playground: 天才
技术支持: Dushusir github

参与贡献? 联系alexads@foxmail.com