Creating Button using GUI

Questions
,
1

I am trying to use GUI to create a button and click action on it in scene using the following reference:

But i am getting error like this:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘AdvancedDynamicTexture’)

Here is my code:

import { Vector3, MeshBuilder, StandardMaterial, SceneLoader, DynamicTexture, Mesh, Texture, GUI } from "@babylonjs/core";
import Camera from "@/js/expo/util/camera";
import Movement from "@/js/expo/util/keyboard";

class Scene {
  add(scene, path, object, engine, camera, texture_type, custom_texture) {
    engine.displayLoadingUI();
    SceneLoader.ImportMeshAsync("", path, object.name, scene).then((result) => {
      var mesh = result.meshes[0];

      const walkAnim = scene.getAnimationGroupByName("Walking");
      // UI
      var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

      var button = GUI.Button.CreateSimpleButton("but1", "Play Idle");
      /*button.paddingTop = "10px";
      button.width = "100px";
      button.height = "50px";*/
      button.color = "white";
      button.background = "green";
      button.onPointerDownObservable.add(() => {
        if (walkAnim) walkAnim.start(true, 1.0, walkAnim.from, walkAnim.to, false);
      });
      advancedTexture.addControl(button);

      if (object.position) mesh.position = new Vector3(object.position.x, object.position.y, object.position.z);
      if (object?.is_movable) {
        mesh.speed = 5;
        Camera.createArcCamera(scene, this.canvas, object.position);
        Movement.addCharacterMovement(scene, mesh, camera);
      }
});
  }
}
export default new Scene();
2

You need additional import

npm i @babylonjs/gui

Then

import { AdvancedDynamicTexture, Button } from '@babylonjs/gui/2D';
2 Likes
3

@labris Thank you

1 Like