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

Simple example

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

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:


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