An error occurs when using button or Image

It works fine when I use the gui to create a Rectangle or Grid, but when I create a Button or Image, the following error occurs:

import * as BABYLON from 'babylonjs';
import * as GUI from 'babylonjs-gui'
  mounted() {
      // -------------------左右滑动事件-----------------
      // 通过ref获取canvas元素
      const canvas = this.$refs.canvas // 
      // hammer移动端事件
      const hammer = new Hammer.Manager(canvas) // 创建Hammer实例
      // 绑定Pan和Tap手势,这里只是一个示例,可以换成其他手势
      hammer.add(new Hammer.Swipe()); // 监听left和right方向的swipe手势
      hammer.on('swipeleft', this.handleSwipeLeft); // 绑定左滑事件处理程序
      hammer.on('swiperight', this.handleSwipeRight); // 绑定右滑事件处理程序
       // 最后,将Hammer对象赋值给组件的data属性中
      this.$data.hammerManager = hammer;
    // -------------------左右滑动事件-----------------
    this.$nextTick().then(() => {
      // 创建一个BABYLON引擎
      this.engine = new BABYLON.Engine(canvas, true);
      this.engine.runRenderLoop(() => {
        this.scene.render();
      });
      // 创建一个BABYLON场景
      this.scene = new BABYLON.Scene(this.engine);
      this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0.2);
      var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), this.scene);
      camera.attachControl(canvas, true);
      // 组件公用ui
      var guiTexture =new  GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI', true, this.scene,this.engine)
      console.log(guiTexture);
      var buttons = GUI.Button.CreateSimpleButton("but1", "Click Me");
                  console.log('按钮');
                  console.log(buttons);
                  buttons.width = '100px';
                  buttons.height = "100px";
                  buttons.color = "white";
                  buttons.fontSize = 16;
                  buttons.fontFamily = "Arial";
                  buttons.background = "green";
                  buttons.left = '20%';
                  buttons.top = '40%';
                  buttons.zIndex = 1;
        guiTexture.addControl(buttons);
      this.advancedTexture=guiTexture
  });
  },

  destroyed() {
    const hammer = this.$data.hammerManager;
    if (hammer) {
      hammer.destroy();
      this.$data.hammerManager = null;
    }
  },
  beforeDestroy() {
    // 在组件销毁时销毁引擎
    this.engine.dispose();
  }

This is the code I used, and this is the dependent version I used


In console printing, I can print the button that has been created successfully, but an error occurs when adding to AdvancedDynamicTexture. Does anyone know how to solve this situation?

You’re mixing versions of Babylon in your package. babylonjs is the UMD build while @babylonjs/core is ES6, this causes problems. Framework Versions | Babylon.js Documentation

2 Likes