时间戳

首页 > 解决方案 > 混合纹理（aframe/js）

javascript - 混合纹理（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>

标签： javascripthtmltexturesaframevirtual-reality

解决方案

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

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

在这里 查看。

推荐阅读