Skip to content

7.x.x Features

Jump to bottom
swingingtom edited this page Sep 2, 2022 · 6 revisions

margin|padding|borderWidth|borderRadius types overload

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.

BorderRadius mediation

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

width|height: "auto"

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.

width|height: relative (%)

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.

"inherit" values

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.

Default values override

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

WebGL preprocessors

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

Change & customize materials ( Background & Font )

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

Built-in fonts preload

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.

Re-useable examples pieces

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
Clone this wiki locally