javascript - 混合纹理 (aframe/js)

Question

我有一个 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>

Answer 1

我制作了两个球体，一个具有“白天”纹理，另一个具有“夜晚”纹理:

<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>

---

看看 here .