Comment déclencher en même temps l'audio et la sphère image/vidéo de skybox en cliquant?

Essayez de modifier ce composant afin qu'il puisse lire un son différent à chaque fois que je modifie l'image de skybox en cliquant sur. Des suggestions comment cela pourrait-il être fait?Comment déclencher en même temps l'audio et la sphère image/vidéo de skybox en cliquant?

En outre, est-il possible que je puisse utiliser à la fois des images et des sphères vidéo dans un composant comme celui-ci? Merci!

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

C'est ce que j'ai en ce moment, et je suis en train d'ajouter du son à chacun de l'événement click sphère, tout en changeant « 4.jpg » à une vidéo 360 dans le dernier événement.

Source

2017-05-30 Evan W.

Vous pouvez changer l'audio à chaque fois avec votre événement 'clic' que vous avez déjà configuré.

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 + ";"); 
});

Ce n'est probablement pas la meilleure façon de procéder. Si vous souhaitez des combinaisons différentes d'images et de fichiers audio, vous devez ajouter une nouvelle valeur de schéma pour que le composant fasse référence aux fichiers audio.

Source

2017-06-01 03:34:09

Comment déclencher en même temps l'audio et la sphère image/vidéo de skybox en cliquant?

Répondre

Questions connexes