Смешать текстуру (aframe / js) - PullRequest
Новая
       9

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

0 голосов
/ 15 мая 2018

У меня есть кинопленка на 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>

1 Ответ

0 голосов
/ 15 мая 2018

Я сделал бы две сферы, одна с текстурой "день", другая с текстурой "ночь": 

<a-sphere id="day" radius="100" material="side: back"></a-sphere>
<a-sphere id="night" radius="101" material="side: back"></a-sphere>

И используйте компонент анимации, изменив непрозрачность дня на 0:
Js: 

AFRAME.registerComponent("foo", {
  init: function() {
    document.querySelector("#day").addEventListener("click", (e) => {
      this.el.emit("fadeout")
    })
  }
})

Html: 

<a-sphere id="one" foo animation="property: material.opacity; to: 0; 
delay: 500; startEvents: fadeout;"></a-sphere>

Проверьте это здесь .
...