Creating Ribbons
Ribbon
The ribbon is a very versatile shape. Picture a ribbon in the real world with parallel wires running down its length. You can turn such a ribbon into a wide variety of shapes. Joining one long edge to its opposite you could form a tube and bend that into different shapes. This and more is possible with a Babylon.js ribbon. Instead of parallel wires a Babylon.js ribbon is formed from paths defined by an array of vector3s and how you define the paths determines the final shape.
On creation the local origin of a ribbon is coincident with the world origin. It is not possible to give a position relative to the constructed shape as this depends on the data sets used.
MeshBuilder
Usage :
const options = {pathArray: myPaths, //[vector3 array, vector3 array, vector3 array......]updatable: true}let ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", options, scene); //scene is optional and defaults to the current sceneoptions.pathArray: myNewPaths; //The length must equal the length of myPaths and myNewPaths[i].length === myPaths[i] for all ioptions.instance = true;// updates the existing instance of ribbon : no need for the parameter sceneribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myNewPath, instance: ribbon});
option | value | default value |
---|---|---|
option pathArray | value (Vector3[][]) array of array of Vector3, the array of paths REQUIRED | default value |
option closeArray | value (boolean) to force the ribbon to join its last and first paths | default value false |
option closePath | value (boolean) to force each ribbon path to join its last and first points | default value false |
option offset | value (number) used if the pathArray has one path only | default value half the path length |
option updatable | value (boolean) true if the mesh is updatable | default value false |
option sideOrientation | value (number) side orientation | default value DEFAULTSIDE |
option frontUVs | value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option | default value Vector4(0,0, 1,1) |
option backUVs | value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option | default value Vector4(0,0, 1,1) |
option instance | value (LineMesh) an instance of a ribbon to be updated | default value null |
option invertUV | value (boolean) to swap the U and V coordinates at geometry construction time (texture rotation of 90°) | default value false |
Examples
Update of a ribbon: Updating a Ribbon
double sided ribbon not updatable: Create a Non Updatable Double Sided Ribbon
double sided ribbon not updatable path lines in red: Create a Non Updatable Double Sided Ribbon With Red Path Lines
open ribbon: Create An Open Ribbon
with closePath true: Create a Ribbon with closePath = True
with closeArray true: Create a Ribbon with closeArray = True
Mesh
Usage:
const ribbon = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, closeArray, closePath, offset, scene);const ribbon = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, closeArray, closePath, offset, scene, updatable, sideOrientation, instance); //optional parameters after scene
More about ribbons on the next page