×
文章路径: 翻译 > babylonjs

02-了解基础图形

发表于1年前(Mar 26, 2017 3:21:00 PM)  阅读 1994  评论 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的工作原理,同时提供了一些很多的示例来展示它的用途。

结束语

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

下一节

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

发表评论