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

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

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

本文目录

  1. 参数化形状-101课程
    1. 线条Lines
      1. Updatable可更新形状的物体
      2. Instance选项
      3. Vect3和Vect4
      4. Color3和Color4
  2. 下一步
  3. 延伸阅读
    1. 基础-难度L1
  4. 贡献者

参数化形状-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),而参数形状也同样是这样。其实无论是位置、大小还是方向,我们都可以对物体进行调整,准备好了么?下面就让我们开始下一章吧!物体的位置和旋转

延伸阅读

基础-难度L1

如何使用MeshBuilder方法来创建常规物体
如何使用旧方法来创建常规物体
MeshBuilder与旧方法的比较

贡献者

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

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