Hey guys i’ve been making a small program with Babylon for a few months now. Today the preview cdn for the GUI build has broken as far as i can tell.
Even if i copy a basic playground sample with a single button with text it will throw the following error. Uncaught TypeError: i.getFontOffset is not a function.
Im very new to Babylon and nodejs, so it was an easy way to just include the cdn scripts in the html and write what i need in another script.
(Can’t seem to figure out how to serve it with Express + webpack).
Is anyone else able to confirm that the min GUI package is broken?
https://preview.babylonjs.com/gui/babylon.gui.min.js
html
<head>
<meta charset="utf-8"/>
<title>System</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#fps {
position: absolute;
background-color: black;
border: 2px solid red;
text-align: center;
font-size: 16px;
color: white;
top: 15px;
right: 10px;
width: 60px;
height: 20px;
}
</style>
</head>
<body>
<script src="https://cdn.babylonjs.com/babylon.max.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
<canvas id="renderCanvas"></canvas>
<div id="fps">0</div>
<script src="test.js"></script>
</body>
</html>
test.js
window.addEventListener('DOMContentLoaded', async () => {
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
// Our built-in 'sphere' shape.
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
// Our built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
// GUI
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
button1.width = "150px"
button1.height = "40px";
button1.color = "white";
button1.cornerRadius = 20;
button1.background = "green";
button1.onPointerUpObservable.add(function() {
alert("you did it!");
});
advancedTexture.addControl(button1);
//Start Render Loop
engine.runRenderLoop( () => {
scene.render();
//-----------------------Debug FPS----------------------------//
var divFps = document.getElementById('fps');
divFps.innerHTML = engine.getFps().toFixed() + " fps";
//-----------------------------------------------------------//
});
})
Omit the advancedTexture and button and it will work.
Thanks
