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？
