2

我想使用 A-Frame 在 AR 中制作动画。我确实喜欢这个。

<!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 中放置动画吗？

4

1 回答 1

2

这似乎是点击检测的问题，而不是动画，多个 github 问题，如此处、此处或此处显示，光标无法正常工作。据我所知，人们通过以下方式解决了问题：

  1. 摆脱look-controlsand fuse, 或
  2. 监听整个窗口的点击。
于 2018-03-20T10:33:43.033 回答