6.x.x to 7.x.x Migration Guide ( users ) - michal-repo/three-mesh-ui GitHub Wiki
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 asalignItems
backgroundTexture
as been renamed asbackgroundImage
contentDirection
as been renamed asflexDirection
content
as been renamed astextContent
hiddenOverflow
as been renamed asoverflow
interLine
as been renamed aslineHeight
Most of those depreciated properties kept their original meaning except :
- ⚠️
lineHeight
: Now acts like lineHeight in css. Previous values of0.05
, will compact all the lines of a text on the same y values. Whereas1.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