Question

我想使用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吗？

Answer 1

这似乎是一个问题，点击检测，而不是动画，多个github问题，如here，here或here显示，光标无法正常工作。从我看到人们通过以下方式制定解决方法：

摆脱look-controls和fuse或
听取整个窗口的点击次数。

在AR中给动画

1 个答案: