Смешать текстуры (aframe / js)

У меня есть кинокартина на 360 градусов, и я пытаюсь сделать это, когда вы нажимаете на что-то, изображение смешивается с одного светлого кинокартины на темное кинокартину, поэтому кажется, что свет гаснет. Некоторые идеи, как я кодирую это в js-функции?

     <a-scene>
          <a-assets>
            <img id = "cinema" src = "cinema360degree.png">
            <img id = "cinema_dark" src = "cinema360degree_dark.png">
            <img id = "button" src = "playbutton.png">
          </a-assets>
          <a-image id = "playit" src = "#button" width = "4" height = "4" position = "-28 5 15" rotation = "0 90 0" onclick = "startmovie()"></a-image>
          <a-sky src = "#cinema"></a-sky>
    <script type = "text/javascript">
    function startmovie() {
     //blend cinema into cinemadark
     // i got this but it only change it. Its not blending:
 //document.getElementById('skyid').setAttribute('src', '#cinema_dark')
    }
    </script>
        </a-scene>