Set up your development environment

Completed

To start building this project, you first need to set it up. You can create a Babylon.js WebXR project by using just JavaScript, HTML, and CSS. But instead, we'll use WebPack, Node.js, and TypeScript in this module. This choice allows for better project architecture, type safety, and growth potential.

Two options

There are two ways to continue through this module. Either will lead you to the same place. This module will guide you through the process of breaking down an XR experience into testable units.

Option 1: Create the Space Jam: A New Legacy XR experience by using a GitHub template

In this option, you use CodeTour in Visual Studio Code to explore a nearly completed version and add your own personalization.

To get started, create a GitHub repository for this app. Go to the page to create a repository based on the template and fill in the form. Name your repo space-jam-a-new-legacy-babylonjs. You can make this repo public or private, but be sure to include all branches.

Screenshot that shows creating a repository for the project by using the GitHub template, for a completed experience.

Option 2: Create a plain Babylon.js XR experience by using a GitHub template

In this option, you start with a plain Babylon.js project and write all of the code after this module.

To get started, create a GitHub repo for this app. Go to the page to create a repository based on the template and fill in the form. Name your repo space-jam-a-new-legacy-babylonjs. You can make this repo public or private, but be sure to include all branches.

Screenshot that shows creating a repository for the project by using the GitHub template, for a plain experience.

Clone your repo by using Visual Studio Code

Note

You might be prompted to sign in to GitHub throughout the remaining steps in this unit. If so, follow the instructions to authorize Visual Studio Code to access this specific repository. This authorization is necessary to complete the module.

After your repo is created, clone it (make a copy on your local computer) by using Visual Studio Code.

  1. Open a new Visual Studio Code window by selecting File > New Window.

  2. Open the command palette by using the Ctrl+Shift+P shortcut, and then enter Git: Clone.

    Screenshot that shows the clone repository menu item in Visual Studio Code.

  3. On GitHub.com, in your space-jam-a-new-legacy-babylonjs repo, select the Clone button and copy the HTTPS URL.

    Screenshot that shows how to get the HTTPS URL of the repo from GitHub.com.

  4. In Visual Studio Code, paste the URL that you copied at the command prompt and select the Enter key. If you're prompted, choose a location for your code to be downloaded. If you're prompted, choose to open the code in your current window.

Build and run the starter project

Whether you're starting with the completed project template from GitHub or you're starting from the plain Babylon.js project template, make sure that you have all of the packages installed and the project builds.

Because we're using Node.js, a packages.json file defines the needed packages. Run the following commands to install the packages, run the build, and start the project.

  1. Open the terminal in Visual Studio Code.

  2. Enter the following command to install packages:

    npm install

  3. Enter the following command to run the build:

    npm run build

  4. Enter the following command to start the project:

    npm start

  5. Go to http://localhost:8080/.

    If you chose option 1 earlier, you should see the following scene.

    starter-template-scene-option-1.

    If you chose option 2, you should see the following scene.

    starter-template-scene-option-2.

With these basic scenes, you're ready to get started rendering your Mixed Reality experience!

© 2021 Warner Bros. Ent. All Rights Reserved.