componentchanged listener broken starting 0.9 #4531

michaelglu · 2020-03-27T19:03:51Z

Description:
componentchanged event listener never fires in versions after 0.8

A-Frame Version: 0.9, 0.9.2 1.0-all
Platform / Device: Chrome browser on pc
Reproducible Code Snippet or URL:

AFRAME.HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script src="/js/aframe.js"> </script>
  </head>
  <body>
    <a-scene listener stats id="scene" background="color: #DDEBED">
        <a-plane position="0 0 0" rotation="-90 0 0" width="40" height="40" color="#DB1222" shadow></a-plane>
         <a-box position="0 0.5 -5" rotation="0 0 0" color="#55F25E" shadow></a-box>
         <a-box position="-0.5 0.5 -6" rotation="0 0 0" color="#CEF0D0" shadow></a-box>
         <a-box position="0.5 0.5 -6" rotation="0 0 0" color="#4CC3D9" shadow></a-box>

  <a-entity  look-controls wasd-controls id="user-cam" position="0 0 0">
  <!-- <a-entity oculus-go-controls id="controller" ></a-entity> -->
  <a-entity camera  id="user-cam-internal" position="0 1.5 0">
  <a-cylinder position="-0.5 -0.5 -0.5" rotation="90 0 0" radius="0.05" height="0.5" color="#FFC65D" shadow></a-cylinder>
  <a-cylinder position="0.5 -0.5 -0.5" rotation="90 0 0" radius="0.05" height="0.5" color="#FFC65D" shadow></a-cylinder>
  </a-entity>

  </a-entity>




    </a-scene>
  </body>
</html>

AFRAME.registerComponent('listener',{
  init:function(){
    player=document.getElementById('user-cam');
    console.log(player==null);
    player.addEventListener('componentchanged',function(evt){
      console.log(evt);//nothing gets logged
    })
  }
})

<!-- If you have a support question, please ask at https://stackoverflow.com/questions/ask/?tags=aframe rather than filing an issue. -->

dmarcos · 2020-03-27T21:45:37Z

Without code to run is hard to investigate. FWIW, it works for me: https://glitch.com/edit/#!/trite-aerial-flyingfish?path=log.js:9:4

Notice that you also importing A-Frame twice in your HTML

dmarcos · 2020-03-28T16:55:49Z

Closing this. We can reopen if it’s still an issue

michaelglu · 2020-03-30T14:54:18Z

This only works if the component itself is responsible for changing the entity. When I comment out the tick function and add wasd-controls to the box entity nothing gets logged anymore? Maybe I'm missing something here, but shouldn't this.el give the entity (so in your example a-box). So then wouldn't this.el.addEventListener('componentchanged') fire whenever any of the components are changed?

Also when I use Aframe 0.8 or earlier the logging happens, but anything after it no longer logs
This is a remix of your glitch with tick taken out and wasd-controls added
https://glitch.com/~irradiated-grey-soybean

dmarcos · 2020-03-30T18:04:31Z

wasd-controls is an exception. For components that are going to modify position, rotation, scale every frame we recommend bypassing setAttribute and modify el.object3D directly. More details on performance guide. Side effect is that componentchanged won't fire. In this case, we recommend monitoring the values in the tick method of your component.

 AFRAME.registerComponent('bar', {
       init: function () {
          this.monitorEl = document.querySelector('#yourel');
          this.oldPosition = new THREE.Vector3();
       }, 
       tick: function () {
           this.monitorEl.object3D.position;
           // you can keep track of the old value if you want to check for changes.
           this.oldPosition.copy(this.monitorEl.object3D.position);
       }
  });

dmarcos closed this as completed Mar 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

componentchanged listener broken starting 0.9 #4531

componentchanged listener broken starting 0.9 #4531

michaelglu commented Mar 27, 2020 •

edited

dmarcos commented Mar 27, 2020 •

edited

dmarcos commented Mar 28, 2020

michaelglu commented Mar 30, 2020 •

edited

dmarcos commented Mar 30, 2020

componentchanged listener broken starting 0.9 #4531

componentchanged listener broken starting 0.9 #4531

Comments

michaelglu commented Mar 27, 2020 • edited

AFRAME.HTML

dmarcos commented Mar 27, 2020 • edited

dmarcos commented Mar 28, 2020

michaelglu commented Mar 30, 2020 • edited

dmarcos commented Mar 30, 2020

michaelglu commented Mar 27, 2020 •

edited

dmarcos commented Mar 27, 2020 •

edited

michaelglu commented Mar 30, 2020 •

edited