Cannot read property 'getOrCreateGeometry' of undefined

[hongbo-miao]

Description:

• A-Frame Version: 0.3.0
• Platform/Device: Chrome 55.0.2849.0 canary (64-bit)
• Reproducible Code Snippet or Demo URL [highly encouraged]:

Orginally asked on Stack Overflow

I am using A-Frame with Angular 2.

The code is simple, showing a curved image:

  <a-curvedimage src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg"
    position="0 2 -20"
    theta-length="72"
    height="2.6">
  </a-curvedimage>

Without Angular 2 router, it works well: working plunker

After adding Angular 2 router, I got the error below. issue plunker

VM14540 aframe.min.js:75 Uncaught TypeError: Cannot read property
'getOrCreateGeometry' of undefined

And I found if I remove these two theta-length="72" height="2.6" in the issue plunker, it won't through the error.

I want to use theta-length="72" height="2.6" and the router together. What may cause this? Thanks

[hongbo-miao]

@ngokevin can u copy your explaination from Stack Overflow to here. Here I can @ someone who may offer help.

[ngokevin]

Do you have any guesses what router would change? The error is because something hasn't initialized with the scene when the geometry is initializing. I don't know how that could happen.

[perak]

I had the same problem (but I'm using Meteor + React + aframe 0.3.1).

I solved it by waiting scene to load before adding content into scene.

This is how I check if scene is loaded:

let scene = document.querySelector('a-scene');
if(scene && scene.hasLoaded) { 
   // scene is loaded
}

Try to make setInterval or something.

[hongbo-miao]

@perak thanks,

After changing to the codes below, it won't give error for me. I will ask around see if a there is a clean solution.

http://plnkr.co/edit/69TJZhkZUsG6aiNObsed?p=preview

    <a-scene>
      <a-curvedimage
        *ngIf="show"
        src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg"
        position="0 2 -20"
        theta-length="72"
        height="2.6">
      </a-curvedimage>
    </a-scene>

  show = false;

  ngOnInit() {
    // not loaded

    setTimeout(() => {
      // loaded
      this.show = true;
    });
  }

[ngokevin]

There's an event. scene.addEventListener('loaded'...

Or attach your Angular init code in an A-Frame component <a-scene angular-init>

[hongbo-miao]

@ngokevin thanks for reminding the loaded event. And also thanks the help from @alxhub and @DzmitryShylovich on Gitter.

<a-scene (loaded)="onLoaded()">
  <a-curvedimage
    *ngIf="show"
    src="https://upload.wikimedia.org/wikipedia/commons/b/be/Random_pyramids.jpg"
    position="0 2 -20"
    theta-length="72"
    height="2.6">
  </a-curvedimage>
</a-scene>

show = false;
onLoaded() {
  this.show = true;
}

I guess this will be the final way. http://plnkr.co/edit/MkQkrneTXYcZ1w6YFoLm?p=preview

[ngokevin]

alternatively:

AFRAME.registerComponent('angular-init', {
  init: onLoaded
});

<a-scene angular-init>
   ...
</a-scene>