Releases: felixmariotto/three-mesh-ui
hiddenOverflow + (InlineImage => InlineBlock)
Big changes in this release :
-
new attribute :
hiddenOverflow
. It's like the CSSoverflow: 'hidden'
, see live example here. It can be used to scroll a big page inside a smaller container, an example of this is coming shortly. -
InlineImage
is discontinued, in favor of a more versatileInlineBlock
, that can potentially include moreBlocks
andInlineBlocks
inside itself. Of course it can also be used to display an inline image, like in this example -
It's been a tough choice, but I've decided to discontinue
fontMaterial
,backgroundMaterial
, andgeometry Text
. Now all materials are generated internally by three-mesh-ui, which was necessary forhiddenOverflow
. It's also more performant, and will allow more cool things in the future. -
To replace
fontMaterial
andbackgroundMaterial
, there is nowfontColor
andfontOpacity
to control a font style, andbackgroundColor
,backgroundOpacity
andbackgroundTexture
to control the background style.
InlineImage
Add InlineImage component + example :
https://three-mesh-ui.herokuapp.com/#inline_image
keyboard Russian layout + performance improvement
- add Russian layout to the keyboard
- update keyboard example to showcase all the layouts
- fix some issues in UpdateManager, improved performance a bit
keyboard component + improved performance
-
Add a
Keyboard
component, which is at the moment the more advanced VR keyboard for Three.js. It supports French and English layouts, Russian coming soon. -
From now on, components updates will only happen when triggered by
ThreeMeshUI.update()
. This improves a lot the performance, because it avoid updating a component twice unnecessarily. Most of the time you will want to addThreeMeshUI.update()
in your loop function, beforerenderer.render()
.
borderRadius + backgroundSize
-
It's now possible to set the
borderRadius
property of a Block, which will create a nice rounded corner (like CSS propertyborder-radius
) -
Another new attribute :
backgroundSize
. Like the CSS propertybackground-size
, allows you to make a texture stretch or fit the Bock border, contained or not. -
Important bug fix : fix the centering of MSDF text
Components inherit from THREE.Object3D
-
Components now inherit from
THREE.Object3D
, so you can now use your UI components exactly like you are used to :
Block.position.set( 0, 1.6, 0 )
Block.rotation.x = Math.PI / 5
Block.visible = false
Block.traverse( function )
raycaster.intersectObject( Block )
-
Update
VRControl.js
, so that raycasting is done in the examples -
Update the buttons example raycasting accordingly.
-
Update all the examples, so that the root
Block
is added to theScene
directly, without aTHREE.Group
container
re-organization
- Reorganize the
src
directory - Now only one
Text
class, usetextType
attribute to choose a text type (geometry
orMSDF
so far) - Set
fontColor
andfontOpacity
attributes to customize MSDF fonts
Support MSDF font for heavy text rendering
- update examples to showcase MSDFText aae50a4
- makes carriage return width less 7986457
- center MSDFText vertically 60e107f
- fix z-fighting with white space glyphs 845cb57
- fix carriage return f3551b3
- give carriage return zero width 759b42f
- fix horizontal spacing 04d776e
- fix error glyph index 0552d6a
- upload font textures in FontLibrary df2b37a
- first step adding msdf glyphs to the scene 416aa9c
- check for white space, tabs and line break 0ba72ec
- create MSDFText object, and modify FontLibrary to differentiate between typeface and MSDF fonts 3ddc07a
- add three-bmfont-text to dependencies ea7f118