How to use BABYLON.GUI?

Hello.
I saw the code in the examples:
var panel = new BABYLON.GUI.StackPanel ();
But I get an error that there is no BABYLON.GUI.
My import (TS):
import * as BABYLON from “babylonjs”;
import * as GUI from “babylonjs-gui”;
I copied babylon using npm.
How can I use BABYLON.GUI?

You are importing is as GUI, have you tried using the GUI variable instead?

Having said that - this should actually work. But if you are just starting a new project, and using typescript, can i recommend you use the es6-modules packages? @babylonjs/core and @babylonjs/gui.

You code will be smaller, cleaner, scalable, will make better coffee and will know all of Shakespeare’s sonnets straight from the box. Well, 3 out of 5 is also something!

Thanks, it helped.
Installed additionally:
npm install @ babylonjs / core --save
And this:
import * as BABYLON from “@babylonjs”;
became enough.

Hmm, it’s not that simple. Wrote like this:
import * as BABYLON from ‘@ babylonjs / core’;
import * as GUI from ‘@ babylonjs / gui’;
I can now do this:
var panel = new GUI.StackPanel ();
But not like in the example
var panel = new BABYLON.GUI.StackPanel ();

UPD: In compiled JS it requires exactly BABYLON.GUI (GUI does not exist), but in the TS file it requires a GUI.
This is in the html file:

This is in the ts file:
import * as BABYLON from ‘babylonjs’;
import * as GUI from ‘babylonjs-gui’;

When using @babylonjs it writes some kind of compilation error, left it for later.
What am I doing wrong? Not taking Babylon.js from there?

My first recommendation would be too not look into the compiled JavaScript :blush:

My second recommendation would be to import only what you need and use it directly. The documenting is using the BABYLON and GUI namespaces, but this is just for ease of explaining. When to import just what you need you keep your code minimal. Only what you need is bundled.

If you really want to use the Babylon namespace, then just add GUI to BABYLON yourself, but this is not needed IMO

1 Like