CODEWITHSUNDEEP
javascriptaframevirtual-realitywebvr
xaddict
xaddict

Reputation: 1328

A-Frame on hover animations (mouseleave, mouseenter)

I have a scene where there are 'mouseenter' objects which trigger actions on other objects:

<a-entity class="hover" position="1.3 1.5 0" rotation="0 90 0">
    <a-entity mixin="hoverbox"></a-entity>
    <a-obj-model src="#profile1" scale="0.01 0.01 0.01" material="height: 512; width: 512" mixin="skybox">
        <a-animation attribute="rotation" dur="10000" easing="linear" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        <a-animation attribute="position" dur="300" to="0 0 -.5" begin="hoveron"></a-animation>
        <a-animation attribute="position" dur="300" to="0 0 0" begin="hoveroff"></a-animation>
    </a-obj-model>
</a-entity>

This is the hoverbox mixin:

<a-mixin id="hoverbox" class="hoverbox" material="color:#fff; opacity:.5;" geometry="primitive: sphere; radius: .45;"></a-mixin>

And this javascript attached to it:

var sceneEl = document.querySelector('a-scene');
var hoverEls = sceneEl.querySelectorAll('.hover');
for(var i = 0; i < hoverEls.length; i++) {
    var hoverEl = hoverEls[i];
    hoverElBox = hoverEl.querySelector('a-entity');
    hoverElBox.addEventListener('mouseenter', function(evt) {
        // evt.stopPropagation();
        console.log('mouseenter', evt);
        evt.target.nextElementSibling.emit('hoveron');
    }, true);
    hoverElBox.addEventListener('mouseleave', function(evt) {
        // evt.stopPropagation();
        console.log('mouseleave', evt.target.parentNode);
        evt.target.nextElementSibling.emit('hoveroff');
    }, true);
}

This triggers the repositioning of the element when a user hovers the 'hoverbox' sphere. It also triggers the returning to its normal position when the cursor leaves the hoverbox.

The cursor element looks this:

<a-entity cursor="fuse:true, fuseTimeout: 50;" raycaster="far: 10; objects: .hoverbox" />

So it doesn't emit an event on other objects.

However, the behavior is kinda buggy. Sometimes when the cursor moves away from the sphere the 'hoveroff' event isn't triggered and other times the sphere just doesn't register the mouseenter.

Anyone know how to make this work?

Look here for the full code: http://vr.dco.rocks/

Upvotes: 1

Views: 3787

Answers (1)

ngokevin
ngokevin

Reputation: 13233

This was fixed on A-Frame master branch https://github.com/aframevr/aframe/commit/e4900e16ea9228af39d2a4fef6798393e79bd82a although there are still a few kinks in the code.

A-Frame 0.2.0 may or may not be more reliable?

Upvotes: 1

Related Questions