CODEWITHSUNDEEP
javascriptaframewebvr
Kevin Alwell
Kevin Alwell

Reputation: 131

aframe How can I trigger a function when my cursor mouseenter or click an entity

I am using aframe and have the jquery library. I seek to trigger a function call when the cursor hovers over an entity. In this case the entity is an a-video tag.

Here is my cursor: 

<a-entity camera look-controls>
  <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: #f89828;" event-set__2="_event: mouseleave; color: black" fuse="true" raycaster="objects: .link"></a-cursor>
</a-entity>

Here is my a-video

 <a-assets><video id="ceo-video" loop preload="auto" webkit-playsinline src="./values.mp4"></a-assets>
    <a-video cursor-listener="on: click;" id="a-video" src="#ceo-video" data-video-source="ceo-video" position="-9 0.953 -0.999" class="alan-video" width="5" height="3" rotation="0 90 0">
    </a-video>

This is my AFRAME component:

AFRAME.registerComponent('cursor-listener', {
  schema: {
    on: { type: 'string' },
    target: { type: 'selector' },
    src: { type: 'string' },
    dur: { type: 'number', default: 300 }
  },

  init: function() {
    var vid = document.getElementById('ceo-video');
    this.el.addEventListener('click', function(evt) {
      vid.play();
    });
    this.el.addEventListener('click', function(evt) {
      vid.pause();
    });
  }
});

The click or mouseenter events are never being triggered. Thanks!

Upvotes: 0

Views: 2159

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

You listen for the click event twice, playing and pausing the video.

You need to have ONE listener and a boolean switch inside checking whether to play or pause the video like this:

var switch
if(switch){
  playVideo();
  switch!=switch;
}else{
  pauseVideo();
  switch!=switch;
}

If You want to listen for the mouseEnter event, You need to make another event listener:

this.el.addEventListener('mouseenter', function(evt) {
  vid.play();
});

If You're using ngoKevin's event component, just replace _event: click with _event: mouseenter

Upvotes: 1

Related Questions