<mr-text>

The <mr-text>embeds text into an <mr-panel>.

Example


                    
                        
                            Hello World!


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 100vw;
                        height: 100vh;
                    }

Troika

mr-text is made possible through Troika-Three-Text and can be manipulated with JavaScript like any other THREE.js.

Definition and Usage

<mr-text> supports custom fonts and has growing support CSS styling:

<mr-text class="title">MRjs</mr-text>

.title {
    font-family: 'Roboto';
    font-size: 6vw;
    line-height: 100%;
    text-align: center;
    color: rgba(24, 24, 24, 0.75);
}

Custom Fonts

Custom fonts are supported but must be loaded manually in css using @font-face

@font-face {
    font-family: 'Roboto';
    src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype');
}

Supported Properties

font-family
- font fallbacks not currently supported
font-size
color
line-height
white-space
vertical-align
text-align