Установите индивидуальный звук для каждой Aframe Entity ⇐ Javascript

[Anonymous]

Я хочу реализовать следующую функциональность: Пользователь сканирует одно изображение (это цель, все из них - 5 пункта), и после того, как изображение будет сканировать - начнет воспроизводить звук (связанный с этим изображением). Я использую библиотеку Arame (создание сцены и звуковые объекты) и Mindar (обнаружение сканированных фотографий); Все они основаны на компонентах функции React. Для теста я создал макет: < /p>













< /code>
На данный момент:
Когда я сканирую фото льва - все работает правильно, но когда я меняю сканированную фотографию на OWL - звук не играет. < /p>
import React, { useCallback, useEffect, useRef, useState } from 'react';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';
import { getChildrenByGroup } from './../utils/helpers';

const MindARViewer = ({children_AR_list}) => {

const sceneRef = useRef(null);
const sceneRefering= useRef([]);
const [targetFound, setTargetFound] = useState("");

let [targetFoundCounter,setTargetFoundCounter] = useState(0);
const [groupedChildren, setGroupedChildren] = useState([]);

useEffect(() => {
setGroupedChildren(getChildrenByGroup(children_AR_list))

}, []);

useEffect(() => {
const sceneEl = sceneRef.current;
const arSystem = sceneEl.systems?.["mindar-image-system"];

const entity = document.querySelector('a-entity[sound]');

// Start AR system when scene starts rendering
sceneEl.addEventListener('loaded', () => {
arSystem.start();
});

// Handle target detection events

sceneEl.addEventListener('targetFound', () => {
setTargetFound(entity?.components.sound.parsingAttrValue)
console.log(`Target found:`, entity?.components.sound.parsingAttrValue);

// setTargetFoundCounter(targetFoundCounter++)

entity?.components.sound?.playSound();
});

sceneEl.addEventListener('targetLost', () => {
entity?.components.sound?.pause();
});

return () => {
arSystem.stop();
entity?.components.sound.pause();
}
}, []);

return (


{

















}


)
}

export default MindARViewer;



Подробнее здесь: https://stackoverflow.com/questions/796 ... ame-entity