CODEWITHSUNDEEP
javascripthtmlaframegame-development
wvano97
wvano97

Reputation: 82

Trying to add a component to entity using javascript in AFrame

I am trying to set up the logic behind a inventory system in aframe. So the logic i'm trying to go for is that there is a check component, that when clicked will trigger a series of events based off what i'm telling the component to do. I am unable to find a way to add components to a entity though via scripting.

I was trying to read up on the addState method but that did not help in my case. I've tried .setAttribute('attribute') that it didn't work either. When I look at the AFrame inspector, the component i wanna add doesn't show under the entity.

<a-scene>
    <a-box  id="box"
        position="0 .5 -3"
        material="color: red"
        pickup="handObj: #handBox; id: handBox"></a-box>

    <a-box  id="followBox"
        position="0 .5 -9"
        visible="false"
        material="color: red"></a-box>

    <a-box  id="interactBox"
        position="3 .5 -3"
        change-color
        logic="item: handBox; event: red"></a-box>


AFRAME.registerComponent('logic', {
    schema: {
        item: {type: 'string', default: ''},
        event: {type: 'string', default: ''}
    },

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

        //var lockedDoor = document.querySlector('#lockedDoor');


        // if(hands[0] == data.item)

        console.log(hands[0]);
        el.addEventListener('click', function() {

            if(hands[0] == data.item) has = true;
            else if (hands[1] == data.item) has = true;

            console.log('hello');
            console.log('hand1 ' + hands[0]);
            console.log('hand2 ' + hands[1]);
            console.log('item ' + data.item);
            console.log(has);

            if(has == true) {
                console.log('hello');
                switch (data.event) {
                    case 'red':
                        document.querySelector('#box').setAttribute('follow');
                        document.querySelector('#box').setAttribute('follow', 'target', '#box');
                        document.querySelector('#box').setAttribute('follow', 'speed', '9');
                        document.querySelector('#followBox').setAttribute('visible', 'true');
                        break;
                }   
            }

        });
    }
});

I just need to find a way to add the component to the entity using a script.

Upvotes: 0

Views: 1392

Answers (1)

ngokevin
ngokevin

Reputation: 13233

el.setAttribute('logic', ''); https://aframe.io/docs/0.9.0/introduction/javascript-events-dom-apis.html#adding-a-component-with-setattribute

Upvotes: 1

Related Questions