Skip to content

Latest commit

 

History

History
77 lines (62 loc) · 3.47 KB

introduction-01.md

File metadata and controls

77 lines (62 loc) · 3.47 KB
Raw
title description author ms.author ms.date ms.topic keywords ms.localizationpriority ms.custom ms.contributors
Introduction to the Babylon.js and WebXR tutorials
Complete this course to learn how to use Babylon.js and create basic Mixed Reality application.
lolambean
lolab
03/05/2021
article
mixed reality, javascript, tutorial, BabylonJS, hololens, mixed reality, UWP, Windows 10, WebXR, immersive web
high
team=cloud_advocates
ayyonet-03232021

Tutorial: Create your first WebXR application using Babylon.js

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:

[!div class="checklist"]

  • 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

[!div class="nextstepaction"] Next Tutorial: 2. Prepare a scene