7.x.x Features - michal-repo/three-mesh-ui GitHub Wiki

As margins, paddings & borderWidth acts on top-right-bottom-left sides, their values can be:

• {number}: will be spread to each side
• {Array<number>(1)}: will fallback as {number}.
• {Array<number>(2)}: will spread array[0] to both top&bottom and array[1] to both right&left
• {Array<number>(4)}: will spread array[0] to top, array[1] to right, array[2] to bottom and array[3] left.
• {Vector4}: will fallback as {Array<number>(4)}
• {string}: will be splitted on spaces and and fallback on rules defined above.

Allowing a corner to use more space than its quadran, and preventing collision between quadrans.

Boxes elements (ThreeMeshUI.Block, ThreeMeshUI.Text) can automatically deduct its side from its children elements.

💡 📐 If a parent with "auto" size has only children with auto size, it would result in width|height: 0.

Boxes elements (ThreeMeshUI.Block, ThreeMeshUI.Text) can have relative size (in percentage) from its parent.

💡 📐 A parent with width|height: "auto" will never acquire size from "relative" children.

Most three-mesh-ui element properties are set by default to "inherit". A property with "inherit" value will try to find a non "inherit" value in its parent hierarchy. If all of its parent values are set to "inherit", then the default value will be used.

At any moment, we can override what default values are using ThreeMeshUI.DefaultValues.set({borderRadius:0.05});

Materials tries to use preprocessors to reduce computation on shaders. IE : Background Image fragment

if ( u_backgroundMapping == 1 ) { // contain
    // do stuff
} else if ( u_backgroundMapping == 2 ) {
   // do other stuff
}

// contain
#if BACKGROUND_MAPPING == 1
    // do stuff
#else
   // do other stuff
#endif

Mimics threejs by providing ThreeMeshUI.ShaderChunksUI will list any shader parts used by three-mesh-ui core.
Allowing customization and reuseability of existing programs.

While we still recommend to load any files using your own loader queue, fonts can be preload.

// Using `ThreeMeshUI.FontLibrary.prepare( fontFamily, [...fontFamily] )
// We can ensure any fontFamily passed in that function and theirs variants are properly loaded and setup
FontLibrary.prepare( 
    FontLibrary
        .addFontFamily("Roboto")
        .addVariant( "400", "normal", "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png")				 
        .addVariant("700", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
).then( buildUICallback );

💡 As ThreeMeshUI.FontLibrary.prepare() returns a Promise, you could also async await it.

In order to reduce the repeating code on each examples we provide, we built pieces to be used accross them. Feel free to re-use those parts if they fit your need.

• Behaviors
• Interactive raycaster & listeners
• Materials : MSDFFontMaterial and FrameMaterials