# Creating Ribbons

> Learn how to create ribbons in Babylon.js.

Source: https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/ribbon

## 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. By joining one long edge to its opposite, you could form a tube and bend it 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 :

```javascript
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 scene

options.pathArray: myNewPaths; //The length must equal the length of myPaths and myNewPaths[i].length === myPaths[i] for all i
options.instance = true;

// updates the existing instance of ribbon : no need for the parameter scene
ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myNewPath, instance: ribbon});
```

option|value|default value
--------|-----|-------------
pathArray|_(Vector3[][])_  array of array of Vector3, the array of paths **REQUIRED**
closeArray|_(boolean)_  to force the ribbon to join its last and first paths|false
closePath|_(boolean)_  to force each ribbon path to join its last and first points|false
offset|_(number)_  used if the pathArray has one path only|half the path length
updatable|_(boolean)_ true if the mesh is updatable|false
sideOrientation|_(number)_ side orientation|DEFAULTSIDE
frontUVs|_(Vector4)_  **ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option** | Vector4(0,0, 1,1) 
backUVs|_(Vector4)_  **ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option** | Vector4(0,0, 1,1) 
instance|_(LineMesh)_ an instance of a ribbon to be updated|null
invertUV|_(boolean)_ to swap the U and V coordinates at geometry construction time (texture rotation of 90°)|false

### Examples

Update of a ribbon: [Playground: Updating a Ribbon](https://playground.babylonjs.com/#F6JW5W#5) - Simple example of updating a ribbon.

double sided ribbon not updatable: [Playground: Create a Non Updatable Double Sided Ribbon](https://playground.babylonjs.com/#F6JW5W#6) - Simple example of creating a non updatable double sided ribbon.
double sided ribbon not updatable path lines in red: [Playground: Create a Non Updatable Double Sided Ribbon With Red Path Lines](https://playground.babylonjs.com/#F6JW5W#7) - Simple example of creating a non updatable double sided ribbon with red path lines.  
open ribbon: [Playground: Create An Open Ribbon](https://playground.babylonjs.com/#F6JW5W#8) - Simple example of creating an open ribbon.
with closePath true: [Playground: Create a Ribbon with closePath = True](https://playground.babylonjs.com/#F6JW5W#9) - Simple example of creating a ribbon with closePath set to true. 
with closeArray true: [Playground: Create a Ribbon with closeArray = True](https://playground.babylonjs.com/#F6JW5W#10) - Simple example of creating a ribbon with closeArray set to true. 


## Mesh
Usage: 
```javascript
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.