Skip to content

6.x.x to 7.x.x Migration Guide ( users )

Jump to bottom
swingingtom edited this page Sep 2, 2022 · 1 revision

Rule #1

When migrating, keep the console open!

Property depreciation

Properties of three-mesh-ui elements tries to fit as much as possible their html/css counterparts. When available.

Previous properties are still valid but throw depreciations warnings.

  • alignContent as been renamed as alignItems
  • backgroundTexture as been renamed as backgroundImage
  • contentDirection as been renamed as flexDirection
  • content as been renamed as textContent
  • hiddenOverflow as been renamed as overflow
  • interLine as been renamed as lineHeight

Most of those depreciated properties kept their original meaning except :

  • ⚠️ lineHeight : Now acts like lineHeight in css. Previous values of 0.05, will compact all the lines of a text on the same y values. Whereas 1.0 will ensure exactly 1x the text linebase between lines.
  • ⚠️ overflow : Now expects "visible" or "hidden" instead of a boolean.

FontFamily best practice

While three-mesh-ui still allows to set fontFamily with pair of 'fontTexture' values :

new ThreeMeshUI.Text({ fontFamily: url|loadedJson, fontTexture: url|Texture });

Even without requiring you to preload your fonts, you should use ThreeMeshUI.FontLibrary.addFontFamily("fontName") which will return you a ThreeMeshUI.FontFamily instance. On that instance you would be able to add variants :

const robotoFontFamily = ThreeMeshUI.FontLibrary.addFontFamily( "Roboto" );

// addingVariants
robotoFontFamily.addVariant( "400" , "normal", url|loadedJson, url|Texture);
robotoFontFamily.addVariant( "bold" , "italic", url|loadedJson, url|Texture);

And now we can use that fontFamily or even the fontFamily name we registered.

new ThreeMeshUI.Text({ fontFamily: robotoFontFamily, fontWeight: "400", fontStyle : "normal" });
// or
new ThreeMeshUI.Text({ fontFamily: "Roboto", fontWeight: "bold", fontStyle : "italic" });

ThreeMeshUI.Text is now 'hybrid'

the Text element of three-mesh-ui now acts a Box; width, height, background, etc... But don't layout its children as flex, but as Inline.

myText.set({textContent:"7.x.x"}) or myText.textContent = "7.x.x" will automatically append a ThreeMeshUI.Inline as child.

// Similar to
myText.add( 
    new ThreeMeshUI.Inline({textContent:"7.x.x"})
);

.bestFit as example Behavior

BestFit feature has been removed from core and placed in example.

guide not finished... todo

Clone this wiki locally