CODEWITHSUNDEEP
aframevirtual-realityhtc-vive
Jaron Bradley
Jaron Bradley

Reputation: 1119

How to bring an object to the controller with A-Frame

I'm new to Aframes and I'm trying to figure out how to bring a sphere to the position of the right hand (Vive controller) when it's clicked (Think Jedi force pull type animation).

here is what I have so far where I'm not sure what to fill in for "position-of-right-hand"

<a-scene >
  <a-entity id="leftHand" hand-controls="left"></a-entity>
  <a-entity id="rightHand" hand-controls="right"></a-entity>
  <a-entity laser-controls="hand: right"></a-entity>

  <a-sphere class="sphere" id="mySphere" position="1 1 1" radius=".2" color="#2AFF00"
            bring-sphere-to-hand="">
            <a-animation attribute="position" from="1 1 1" to=<position-of-right-hand> dur=2000 begin=spherePull></a-animation>
</a-scene>

then inside my javascript I have...

AFRAME.registerComponent('bring-sphere-to-hand', {
  schema: {},

  init: function () {
    var el = this.el;

    el.addEventListener('click', function () {
      el.emit('spherePull');
    });
  }
});

Obviously this code doesn't work because "position-of-right-hand" is not a thing. Can anyone give me some pointers on how to make this work? My guess is that after it's clicked on, I need to add a cloned sphere as a child of the right hand and then pull it to a slightly modified (0,0,0). Am I on the right track and if so, can i get some pointers on how to go about this?

Upvotes: 1

Views: 735

Answers (1)

ngokevin
ngokevin

Reputation: 13233

For a simple straight line animation, you can use https://github.com/ngokevin/kframe/tree/master/components/animation and

el.setAttribute('animation', {
  property: 'position',
  from: fromEl.object3D.position,  // Forgot if you need to serialize this to string.
  to: toEl.object3D.position,
  dur: 500
});

After that, I imagine you'll want the object to be grabbed or continue to follow the hand even if the hand moves during the animation. You'll need a component with tick method...pseudocode:

tick: function (t, dt) {
  // Calculate vector between this.el (the object) and the hand.

  // Close the distance between the positions based on the duration you set and the timeDelta, using a velocity.

  // When the distance is small enough, you can either leave as it to have the object keep tracking the hand, or re-parent `this.el`'s object3D to the hand (handEl.object3D.add(this.el.object3D).
}

Upvotes: 2

Related Questions