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 に答える