×
文章路径： 翻译 > babylonjs

02-了解基础图形

发表于3年前(Mar 26, 2017 3:21:00 PM)  阅读 3518  评论 0

分类: 翻译 babylonjs

标签: babylonjs

介绍

在这篇教程，我们将学习如何通过Babylon.js来创建像盒子，球体还有平面这样的基础图形。

Playground Demo Scene02-7个基础的形状/物体

我们如何画出这些？

一个简单的办法就是访问Playground Demo Scene02，选择顶部菜单中的Get.zip选项，index.html将会同zip一起下载下来。index.html包含了我们上图的所有基本图形。记住这个链接地址，接下来我们还会多次提到它。

我相信您已经阅读了Babylon.js介绍和上一章节的教程，而且知道了如何处理这些场景文件。所以，我们今天不再讨论这些，我们直接从Playground Demo Scene02开始。在浏览器新窗口或者新标签打开这个链接地址，然后回到本教程，我们正式开始。

我们创建了很多基础图形，我们从box开始：

  • 创建Box（盒子）
var box = BABYLON.Mesh.CreateBox("box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建box方法的参数列表为：name（名称），size（大小），scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。最后两个参数可以省略使用默认属性，如：

var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
  • 创建Sphere（球体）
var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);

创建sphere方法的参数列表为：name（名称），number of segments（细节质量），size（大小），scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。最后两个参数可以省略使用默认属性，如：

var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);

注意number of segments和size的值要相适配。

  • 创建Plane（平面）
var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建plane方法的参数列表为：name（名称），size（大小），scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。最后两个参数可以省略使用默认属性，如：

var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
  • 创建Disc（圆盘或者规则多边形）
var disc = BABYLON.Mesh.CreateDisc("disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建disc方法的参数列表为：name（名称），radius（半径），tessellation（），scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。最后两个参数可以省略使用默认属性，如：

var disc = BABYLON.Mesh.CreateDisc("disc", 5, 30, scene);

通过设置tessellation的值，可以画出一个规则多边形：

值为3是三角形；

值为4是正方形；

值为5是五边形；

值为6是六边形，等等。

  • 创建Cylinder（圆柱体）
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建cylinder方法的参数列表为：name（名称），height（高度），diamTop（），diamBottom（），tessellation（），heightSubdivs（），scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。最后两个参数可以省略使用默认属性，如：

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene);
  • 创建Torus（圆环）
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建torus方法的参数列表为：name（名称），diameter（直径），thickness（厚度），tessellation（），scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。最后两个参数可以省略使用默认属性，如：

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene);
  • 创建Knot（结）
var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建knot方法的参数列表为：name（名称），radius（半径），tube（材料类型），radialSegments（），tubularSegments（），p（），q（），scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。最后两个参数可以省略使用默认属性，如：

var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);

您可以从这里获取更多关于torus、knots的信息。

  • 创建Lines（线段）
var lines = BABYLON.Mesh.CreateLines("lines", [
    new BABYLON.Vector3(-10, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(0, 0, -10),
    new BABYLON.Vector3(0, 0, 10)
], scene);

创建lines方法的参数列表为：name（名称），[vector]（坐标数组），scene（场景）。

我解释下Lines得构造函数是如何工作的，不过我相信您根据上面的示例代码已经可以看出来了。注意“[”和“]”符号，这表示是一个JavaScript数组。数组第一个vector3元素指明线段的开始位置，然后用逗号分隔，下一个vector3元素指明线段要画至的位置，这样，每一个逗号，表明线段一个新的位置，您可以随意添加多个vectors，但是最后一个请不要用逗号结束。

  • 创建DashedLines（虚线）
var dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, scene);

创建dashedlines方法的参数列表为：name（名称），[vector]（坐标数组），dashSize（线段长度），gapSize（间隙长度），dashNumber（），scene（场景）。

跟线段一样，虚线通过一组坐标来绘制。

您也许会对我们的LinesSystem感兴趣。

  • 创建Ribbon（丝带）

ribbon是什么？

首先，定义一系列连续的点，构成一条路径。然后，用另外一系列连续的点构造另外一条路径。现在，用第一条路径和第二条路径的交点来构造一个三角面，就像穿鞋带，这就是ribbon。

您的路径并不需要是平行的，他们甚至不需要再同一平面。无论你想要什么，ribbon都会根据你的路径绘制出来。

现在，我们来想象不止有两条路径，有很多不同连续的路径，这样绘制出来的是一个连续的面。

var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", [path1, path2, ..., pathn], false, false, 0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建ribbon方法的参数列表为：name（名称），pathArray（路径数组），closeArray（），closePath（），offset，scene（场景），updatable？（是否实时更新，如果它稍后会修改的话），side orientation（方向）。

  • name：字符串，名称
  • pathArray：path路径数组。path是一组连续的verctor3值。每个ribbon至少需要一个path，每个path至少包含4个verctor3值。
  • closeArray：boolean值。如果为true，将以最后一个path和第一个path构造一个额外的三角面。
  • closePath：boolean值。如果为true，path数组中的每个path都是封闭的，即收尾相连。
  • offset：intger值（默认值为path长度的一半）。只有当path数组只有一个值得时候是必须给出的。当有多条路径时，该值自动被忽略。
  • scene：场景。
  • updatable：boolean值，表示是否稍后需要更新图形。
  • sideOrientation：方向（BABYLON.Mesh.FRONTSIDE / BACKSIDE / DOUBLESIDE / DEFAULT）。

最后两个参数可以省略使用默认属性，如：

var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", [path1, path2, ..., pathn], false, false, 0, scene);

如果您想了解该方法的更多细节，您可以浏览Parametric Shapes这部分内容。

  • 创建Tube（材料）
var tube = BABYLON.Mesh.CreateTube("tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);

创建Tube方法的参数列表为：name，path，radius，tesselation，optional radiusFunction，cap，scene，updatable，sideOrientation。

  • name：名称
  • path：一段连续的坐标数组，最少包含两个值。
  • radius：半径，当radiusFunction参数为null时将起作用。
  • tesselation：辐射片段的数量。
  • radiusFunction：可选参数，一个JavaScript function，返回半径值。可以被设置成null。
  • cap：BABYLON.Mesh.NO_CAP, BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL。
  • scene：场景。
  • updatable：boolean值，表示是否稍后需要更新图形。
  • sideOrientation：方向（BABYLON.Mesh.FRONTSIDE / BACKSIDE / DOUBLESIDE / DEFAULT）。

最后两个参数可以省略使用默认属性，如：

var tube = BABYLON.Mesh.CreateTube("tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene);

tube同样可以像Parametric Shapes一样使用通过设置一个radius function。

Updateble

这个参数在每一个方法里面都有，他标识物体是否在创建以后还能进行更新。

如果为false（默认为false），该物体的数据GPU将只绘制一次。

如果为true，物体的数据GPU将在每一帧都会进行重新计算和绘制。

Side Orientation

当一个物体创建时，我们可以选择给他一个side orientation。

Side orientation是用来控制物体可见区域，或者光照方向的。它的可选值有四个：

  • BABYLON.Mesh.FRONTSIDE,

  • BABYLON.Mesh.BACKSIDE,

  • BABYLON.Mesh.DOUBLESIDE,

  • BABYLON.Mesh.DEFAULT。这是默认值。

这个值是可选的，如果没给出的话，将使用默认值DEFAULT也是FRONTSIDE。

（我们假定backFaceCulling被设置为default）

在这个实例里，我们创建了基础图形，box，sphere还有plane，但并没有设置material属性。

如果您来到plane的下面，或者box和sphere的里面，您会发现这些物体看不见了。Babylon.js提供的side orientation默认值为FRONTSIDE，意为每个面只有一个front view。

测试地址：http://www.babylonjs-playground.com/#14RNAU#4

如果您给您的物体设置一个test material，设置meterial.backFaceCulling=false，并用灯光照亮它，您现在可以看到他的背面（或者在内部看到它），但是还是不能看到光照。因为，现在默认的side orientation还是FRONTSIDE。

（您可以禁用backFaceCulling通过这个sideOrientation属性）

现在，我们改变sideOrientation参数为BABYLON.Mesh.BACKSIDE(同时移除test material)。您将只能看到plane的背面以及box、sphere的内部。

测试地址：http://www.babylonjs-playground.com/#14RNAU#5

如果您给物体一些material，您将看到光线只能在plane的背面以及box、sphere的内部。

（您可以禁用backFaceCulling通过这个sideOrientation属性）

最后，将sideOrientation参数改为BABYLON.Mesh.DOUBLESIDE。正如您猜测的那样，物体的每一面都能看见。如果你给了一个material，光线也能在每个面上看到。

测试地址：http://www.babylonjs-playground.com/#14RNAU#6

为什么不将BABYLON.Mesh.DOUBLESIDE值作为默认值呢？

因为这个值创建了两个前端顶点，换言之，它将是原来的两倍重。

（您不能禁用backFaceCulling通过BABYLON.Mesh.DOUBLESIDE值）

基础图形-Grounds

现在我们谈论的都是Palyground Demo Scene里面的基本图形，但是一些重要的基础图形没有包括在这个演示场景里。他们是各种各样的绘制“ground”的元素。让我们来看一看：

  • 创建Ground
var ground = BABYLON.Mesh.CreateGround("ground", 6, 6, 2, scene);

参数列表为：name，width，depth，subdivs，scene。

在我们的Palyground Demo Scene 01里面我们使用了CreateGround这个构造方法。所以您可以通过上面的链接看到一个Ground。

  • 通过HeightMap创建Ground
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);

参数列表为：name，heightmapPath，width，depth，subdivs，minheight，maxheight，scene，updatable，successCallback。

HeigthMap grounds非常简单，但是我们还是决定单独开辟一个章节来讲述它，因为它在Babylon.js里面非常重要。您可以阅读我们的HeightMap Tutorial来获取更多关于heightMap grounds的信息。

  • 创建Tiled Ground

感谢论坛用户Kostar111提供的这个方面的Tiled Ground构造方法。下面是创建一个Tiled Ground所必备的基本代码。

var precision = {
    "w" : 2,
    "h" : 2
};
var subdivisions = {
    'h' : 8,
    'w' : 8
};
var tiledGround = BABYLON.Mesh.CreateTiledGround("Tiled Ground", -3, -3, 3, 3, subdivisions, precision, scene, false);

参数列表为：name，xmin，zmin，xmax，zmax，subdivisions=titles数量（subdivisions.w:内部宽度；subdivisions.h:内部高度），precision=一个tile里面subdivisions的数量（precision.w:内部宽度；precision.h:内部高度），scene，updatable。

Kostart111还提供了一个很好的使用教程给我们。点击这里查看。在教程里，Kostar111完整阐述了tiled ground的工作原理，同时提供了一些很多的示例来展示它的用途。

结束语

至此，您已经看到了我们所有的基本图形，以及一些使用方法。请继续关注这个教程的新的基本图形，因为他们增长很快：在这一章节，您会找到更新列表以及所有的参数解释。放飞您的想象，将您对基本图形的想法表达在论坛上，尽可能地帮助我们增加新的基本图形。

下一节

我们看到图形都需要一些坐标信息来使图形有序的排列在场景里。现在我们来学习一些关于坐标（有时也成为平移）以及旋转和缩放。准备好了吗？当然！请点击下一个教程。

发表评论