VUE中使用babylon.js无法正确使用GUI

Question

VUE中使用babylon.js无法正确使用GUI，但是外部模型的引入以及材质的使用都可以

（在main.js添加）
import * as GUI from 'babylonjs-gui'
Vue.prototype.BABYLON = BABYLON;
Vue.prototype.GUI = GUI;

（在单独组件中引入）
import GUI from "babylonjs-gui";

（需要使用GUI的代码）
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

var rect1 = new BABYLON.GUI.Rectangle();
rect1.width = 0.2;
rect1.height = "40px";
rect1.cornerRadius = 20;
rect1.color = "Orange";
rect1.thickness = 4;
rect1.background = "green";
advancedTexture.addControl(rect1);
rect1.linkWithMesh(sphere);   
rect1.linkOffsetY = -150;

var label = new BABYLON.GUI.TextBlock();
label.text = "Sph<br>ere";
rect1.addControl(label);

var target = new BABYLON.GUI.Ellipse();
target.width = "40px";
target.height = "40px";
target.color = "Orange";
target.thickness = 4;
target.background = "green";
advancedTexture.addControl(target);
target.linkWithMesh(sphere);   

var line = new BABYLON.GUI.Line();
line.lineWidth = 4;
line.color = "Orange";
line.y2 = 20;
line.linkOffsetY = -20;
advancedTexture.addControl(line);
line.linkWithMesh(sphere); 
line.connectedControl = rect1;  

在main.js中引用时的报错为
vue.runtime.esm.js?2b0e:619
[Vue warn]: Error in mounted hook: "TypeError: Cannot set property name of # which has only a getter"

单独组建引用的报错为

我初步判断是引用组件的问题，所以尝试了如上文所说的两种方法

目标结果如下
https://playground.babylonjs.com/#XCPP9Y#9716

Answer 1

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答


本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。


因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。