Explore basic Elements---webgl-based H5 3D game engine Babylonjs

Introduced

In this tutorial, we will learn how to use Babylon.js to create basic elements, such as boxes, spheres, and planes of peace.

Casino Demo Scene 2-seven basic shapes/grids

How do I do this?

An easy way is to start using the underlying elements by visiting the casino demo scene . You may want to use the pop-up menu's ' Download. zip package ' option. The index.html file you get in the ZIP archive contains everything you need to start creating the underlying elements. Remember that link, because we'll talk more about it.

I'm sure you've read babylon.js beginner's tutorial and Previous tutorials , so you should know how to set the scene file format. So, we're not talking about it anymore. We will step through the casino demo scene to learn. Open the link in a new tab or window and return here and we'll start right away.

Starting with the box, we created the high school base elements, where they were positioned at the end of the function (to prevent them from stacking up). Let's talk about each of the underlying shapes/grids.

• Create a Box

var box = BABYLON.Mesh.CreateBox("box"6.0false, BABYLON.Mesh.DEFAULTSIDE);

The parameters are: First name, box size, they will be placed in the scene, whether it can be updated? (If the mesh must be updated later) and an optional face facing (see below). If you need the default performance then the last two parameters can be ignored:

var box = BABYLON.Mesh.CreateBox("box"6.0, scene);

• Create a Sphere

var sphere = BABYLON.Mesh.CreateSphere("sphere"10.010.0false,  BABYLON.Mesh.DEFAULTSIDE);

The parameters are: first name, number of segments (height details or not required), size, the scene to be put into, whether it can be updated? (If the mesh must be updated later) and an optional face facing (see below). If you need a default performance then the last two parameters can be ignored:

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

Remember to adjust the number of segments based on your grid object to the school;)

• Create a plane

var plane = BABYLON.Mesh.CreatePlane("plane"10.0false, BABYLON.Mesh.DEFAULTSIDE);

The parameters are: name, size, and the scene to be placed, can it be updated? (If the mesh must be updated later) and an optional face facing (see below). If you need the default performance, then the last two parameters can be ignored:

var plane = BABYLON.Mesh.CreatePlane("plane"10.0, scene);

• Create a platter (or a regular polygon)

var disc = BABYLON.Mesh.CreateDisc("disc"530false, BABYLON.Mesh.DEFAULTSIDE);

The parameters are: first name, radius, number of sides, scene, updatable No, and optional orientation (see below). If you need a default performance, the last two parameter parameters can be ignored:

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

Depending on the value of tessellation , you can create a polygon:
3 produces a triangle,
4 produces a square,
5 Produce a Pentagon,
6 produces a hexagon, 7 produces a seven-edged shape, 8 produces a gossip shape, and so on.

• Create a cylinder

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder"33361false, BABYLON.Mesh.DEFAULTSIDE);

Parameters are: Name, height, top diameter, bottom diameter, number of sides, high-dimensional subdivision, scene, updatable No, and optional orientation (see below). If you need the default performance, then the last two parameters can be ignored:

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder"33361, scene);

• Create a torus body

var torus = BABYLON.Mesh.CreateTorus("torus"5110false, BABYLON.Mesh.DEFAULTSIDE);

Parameters are: name, diameter, thickness, number of sides (height detail or not), scene, updatable No and optional orientation (see below). If you use the default performance then the last two parameters can be ignored:

var torus = BABYLON.Mesh.CreateTorus("torus"5110, scene);

• Create a knot

var knot = BABYLON.Mesh.CreateTorusKnot("knot"20.51286423false, BABYLON.Mesh.DEFAULTSIDE);

The parameters are: name, radius, tube, number of segments on radius, tubularsegments, p, Q, Scene, updatable No and optional orientation (see below). If you use the default performance then the last two parameters can be ignored:

var knot = BABYLON.Mesh.CreateTorusKnot("knot"20.51286423, scene);

Learn more about knots here .

• Create a Linetype grid

var lines = BABYLON.Mesh.CreateLines("lines", [    new BABYLON.Vector3(-1000),    new BABYLON.Vector3(1000),    new BABYLON.Vector3(00, -10),    new BABYLON.Vector3(0010)], scene);

The parameters are: name, [all well delimited vector array], scene.

I can explain how the Linetype grid works, and I think has penny can be known by observing the demo code above. Note [and]. The two are the start and end flags of the array, and the value is another type of value for JavaScript. The first ternary vector in the array is where the line begins. After that, a comma, and then the next ternary vector is an anchor point for the line drawing line. Then, another comma, and another three-dimensional marker point new anchor point. You can add any number of vectors, but notice that there is no comma following the last ternary vector. Please organize the array of vectors in a format.

• Draw dot-dash grid

var dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, 场景);

Parameters are: name, [ternary vector array], dash size, gap size, segment dash number, scene.
As many line segments, each segment is first presented in the space in the form of a ternary vector group. The above function sets the number of segments in this dotted line, each defined by two consecutive ternary vectors.
The dash size and gap size are the relative sizes of each dash and gap between the pointing dash.

You may be attracted to our new line system.

• Create a strip

What is a strip?

First, imagine a series of paths defined by successive points.
Next, imagine another series of successive points, defined by a path.
Now, if you're building a triangle with each other on the first and second paths, like the way you tie your shoelaces, you get a strip.

There is no need for parallelism between your paths. They do not even need to be straight lines or within the same plane.
They can be any way you want. The strip is along the path you define.

Now, imagine, not two paths, you define a number of different paths in succession.
All strips formed between pairs of paths are combined to form a continuous surface.

var ribbon = BABYLON.Mesh.CreateRibbon("ribbon"falsefalse0false, BABYLON.Mesh.DEFAULTSIDE);

Parameters are: Name, path array, closed array, closed path, offset, scene, updatable no? (If the mesh is to be modified later) and an optional orientation (see below).

• Name: A string that you want to give you the name of the shape definition,
• Path array: An array of fill paths. The path is also an array, populated by a series of successive point ternary vectors . You need at least one path to form a strip, and each path contains at least four ternary vectors ,
• Closed array: Boolean, if True, creates an additional set of triangles from the first and last path in the path array .
• Closed Path: Boolean value, if true, then the last point of each path in the path array is connected to its first point,
• Offset: A positive number (the default is half the path size) and must be specified only if the path array has only one path. At this point the strip is made up of point I and i+ offset points on the single path. This parameter is ignored if there are more than one path in the path array ,
• Scene: Current Scene object,
• Updatable No: Boolean value that is set to TRUE if the Ribbon is updated after it is allowed
• Facing: The desired face orientation (BABYLON. Mesh.frontside/backside/doubleside/default).

If you only need to use the default performance then the last two parameters can be ignored:

var ribbon = BABYLON.Mesh.CreateRibbon("ribbon"falsefalse0, scene);

If you want to know more details about how to handle this method, you might read the parametric styling section.

• * Start a Tube *

var tube = BABYLON.Mesh.CreateTube("tube"false, BABYLON.Mesh.DEFAULTSIDE);

Parameters are: Name, path, radius, surface subdivision, optional radius function, hood, scene, updatable no, orientation.

• Name: string, the name of the pipe grid,
  
  • Path: A continuous ternary vector array, at least two ternary vectors,
  • Radius: value, the radius of the pipe, used when the radius function parameter is set to null ,
  • Surface Subdivision: Radial number of segments,
  • Radius function: Optional , a JavaScript function that returns a RADIUS value. This can be set to null,
  • Head cover: BABYLON. Mesh.no_cap, BABYLON. Mesh.cap_start, BABYLON. Mesh.cap_end, BABYLON. Mesh.cap_all,
  • Updatable No: Boolean value, whether the tube can be updated later,
  • Facing: expected useful orientation (forward, posterior, or bidirectional).

If you just want to use the default performance then the last two parameters can be ignored:

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

Tubes can also be used as parametric styling by setting a RADIUS function.

Can update no

This parameter, which appears in each mesh creation method ... Tells the grid whether it can be updated after it is created.
If False (the default), the number of meshes is transferred only once to the GPU.
If true, the grid data can be recalculated and passed to the GPU when each frame is refreshed.

Towards

When a grid is created, you can provide an optional orientation for it.
The orientation is used to provide visibility and/or light reflectivity.
There are four possible values for this value:
* BABYLON. Mesh.frontside,

• BABYLON. Mesh.backside,
• BABYLON. Mesh.doubleside,
• BABYLON. Mesh.default This is the default value, currently the same as frontside.

This parameter is optional. If not provided, the default value is set.

(We assume that the default backfaceculling is enabled)

For example, suppose you create a basic shape like a box, a sphere, or a plane, and you don't give it a set material.
If you go behind a plane or inside a box/sphere, you will notice that the faces are invisible: the babylon.js grid is usually made up of the default orientation frontside . This means that each face is visible only on one side.
Under test: http://www.babylonjs-playground.com/#14RNAU # #

If you apply a material to the grid, set material.backfaceculling = False, and illuminate it with the light source, you will notice the back (or inside) ... It is now visible, but it does not reflect the light. The same reason: the default orientation is still frontside.
(You can use this value to disable _backfaceculling_)

Now, in your grid constructor, just change the orientation parameter to BABYLON. Mesh.backside. (also remove the material you are experimenting with.) You can only see the back of the plane, or only the inside of the box and sphere (the inner face).
Test: http://www.babylonjs-playground.com/#14RNAU # #

If you provide some material for the grid, you can see that the light source can only be irradiated to the back (flat) or inside (box, sphere, etc.).
(You can disable _backfaceculling_ with _ values)

Finally, change the orientation parameter value to BABYLON. Mesh.doubleside.
As you guessed, the mesh faces are now visible on both sides. And if you provide a material, the light will also reflect on both sides.
Test: http://www.babylonjs-playground.com/#14RNAU

So why not always use BABYLON. Mesh.doubleside as the default value?

Because this value creates a forward polygon, the mesh is twice times the vertex. In other ways, your grid consumption will double.
(You can't use _babylon.) Mesh.doubleside_ value to disable _backfaceculling_)

More base Elements-ground

In this case, we talked about the underlying element in the Casino demo Scenario , but there are more important mesh shapes (basic elements) that are not included in the demo scenario. They (the example below) are the various ways babylon.js create ' ground '. Let's see:

• Create a ground

var ground = BABYLON.Mesh.CreateGround("ground"662, scene);

Parameters are: Name, width, depth, number of sub-segments, scene

Our Casino demo scene uses a Createground constructor ... So you can use the link above to see how it behaves.

• Create a ground using a height map

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground""heightmap.jpg"200200250010false, successCallback);

Parameters are: Name, height chart path, width, depth, number of sub-segments, min height, max height, scene, updatable no, successful callback

Height map the ground is simple, but we decided to create a separate tutorial to talk about it so that we can tell more about this important feature of Babylon.js. Take a look at our Altitude map Tutorials To learn all the height of the ground floor knowledge.

• Create a tile map

Thanks to the Forum user Kostar111 provides this handy tile map construction method. Here is the basic code needed to create a tile map.

var  Precision = { "W" : 2 ,  " H ": 2 }; var  subdivisions = { ' h ' : 8 ,  ' W ' : 8 };var  tiledground = BABYLON. Mesh.createtiledground ( "tiled Ground" ,-3 ,-< Span class= "Hljs-number" >3 , 3 , 3 , Subdivisions, precision, scene, false );  

Parameters are: Name, minimum x value, minimum z value, maximum x value, Max Z, subdivision quantity = Tile quantity. (SUBDIVISIONS.W: The number of subdivisions on a width; Subdivisions.h: The number of subdivisions on a height), the precision = the number of subdivisions within a tile. (PRECISION.W: precision on width; precision.h: accuracy on height), scene, updatable No.

Kostar111 good guy to the end: it gives us a good tutorial on how to use tile maps. Click here to view the tutorial. In that link, Kostar111 a comprehensive description of how the tile floor works, but also offers some babylon.js play scenes that nicely demonstrate some of its many uses.

Conclusion

That's it! Now that you've looked at all of our basic elements, we've seen some of the ways they're used. Keep an eye on this in the tutorial because the new base elements will soon be added: You will find an updated list and explanations of all of its parameters in this section .
Be free to envision your own creative elements and submit them to the forum. If you can, please help us to add the base element list.

Next

We've seen that we need a bit of ' positioning ' to keep our base elements from overwriting another underlying element in the scene. Now we further learn to position (sometimes called panning) and rotate and scale. You sure you're ready for this? Click here to proceed to the next tutorial.

Explore basic Elements---webgl-based H5 3D game engine Babylonjs