data-debug

<mr-app data-debug="true"> ... </mr-app>

Debug state can be attached to an mr-app using data-debug:

`data-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();