A-Frame not removing attribute after function being initialized in a component.

Question

I am trying to add a on click handler that will toggle the light attribute on an entity when a separate entity is clicked. However nothing is happening when I click the separate entity, and I have no errors in my console.

Here is my component:

    AFRAME.registerComponent("lightsOut", {
    schema: {
    target : { type : "selector"}
    },
    init: function(){
        this.el.addEventListener("click",function(){
            this.data.target.removeAttribute("light");
        }.bind(this));
    }
    })

And here are the two entities:

<a-entity id="streetLamp"
obj-model="obj:./models/streetlamp/StreetLamp.obj;mtl:./models/streetlamp/StreetLamp.mtl"
material="color:black" 
scale="0.3 0.6 0.5" 
position="-7.138 -1.499 -11.711" 
lightsOut="target:#streetLight">
</a-entity>

<a-entity id="streetLight" 
position="-4.961 6.205 -11.962" 
rotation="-67.208 -112.987 87.548" 
scale="0.657 0.612 0.718" 
light="distance:15;decay:2;intensity:5a;angle:90;color:#ff8000;groundColor:#ffffff;penumbra:0.5;castShadow:true;type:point"
></a-entity>

When I click streetLamp, I would like to remove or hide streetLight. I am using cursor controls.

Answer 1

You can't have a uppercase letter in the component name, a-frame will try to make it lowercase, (...) in the end it won't work.

Try naming it lightsout or lights_out. Throw in a console.log() when clicked, to be sure it's properly working.

---

Also You need to refresh the raycaster manually, using raycaster.refreshObjects(), it's a bug, which is fixed by december 2017 in the master build.