How to Load a 3D Model for VR with Babylon.JS – Tutorial
I recently began a major project using Babylon.js The reason I selected Babylon.js was the support for browser based game environment (at 60fps), and web-based VR (WebVR).
The first thing I wanted to do was load a 3D model that had been created in Blender. Here is how.

In this tutorial I’m going to quickly cover setting up your development environment and then demonstrate how to load a 3D model that was created in Blender (v.2.8). Make sure you export the final model as a glTF. I prefer the glb format over glTF as it incorporates the entire model, animation, and materials in one file rather than multiple files.
Once you have your model, you will need to decide where you will be testing your script from: a local server or a web server.
For faster iteration, I suggest setting up your development system with a local server. This is now much easier than in the past thanks to Python’s server tools.
To setup a local server, follow the directions on the Mozilla.org site: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server
(Note: I found one error in the Windows directions: use ‘python -m http.server’ to launch your server instead of ‘python3’).
Of course, once you have a model loading, you will want to be able to share it with the rest of the world. I used AWS lightsail and launched a node.js instance to host my files.
Using Filezilla, I was able to quickly upload the html and glb files to the server and share them with the world. The files are stored in the /opt/bitnami/apache2/htdocs folder

Babylon.js can be completely encapsulated within the html document. For this tutorial, we are going to keep it as simple as possible and keep the html and script in the index.html file, only loading the glb file.
The html code is straight forward, loading the babylon framework and the gltf loaders. After the scripts are loaded, we can set the style for the document and the render canvas:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample using Babylon js</title>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
Now that we have the header taken care of, we can jump into the body. First we need to create a canvas and then create a function that will store the scene. Once the function is declared, we can setup the scene:
<body>
<canvas id="renderCanvas"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var createScene = function() {
// Create scene
var scene = new BABYLON.Scene(engine);
Next we will setup the default environment, enabling shadows on the ground. We will also turn on the VR option, so that anyone who has VR googles can see the object in VR.
// Default Environment
var environment = scene.createDefaultEnvironment({ enableGroundShadow: true, groundYBias: 1 });
// Enable VR
var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
vrHelper.enableTeleportation({floorMeshes: [environment.ground]});
Now let’s get to the fun part; loading the model!
We are going to use the BABYLON.SceneLoader.Append command to make this happen. This allows us to load add the model to an existing scene. We will also set the camera and lights so that we can see everything.
var building = BABYLON.SceneLoader.Append("./", "VRChapel.glb", scene, function (meshes) {
scene.createDefaultCameraOrLight(true, true, true);
});
There is a lot happening with the Append command, so let’s break it down:
The 1st parameter – “./” – provides the location or folder of the file to be loaded. In this case the glb file is in the same folder.
The 2nd parameter “VRChapel.glb” the model to be loaded. If you saved your file as a glTF, only the model will be loaded, no textures, materials, or animations.
The 3rd parameter tells the engine where to load the model too, in this case the scene.
The 4th parameter is a function to create the camera and lights for the scene.
Finally, we return the scene and launch the engine. Notice the at the scene is describe before the engine is launched.
return scene;
};
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var scene = createScene();
Finally, we add a rendering loop, handle window resizing, and close the html page:
engine.runRenderLoop(function () {
if (scene) {
scene.render();
}
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
And there you have the minimum code to load a 3D model in Babylon.JS.
Of course, there is SO much more that we can (and will) do with this environment. This is just the starting point.
Special thanks to Adrianna Mott for the model! You can see the results of this tutorial online at: http://vrchapel.me/Tutorial1-loadModel.html

The only problem at this point is the skybox which is a little small and located inside the building. We will address that in the next tutorial.
Reflections on Personalized Education
Traditional education assumes a transmissive format of instruction. With #VR we can leave behind the traditional “sage-on-the-stage” and enable new #epistemology approaches, enabling learners to experience #education instead of trying to recall it from a lecture. When we begin to include #AI agents, #bigdata; when we are creating true #personalizededucation that adapts to the needs of the student, then we are accomplishing what generations of educators have sought to accomplish.
More to come, this is just the beginning!!
Certbot Not Renewing
First, this post is more for me as a reminder should I have this problem again. But, if it helps you resolve your problem, yea!
Problem (tl;dr version): Certbot didn’t update the ssl certificates on one of my servers, resulting in ugly messages about the websites not being safe.
Long Version: I’m hosting my own sites on Amazon EC2 servers running AMI flavor of Linux. About a year ago I upgraded from standard webpages to ssl to make Google and other search engines happy. Everything was going fine until recently when the site didn’t renew the certificates for SSL from Let’s Encrypt.
While I had followed the Amazon tutorial exactly (https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/SSL-on-an-instance.html#letsencrypt) Certbot wasn’t running any longer. After troubleshooting, I found that it was a common problem with the latest versions of certbot. There were a lot of solutions provided by various people, none worked correctly. What did work is:
Solution:
On the github website (https://github.com/certbot/certbot/issues/1680#issuecomment-358728515) I found a solution that worked:
sudo rm -rf /opt/eff.org/*
pip install -U certbot
sudo certbot renew –-debug
I did have to make one change since I was using the -auto version of certbot:
sudo ./certbot-auto renew –-debug
Now the solutions is available should I (or anyone else) need it!
Lumberyard, Lua, Corona Projects Update
We have been working on several major projects at Burtons Media Group. We thought we would take a moment and provide an update on the individual status of the projects:
Amazon Lumberyard Game Development Fundamentals: Space Explorer
The textbook is mostly complete with the exception of the final chapter where we cover visual scripting. We are semi-patiently awaiting the release of Lumberyard 1.10. This update promises to be a major one with the inclusion of Script Canvas, Amazon Lumberyard’s visual scripting toolset. Expect to see the release of this textbook and associated on-demand video course soon after the 1.10 release.
Corona Development On-Demand Course
The on-demand course is in active development with completely new and updated videos and content. While based upon our Learning Mobile Application & Game Development and Beginning Mobile App Development textbooks, we are adding additional lessons to make this a great value above and beyond the textbooks. We will be providing a discount if you previously purchased one of the Corona Textbooks.
Work continues on the isometric game development book. We will be using the Million Tile Engine plugin to handle much of the heavy lifting and focus on the isometric game development process in this textbook.
Learning Lua
Lua seems to be at the center of every project that we develop. While it was not intentional, it has definitely become the “need to know” scripting language at BMG. To that end, we have started developing a textbook and on-demand course content on Lua that will cover everything from the basics through using Lua for Machine Learning (Torch) and implementing Lua as a part of an engine.
Burton Institute of Technology
We at Burtons Media Group were recently asked when we would begin to provide on-demand training for Lumberyard, Corona, and Lua. In the past, we have focused on digital-print (i.e. pdf and ePub) plus making games.
As we surveyed the landscape (and with Dr. Burton’s extensive knowledge of online learning) we have decided to begin actively developing online certificate courses. Production has already begun and you can expect to see BIT courses via the BurtonsMediaGroup.com website in the very near future.