<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, like for example <mr-panel>, <mr-div>, <mr-img>, or <mr-button>, should be nested within this root component to ensure they function correctly.
Some attributes like camera, lighting, or debug can be set to change various default. More on that below.

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);

Definition and Usage

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

`camera`

Specifies the camera setup.

mode: type when viewing on a 2D screen.
- default: orthographic (default)
- options: orthographic, perspective
startPos: the startingPosition of the camera/user in the 3D scene.
- default: 0 0 1

`lighting`

Specifies the global lighting conditions.

enabled: enables or disables global lighting is enabled
- default: true
shadows: enables or disables shadows
- default: true
- note: always disabled on mobile for performance reasons
color: the color of the global lighting
- default: #fff
intensity: how bright the lighting is
- default: 1
radius: the shadow radius
- default: 5

`debug`

Enables various debug features such as physics directional lines, some color changes to show certain features being used, and 3D toggling in website mode.

Physics directional lines: These are red/green/blue axes lines coming out of the origin (center position) of objects. They demonstrate the xyz directions associated with that object.

Orbital Control 3D toggling:

When the debug flag is enabled (<mr-app debug="true">), you can press and hold the =+ key on your keyboard to:

rotate the scene with left mouse drag

pan the scene with right mouse drag

zoom with the mouse wheel

Try it out below!


                    
                        
                        
                            Change color!


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 100vw;
                        height: 100vh;
                    }
                    mr-button {
                        font-family: system-ui;
                        background-color: white;
                        padding: 8px 16px;
                        font-size: 150%;
                        border-radius: 20px;
                    }


                    function changeColor() {
                        let hue = Math.floor(Math.random() * 360);
                        let color = 'hsl(' +  hue + ', 100%, 80%)';
                        document.querySelector("#panel").style.backgroundColor = color;
                    }
                    changeColor();

`orbital`

Specifies the orbital setup.

mode: true/false
- default: false
targetPos: the position that the orbital camera/user will rotate around in the 3D scene.
- default: 0 0 0

Enables just the use of orbital controls. Though this feature is already enabled as part of debug=true, we also allow a specific flag for it for the cases where you just want to look closer at something more easily without all the additional overhead of full debugging.

It works without the requirement of the =+ keypress (unlike the debug=true case).

Note if both orbital and debug are set to true, the orbital will take priority, meaning you still wont have to use the =+ keypress for it to work. The rest of debug will still work as expected.

Orbital Control 3D toggling:

rotate the scene with left mouse drag

pan the scene with right mouse drag

zoom with the mouse wheel

Try it out below!

mr-panel { background-color: LightSkyBlue; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; width: 100vw; height: 100vh; } #koi { scale: 0.05; z-index: 70; }

`stats`

Enables a visual of a stats counter in the top left corner. The stats counter can show a few different options, by default it shows 0.

Note this is different than the stats that are enabled by use of the <mr-stats> entity being directly added.

This stats toggle is great for use on desktop; however, it can cause performance bottle-necks in headset. We recommend for you to use the <mr-stats> tag for headset testing.


                    
                        
                        
                            Change color!


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 100vw;
                        height: 100vh;
                    }
                    mr-button {
                        font-family: system-ui;
                        background-color: white;
                        padding: 8px 16px;
                        font-size: 150%;
                        border-radius: 20px;
                    }


                    function changeColor() {
                        let hue = Math.floor(Math.random() * 360);
                        let color = 'hsl(' +  hue + ', 100%, 80%)';
                        document.querySelector("#panel").style.backgroundColor = color;
                    }
                    changeColor();

`preserve-drawing-buffer`

This enables the common html use-case of ‘right-click to save’ a png file of what’s on the screen.

Note: Most chromium-based browsers (chrome, duckduckgo, arc, etc…) have this feature by default making the use of this flag unnecessary

Allowing this as a feature the user toggles manually, because it causes a performance hit and isnt a strong requirement by default for most people who are interacting.


                    
                        
                        
                            Change color!


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 100vw;
                        height: 100vh;
                    }
                    mr-button {
                        font-family: system-ui;
                        background-color: white;
                        padding: 8px 16px;
                        font-size: 150%;
                        border-radius: 20px;
                    }


                    function changeColor() {
                        let hue = Math.floor(Math.random() * 360);
                        let color = 'hsl(' +  hue + ', 100%, 80%)';
                        document.querySelector("#panel").style.backgroundColor = color;
                    }
                    changeColor();