02-了解基础图形
发表于5年前(Mar 26, 2017 3:21:00 PM)  阅读 5726  评论 0
标签: 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的工作原理,同时提供了一些很多的示例来展示它的用途。
结束语
至此,您已经看到了我们所有的基本图形,以及一些使用方法。请继续关注这个教程的新的基本图形,因为他们增长很快:在这一章节,您会找到更新列表以及所有的参数解释。放飞您的想象,将您对基本图形的想法表达在论坛上,尽可能地帮助我们增加新的基本图形。
下一节
我们看到图形都需要一些坐标信息来使图形有序的排列在场景里。现在我们来学习一些关于坐标(有时也成为平移)以及旋转和缩放。准备好了吗?当然!请点击下一个教程。