我想使用 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 中添加动画吗？
最佳答案
这似乎是点击检测的问题，而不是动画的问题，多个 github 问题，例如 here , here ，或here显示光标无法正常工作。 据我所知，人们通过以下方式制定了解决方法:
- 摆脱
look-controls和fuse，或者 - 监听整个窗口的点击。
关于javascript - 在 AR 中制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49379507/