Cannot read property 'utilityLayer' of undefined

Bugs
1

I just started using the 3D GUI for the first time. I followed the installation instructions and added a reference to the GUI extension in my HTML head, but I get an “Cannot read property ‘utilityLayer’ of undefined” error thrown inside of https://preview.babylonjs.com/gui/babylon.gui.min.js.

My HTML head contains

<script src='https://preview.babylonjs.com/babylon.js'></script>
<script src='https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js'></script>
<script src='https://code.jquery.com/pep/0.4.3/pep.js'></script>
<script src='https://preview.babylonjs.com/gui/babylon.gui.min.js'></script>
2

I figured this out by trial and error.

You can not add controls to a container unless the container has already been added to the manager.
This is a shame, because I wanted to define all the elements of my UX first, then do the UX composition at the end. This makes the code much cleaner, and easier to rearrange the UX later.
As per the current implementation, you have to build your UX from the ground up as you go along.

3

I saw your ask too late but you found your own answer :slight_smile:

4

Thanks for being there to help. This thing has a complicated learning curve!

5

To achieve your goal you can add your container but with isVisible = false

6

Because I have containers within containers etc, I am guessing that I would need to set them all invisible, then walk the tree afterwards turning them all on after the UX is composed?

7

if a container is invisible the children will not be rendered :slight_smile: