Предоставление анимации в AR

Я хочу создать анимацию в AR с помощью A-Frame. Мне это понравилось.

<!doctype HTML>
<html>
<script src = "https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script 
src = "https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-
ar.js"> </script>
<script type = "text/javascript" src = "script.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-marker preset = "hiro">
        <a-sphere ball1 id = "ball1" class = "clickable" position = "-1 0.5 0" material = "color: red;" scale = "1 1 1">
            <a-animation attribute = "position" 
             from = "-1 0.5 0"
             to = "-1 0 0"
             dur = "500"
             begin = "bounce-start"
             end = "bounce-stop"
             fill = "backwards"
             easing = "ease-in"
             repeat = "indefinite"></a-animation>
        </a-sphere>
        <a-sphere ball2 id = "ball2" class = "clickable" position = "2 0.5 0" material = "color: green;" scale = "1 1 1">
            <a-animation attribute = "position" 
             from = "2 0.5 0"
             to = "2 0 0"
             dur = "500"
             begin = "bounce-start"
             end = "bounce-stop"
             fill = "backwards"
             easing = "ease-in"
             repeat = "indefinite"></a-animation>
        </a-sphere>
</a-marker>
<a-camera position = "0.5 0 0">
    <a-cursor id = "cursor"
            raycaster = "objects: .clickable" 
            fuse-timeout = "2000"
            material = "color: #F4D03F; shader: flat" 
            opacity = "0.9">
    <a-animation begin = "click" easing = "ease-in" attribute = "scale" dur = "150" fill = "forwards" from = "0.1 0.1 0.1" to = "1 1 1"></a-animation>
    <a-animation begin = "cursor-fusing" easing = "ease-in" attribute = "scale" dur = "1500" fill = "backwards" from = "1 1 1" to = "0.1 0.1 0.1"></a-animation>
  </a-cursor>
</a-camera>
</a-scene>
</body>
</html>

Это мой HTML-код. Вот мой код JavaScript.

var bouncing = false;
document.addEventListener('click', function () {
 bouncing = !bouncing;
 var el = document.querySelector("#ball1");
 el.emit(bouncing ? 'bounce-start' : 'bounce-stop');
 var el2 = document.querySelector("#ball2");
 el2.emit(bouncing ? 'bounce-start' : 'bounce-stop');
});

Но после нажатия на шарики ничего не происходит. это почему? Но работает без AR. Нельзя ли добавить анимацию в AR?

javascript html aframe ar.js

20.03.2018 09:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

633

Ответы 1

Кажется, это проблема с обнаружением кликов, а не с анимацией, множественные проблемы с github, такие как здесь, здесь или здесь, показывают, что курсор не работает должным образом. Из того, что я вижу, люди нашли обходные пути:

избавиться от look-controls и fuse, или
прослушивание щелчков по всему окну.

20.03.2018 11:33

Другие вопросы по теме

В чем причина наличия ширины и значения в индикаторе выполнения Bootstrap 4?

Миграция Bootstrap 3 на 4 в кнопке загрузки файла и проблема с размером ввода

Сетка CSS: загрузка нескольких элементов в одну ячейку с помощью полосы прокрутки

Как предоставить ссылки на закладки в Jupyter Notebook, которые работают на GitHub?

Показать двумерный массив без запятых в текстовом поле

Как сделать div фиксированным

Как добавить тег <a> в значение параметра раскрывающегося списка

Как установить фиксированную ширину диапазона для диапазона в бутстрапе

Кнопка: наведение не работает в режиме совместимости с IE 11

Горизонтальная полоса прокрутки в контейнере фиксированного размера

Предоставление анимации в AR

Ответы 1

Другие вопросы по теме

Похожие вопросы