Edit

Tutorial: Create your first WebXR application using Babylon.js

  • Article

This tutorial will show you how to create a basic Mixed Reality app using Babylon.js and Visual Studio Code. The app you're going to build will render a cube, let you rotate it to bring the other faces into view, and add interactions. In this tutorial, you learn how to:

  • Set up a development environment
  • The Babylon.js API to create basic 3D elements
  • Create a new web page
  • Interact with 3D elements
  • Run the application in a Windows Mixed Reality Simulator

Prerequisites

Getting started

To create this project from scratch, start with a Visual Studio Code (VSCode) project.

Note

Using VSCode isn't mandatory, but we'll be using it for convenience throughout the tutorial. More experienced JavaScript developers can use any other editor of their choice, even the simplest Notepad.

  1. Either download the Babylon.js single file or use an online version that can be found on the official Babylon.js web site. You can also clone the entire Babylon.js project from GitHub

  2. Create an empty file and save it as html page, for example index.html

  3. Create a basic html markup and reference the Babylon.js javascript file. The final code is as shown below:

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

  4. Add a canvas HTML element inside the body to render the contents of Babylon.js. Note that the canvas has an id attribute, which lets you access this HTML element from JavaScript later on.

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

  5. The canvas occupies the entire web page. That completes our web page. At this point, the web page is ready. You can open it in any browser and ensure there are no errors shown, though there is no immersive experience yet.

Next steps

Next Tutorial: 2. Prepare a scene