<mr-app>

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

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 type when viewing on a 2D screen.

lighting

Specifies the global lighting conditions.

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:

  1. rotate the scene with left mouse drag
  2. pan the scene with right mouse drag
  3. 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

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:

  1. rotate the scene with left mouse drag
  2. pan the scene with right mouse drag
  3. 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();