Я занимаюсь разработкой проекта, включающего ар. js, который отображает трехмерные объекты и текст для обучения детей алфавиту как на мобильных устройствах, так и на ноутбуках. Я пытался добавить слушателя событий в качестве дополнительного, чтобы дети больше взаимодействовали. Моя цель - нажать / коснуться отображаемой модели, и она увеличит или изменит цвет или поворот В приложении найти мой код. Надеюсь, вы сможете решить мою проблему.
HTML Код
<!DOCTYPE html>
<html>
<head>
<script src = "https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src = "https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
<script src = "event.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>
<body>
<a-scene embedded arjs = 'sourceType: webcam; debugUIEnabled:false;'>
<a-assets>
<a-asset-item id = "apple" src = "apple/scene.gltf"></a-asset-item>
</a-assets>
<a-marker id = "appleM" type = "pattern" url = "Asset/pattern-apple.patt"
markerhandler emitevents = "true" cursor="rayOrigin: mouse">
<a-entity id = "animatedApple" gltf-model = "#apple" position = "0 -1 0" scale = ".05, .05, .05"></a-entity>
<a-text value="A for Apple" color = "purple" position = "-1.3 1 0" scale = '2, 2, 2'></a-text>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
событие. js (файл для обработчиков событий)
init: function() {
const animatedMarker = document.querySelector('#appleM');
const aEntity = document.querySelector('#animatedApple');
// every click, we make our model grow in size :)
animatedMarker.addEventListener('click', function(ev, target){
const intersectedElement = ev && ev.detail && ev.detail.intersectedEl;
if (aEntity && intersectedElement === aEntity) {
const scale = aEntity.getAttribute('scale');
Object.keys(scale).forEach((key) => scale[key] = scale[key] + 1);
aEntity.setAttribute('scale', scale);
}
});
}});