<mr-light>

<mr-light> creates a light source in the MRjs scene.

Simple example

<mr-app>
    <mr-light color="red" intensity="10" data-position="0 1 1"></mr-light>
    <mr-panel>
        <mr-text> this white panel is tinted red by the light.</mr-text>
    </mr-panel>
</mr-app>

Multiple lights


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 100vw;
                        height: 100vh;
                    }
                    #bowtie {
                        scale: 0.15;
                        z-index: 35
                    }


                    function rotate(timestamp) {
                        t = timestamp / 2000;
                        rotation = Math.cos(t) * 180;
                        document.querySelector("#bowtie").dataset.rotation = rotation + " 0 0";
                        window.requestAnimationFrame(rotate);
                    }
                    window.requestAnimationFrame(rotate);

Definition and Usage

<mr-light> can be used to create additional light sources that can be positioned throughout the environment.

<mr-light> has two optional values:

color: the color of the light
intensity: the brightness of the light

Shadows

for performance reasons, <mr-light> cannot cast shadows. Please use the global lighting for shadows.