A-Frame animations via JavaScript

Question

I started with A-Frame VR framework. I have a simple box that I want to animate.

This box will be floating, when looking to the box, it will scale up, on click it will rotate:

<a-box id="boxID" position="0 2 -5" rotation="0 45 45" scale="2 2 2" src="#boxTexture">
            <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>

<!-- These animations will start when the box is looked at. -->
<a-animation attribute="scale" begin="mouseenter" dur="300" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="300" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"></a-animation>

I would like to create above with Javascript. I started with the following:

AFRAME.registerComponent('scale-on-interact', {
    schema: {
        to: {default: '2.5 2.5 2.5'}
    }, 

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

    }, 

    update: function() {
        var data = this.data;
        console.log(data.color);

        // MOUSE ENTER EVENT
        this.el.addEventListener('mouseenter', function() {
            console.log("enter");
            this.setAttribute('to', data.to);
        });

        // CLICK EVENT
        this.el.addEventListener('click', function() {
            console.log("click");
        });

        // MOUSE LEAVE EVENT
        this.el.addEventListener('mouseleave', function() {
            console.log("leave");
        });
    }
});

I receive the logs, but for example on mouse enter, the box doesn't scale up. Also I doesn't know and can't find how to create multiple schema's so I can create one 'to' property for on mouse enter and one for on click.

Answer 1

Firstly, the <a-animation> and Animation Component both take begin and startEvents properties that specify an event on the entity that will automatically trigger the animation. <a-animation begin="mouseenter"> or <a-entity animation__1="property: scale; to: 2 2 2; startEvents: click"> .

Secondly, there's an event-set component that might do what you want, set properties in response to events. <a-entity event-set__1="_event: mouseenter; scale: 2 2 2"> .

Third, in your component, if you want to set the scale, you should setAttribute('scale', {x: 2, y: 2, z: 2}) , not to . Also makes sure that component is attached to your entity <a-box id="boxID" scale-on-interact> .

Lastly, if you want a component to be able to have multiple instances, set multiple: true in your component. Then you can have multiple components set with __ delimiter: <a-box id="boxID" component__1="foo: 1; bar: 2" component__two="foo: 2; bar: 3">