Я хочу реализовать следующую функциональность: Пользователь сканирует одно изображение (это цель, все из них - 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
