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"
单独组建引用的报错为
我初步判断是引用组件的问题,所以尝试了如上文所说的两种方法