How to trigger AFrame animation to specific location from javascript?

1.9k Views Asked by hyperdo At 24 December 2016 at 02:31

For example, how would you implement this: A cube is clicked on and based on a previously defined JS variable (call it point "p"), another cube moves (animates) to that point "p"? In other words, is there a way to define and activate AFrame animations on the fly? Thanks a lot.

Original Q&A

There are 1 best solutions below

Craig.Li On 24 December 2016 at 02:53 BEST ANSWER

You can add a <a-animation> element below your target box. Animation-A-Frame

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.3.2/aframe.min.js"></script>
<!DOCTYPE html>  
<html>  
<head>
<title>move animation</title>
<script>
AFRAME.registerComponent("move",{
schema : {
  target : { type : "selector"},
  position : {type : "string"}
},
init : function(){
 this.el.addEventListener("click",function(){
            var animation = document.createElement("a-animation");
            animation.setAttribute("attribute","position");
            animation.setAttribute("to",this.data.position);
            animation.setAttribute("dur","1000");
            animation.setAttribute("repeat","0");
            this.data.target.appendChild(animation);
 }.bind(this));
}

});
  </script>
</head>
<body>
<a-scene>
  <a-camera  position="0 0 0" universal-controls>
    <a-entity id="cursor" cursor="fuse: true;fuseTimeout:500"
     material="color:black"
     geometry="primitive:ring"
     position="0 0 -1"
     scale="0.01 0.01 0.01"
    ></a-entity>
  </a-camera>
<a-box id= "blue_box" position="0 1 -2" color="blue" ></a-box>
<a-box position="1 1 -2" color="red" move="target:#blue_box;position:-1 0 -5"></a-box>
</body>
</html>

How to trigger AFrame animation to specific location from javascript?

There are 1 best solutions below

Related Questions in ANIMATION

Related Questions in AFRAME

Related Questions in WEBVR

Trending Questions

Popular # Hahtags

Popular Questions