0 
AFRAME.registerComponent('set-sky', {
schema: {default:''},
multiple: true
 init() {
  const sky = document.querySelector('a-sky');
  this.el.addEventListener('click', () => {
  sky.setAttribute('src', this.data);
  });
 }
});

尝试修改此组件，以便每次通过单击更改天空盒图片时它可以播放不同的音频。有什么建议可以做到吗？

另外，我有没有机会在这样的组件中同时使用图像和视频球？谢谢！

<html>
 <head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="https://rawgit.com/aframevr/aframe/2baa063/dist/aframe-master.min.js"></script>
  <meta charset="UTF-8">

  <script>
   AFRAME.registerComponent('set-sky', {
    schema: {default:''},
     init() {
      const sky = document.querySelector('a-sky');
      this.el.addEventListener('click', () => {
      sky.setAttribute('src', this.data);
      });
     }
    });
  </script>
 </head>

 <body>
  <a-scene>
   <a-assets>
<audio id="opening" src="Lake Ambience.mp3"></audio>
    <audio id="1" src="Game.wav"></audio>
    <audio id="2" src="Explosion.wav"></audio>
    <audio id="3" src="Laser.wav"></audio>
    <audio id="4" src="Spooky.mp3"></audio>
    <video id="video" src="Video.MP4"></video>
   </a-assets>

    <!-- Sounds -->
   <a-entity sound="autoplay: true; loop: true; src: #opening;"></a-entity>

   <a-camera position="0 2 0">
    <a-cursor color="#5DADE2" fuse="true" timeout="10"></a-cursor>
   </a-camera>

   <a-sphere color="#2C3E50" radius="0.5" position="0 -5 -15" set-sky="1.jpg"></a-sphere>
   <a-sphere color="red" radius="0.5" position="-15 -5 0" set-sky="2.jpg"></a-sphere>
   <a-sphere color="blue" radius="0.5" position="15 -5 0" set-sky="3.jpg"></a-sphere>
   <a-sphere color="white" radius="0.5" position="0 -5 15" set-sky="4.jpg"></a-sphere>

   <a-sky></a-sky>
  </a-scene>
 </body>
</html>

这就是我现在所拥有的，我正在尝试为每个球体点击事件添加声音，同时在最后一个事件中将“4.jpg”更改为 360 度视频。

4

1 回答 1

0

您可以使用已设置的“点击”事件每次更改音频。

const sky = document.querySelector('a-sky');
const entity= document.querySelector('a-entity');
var image = this.data.substring(0,1) // this grabs the jpg file id to reference the audio asset id

this.el.addEventListener('click', () => {
    sky.setAttribute('src', this.data);
    entity.setAttribute('src', "autoplay: true; loop: true; src: #" + image + ";");
});

这可能不是您执行此操作的最佳方式。如果您想要图像和音频文件的不同组合，那么您应该需要为组件添加一个新的方案值以引用音频文件。

于 2017-06-01T03:34:09.260 回答