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 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
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