<mr-app>

The <mr-app> component serves as the foundational building block of an application using MRjs.

It initializes the core functionalities like the render loop, physics engine, and other core features such as lighting and controllers/hand-tracking.
It acts as the primary container for the entire application. All other custom elements, for example <mr-panel>, <mr-div>, <mr-img>, or <mr-button>, should be nested within this root component to ensure they function correctly.
Some data-attributes like data-camera, data-lighting, or data-debug can be set to change various defaults. More on that below.

Definition and Usage

The <mr-app> tag has optional data-attributes:

Example


                
                    
                    
                    
                    
                        Hello world!
                        This is an mr-app


                mr-panel {
                    display: flex;
                    flex-flow: column nowrap;
                    align-items: center;
                    justify-content: center;
                    width: 100vw;
                    height: 100vh;
                    gap: 0.5rem;
                    font-family: Helvetica;
                    border-radius: unset;
                }
                mr-text {
                    letter-spacing: 1px;
                    line-height: 120%;
                }
                .title {
                    font-size: 150%;
                    font-weight: bold;
                }
                #logo {
                  width: 200px;
                  height: 200px;
                  z-index: 70;
                  scale: 0.15;
                }


                function rotate(timestamp) {
                    t = timestamp / 2000;
                    let rx = -Math.cos(t) * 90;
                    let ry = Math.cos(t) * 90;
                    let rz = Math.cos(t) * 180;
                    document.querySelector("#logo").dataset.rotation = rx + " " + ry + " " + rz;
                    window.requestAnimationFrame(rotate);
                };
                window.requestAnimationFrame(rotate);