cannot add movement-controls dynamically (camera is null)

[kylebakerio]

see: https://tranquil-chalk-avatar.glitch.me/ https://glitch.com/edit/#!/tranquil-chalk-avatar?path=index.html%3A27%3A29

As soon as you attempt to move with the arrow keys, an error is thrown because there is no camera.

If you explicitly define the camera property, you will circumvent the problem, but this isn't recommended or explained as necessary in the API.

A very simple fix is likely possible--on init, if camera is null, look for the camera explicitly. In theory, it seems like this should be handled by the selector being 'default', but A-Frame seems to fail under some conditions for some reason. Another option would be a try/catch when calling the camera.

[kylebakerio]

I just wanted to add, this seemed to have caused a number of extremely strange and seemingly obscure bugs when using this library. Anytime I have tried to make my startup sequence async by injecting an await statement anywhere, seemingly unrelated, I get this bug. I also believe I have gotten this bug at certain times when doing things like switching cameras at startup, or recently I had a bug where if I touched the controller first, no problem, but if I touched the mouse first and then controller, bug at same spot.

I think a huge number of bugs can be traced to this simple problem, and I also think a more descriptive error message should be included around camera issues.

[kylebakerio]

I also want to add that I think the problem is potentially in A-Frame itself, as according to the documentation, it looks like the default selector should 'just work'--it just seems not to in some scenarios. I'm currently looking into that.

[kylebakerio]

So, it seems that the problem is during init() when called in this way, document.querySelector('[movement-controls]') is null (and therefore, the default selector [movement-controls] [camera]).

I think it makes more sense to instead have

init() {
  if (!this.data.camera) this.data.camera = this.el.querySelector('[camera]')
  // ...
}

indeed, modifying the current dist init for movement-controls to this:

  init: function init() {
    var el = this.el;
  
    if (!this.data.camera) {
      console.warn("movement-extras: no camera detected, checking children")
      debugger
      this.data.camera = el.querySelector('[camera]')
    }

fixes the issue that otherwise appears.

You can find the change on line 9380, or just open the console and let the debugger statement hit.

I'll go contribute a pull request for this in a bit.

[kylebakerio]

I see now that this bug was probably added by the last commit to the movement-controls.js file, https://github.com/n5ro/aframe-extras/commit/4371ffe9a6b747a941cd2f4a0f53cc97756ab7c6 which was a pull request authored by someone else, btw.

[kylebakerio]

relevant line in a-frame: https://github.com/aframevr/aframe/blob/da2389961f3bc5c22e6218d4c0d61e676f265577/src/core/propertyTypes.js#L132

[vincentfretin]

It seems this issue can be closed. #340 was merged. Please reopen if there is still something to discuss here.