をクリックすると、オーディオとskyboxの画像/動画の球を同時にトリガーする方法を教えてください。

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

クリックすることでskybox画像を変更するたびに異なるオーディオを再生できるように、このコンポーネントを変更しようとしています。どのようにそれを行うことができる任意の提案？をクリックすると、オーディオとskyboxの画像/動画の球を同時にトリガーする方法を教えてください。

また、画像とビデオの両方の球体をこのようなコンポーネントで使用できる可能性はありますか？ありがとう！

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

これは私が今持っているものである、と私は最後のイベントで360ビデオに「4.JPG」を変更しながら、球のクリックイベントのそれぞれに音を追加しようとしています。

出典

2017-05-30 Evan W.

既に設定した「クリック」イベントで毎回オーディオを変更できます。

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-01 03:34:09

をクリックすると、オーディオとskyboxの画像/動画の球を同時にトリガーする方法を教えてください。

答えて

関連する問題