How to create your first Scene in Playground

We will create our scenes, save and share them on playground.

BabylonJS Code

To create a basic BabylonJS scene, we initialize a scene, create camera, light and a mesh and return the scene object.

const createScene =  () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}

Scene object gets engine as the input argument. You don't have to worry about the engine when you are working on the playground but when you are working on your local code sample, we will create the engine as well.

What is an Arc Camera?

Arc Rotate Camera acts like a satellite in orbit around a target and always points towards the target position. In our case, it is pointing towards the box. Where ever you move your camera, it will still point to towards the box.

Arc Rotate Camera parameters are: name you want to give to your camera, alpha(radians) the longitudinal rotation, beta beta (radians) the latitudinal rotation, radius(the distance from the target position), target position(center where the box will be created as a default), scene(optional argument). In this code example scene is not given as an argument and defaults to the scene object on the playground.

Setting beta to 0 or PI can, for technical reasons, cause problems.

What is an Hemispheric Light?

A hemispheric light is an easy way to simulate an ambient environment light. In our case, we are doing the bare minimum, just giving a name to the light and set it's location.

Setting y location to 1 while our main object is in the center (0,0,0) location will move the light above the object.

What is a Box Mesh?

We are creating a Box Mesh by calling BABYLON.MeshBuilder.CreateBox method with the minimum requirements, a name and an options empty object.

Basic Scene Exercises

Navigate to the code sample playground: https://playground.babylonjs.com/#KBS9I5#158
Move your mouse over the box and click & drag.
Uncomment line 5 and save or play the playground example.
Again, move mouse over the box and click & drag.
On the BABYLON.MeshBuilder.CreateBox method replace the empty object with this object: {width: 4, height: 2}.

How to load a 3D model on Playground?

Loading a 3D model is like uploading an image but for 3D models. You can upload one or multiple models as shown in below code sample.

Loading takes time and is asynchronous. When we call the function, web browser gives us back a "" that it will give us a result when the loading is complete. Now we can call the can let the browser know what we want to do when the loading is complete inside the .then(whatToDoWhenModelLoadedFunction). We call this function a callback functions.

Below example loads all the models in the path and changes the position.

Exercise:

1) The postion of the house is changed in the above example by setting an integer value to house1.position.y. Try setting scaling the model by setting it's scale value, ex: house1.scale.x.

2) Console.log the house2 object to see what it is. Save and open the developer tools with the short cut: Option + Command + I on mac and Control + Shift + I on windows. Find the console tab to see the printed house object.

How to add user interactions?

Changing color with click event

To change the color of our object with interactions, first we will add a material.

Now we can add a click event and change the color and position with the click

Dragging an object

Solution

How to add WebXR support?

How to add Virtual Reality capabilities to your app?

We need to add an environment and create an XR Experience. This will automaticly add a button to our scene to go into VR mode.

We can also add the WebXR directly to a loaded model without an environment.

How to test your WebXR app on an Android phone or Google Cardboard?

You can simply open up the playground link on your phone or

.
Watch .

How to setup a BabylonJS local development environment and project?

Find the code sample on Github

If you are starting a new project, you can use the below projects as a template on github:

Basic HTML & JS
Babylon Webpack es6 by Raanan
React Babylon by Brianzinn
Angular Babylon by JohnnyDevNull
Vue Babylon by Beg-in

Or you can follow the Babylon TypeScript Webpack setup tutorial.

How to add BabylonJS to an existing project

You can use your favorite tool like npm or yarn to add babylon packages. Find more information about BabylonJS NPM packages on the documentation.

Babylon.js AR scene

Create a Babylon.js scene

    createScene = async (
        engine: Engine,
        canvas: HTMLCanvasElement
    ): Promise<Scene> => {
        // This creates a basic Babylon Scene object (non-mesh)
        const scene = new Scene(engine);

Add camera

        // This creates and positions a free camera (non-mesh)
        const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);

        // This targets the camera to scene origin
        camera.setTarget(Vector3.Zero());

        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);

Add light

        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

        // Default intensity is 1. Let's dim the light a small amount
        light.intensity = 0.7;

Add Objects


        // Our built-in 'sphere' shape.
        const sphere = Mesh.CreateSphere(
            "sphere", 32, 2,
            scene
        );

        // Move the sphere upward 1/2 its height
        sphere.position.y = 2;
        sphere.position.z = 5;

Add Material

        // Load a texture to be used as the ground material
        const groundMaterial = new StandardMaterial("ground material", scene);
        groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
        // Assign it to an object like sphere.material = groundMaterial;

Add WebXR

        const xr = await scene.createDefaultXRExperienceAsync({
            // ask for an ar-session
            uiOptions: {
                sessionMode: "immersive-ar",
                referenceSpaceType: "local-floor"
            },
            optionalFeatures: true,
        });

        const featuresManager = xr.baseExperience.featuresManager;

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { FreeCamera, WebXRHitTest } from '@babylonjs/core';

import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Quaternion, Vector3 } from "@babylonjs/core/Maths/math.vector";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { StandardMaterial } from "@babylonjs/core";
import { CreateSceneClass } from "../createScene";

import { getTokenOrRefresh } from "../utils/token_util";
import { ResultReason } from "microsoft-cognitiveservices-speech-sdk";

// If you don't need the standard material you will still need to import it since the scene requires it.
// import "@babylonjs/core/Materials/standardMaterial";
import { Texture } from "@babylonjs/core";

import grassTextureUrl from "../../assets/grass.jpg";
import { Mesh, MeshBuilder } from "@babylonjs/core/Meshes";

export class DefaultSceneWithTexture implements CreateSceneClass {

    createScene = async (
        engine: Engine,
        canvas: HTMLCanvasElement
    ): Promise<Scene> => {
        // This creates a basic Babylon Scene object (non-mesh)
        const scene = new Scene(engine);

        // This creates and positions a free camera (non-mesh)
        const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);

        // This targets the camera to scene origin
        camera.setTarget(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)
        const light = new HemisphericLight("light", new 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.
        const sphere = Mesh.CreateSphere(
            "sphere", 32, 2,
            scene
        );

        // Move the sphere upward 1/2 its height
        sphere.position.y = 2;
        sphere.position.z = 5;

        // Load a texture to be used as the ground material
        const groundMaterial = new StandardMaterial("ground material", scene);
        groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
        // ground.material = groundMaterial;
        
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const xr = await scene.createDefaultXRExperienceAsync({
            // ask for an ar-session
            uiOptions: {
                sessionMode: "immersive-ar",
                referenceSpaceType: "local-floor"
            },
            optionalFeatures: true,
        });

        const featuresManager = xr.baseExperience.featuresManager;


        const marker = MeshBuilder.CreateTorus("marker", { diameter: 0.1, thickness: 0.05 }, scene);
        marker.rotationQuaternion = new Quaternion();


        return scene;
    };
}

export default new DefaultSceneWithTexture();

Add Speech SDK

npm install microsoft-cognitiveservices-speech-sdk

 "dependencies": {
        "@babylonjs/core": "5.0.0-beta.4",
        "@babylonjs/loaders": "5.0.0-beta.4",
        "ammo.js": "github:kripken/ammo.js",
        "axios": "^0.25.0",
        "body-parser": "^1.19.0",
        "express": "^4.17.2",
        "express-pino-logger": "^7.0.0",
        "microsoft-cognitiveservices-speech-sdk": "^1.19.0",
        "universal-cookie": "^4.0.4"
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^2.30.0",
        "@typescript-eslint/parser": "^2.30.0",
        "body-parser": "^1.19.0",
        "clean-webpack-plugin": "^3.0.0",
        "dotenv": "^14.2.0",
        "eslint": "^7.32.0",
        "express": "^4.17.1",
        "express-pino-logger": "^5.0.0",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.5.0",
        "node-env-run": "^4.0.2",
        "nodemon": "^2.0.7",
        "npm-run-all": "^4.1.5",
        "pino-colada": "^2.1.0",
        "source-map-loader": "^3.0.0",
        "ts-loader": "^8.3.0",
        "typescript": "^4.5.2",
        "url-loader": "^4.1.1",
        "webpack": "^5.64.2",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.5.0",
        "webpack-merge": "^5.8.0"
    },
    "scripts": {
        "start": "npx webpack serve --config webpack.dev.js",
        "build:dev": "npx webpack --config webpack.dev.js",
        "build": "npx webpack --config webpack.prod.js",
        "server": "node-env-run server --exec nodemon | pino-colada",
        "lint": "npx eslint . --ext .ts,.tsx"
    },

What is an Hemispheric Light?

A hemispheric light is an easy way to simulate an ambient environment light. In our case, we are doing the bare minimum, just giving a name to the light and set it's location.

Setting y location to 1 while our main object is in the center (0,0,0) location will move the light above the object.

Basic Scene Exercises

Navigate to the code sample playground: https://playground.babylonjs.com/#KBS9I5#158
Move your mouse over the box and click & drag.
Uncomment line 5 and save or play the playground example.
Again, move mouse over the box and click & drag.
On the BABYLON.MeshBuilder.CreateBox method replace the empty object with this object: {width: 4, height: 2}.

What is a Box Mesh?

We are creating a Box Mesh by calling BABYLON.MeshBuilder.CreateBox method with the minimum requirements, a name and an options empty object.

How to add WebXR support?

How to create your first Scene in Playground

We will create our scenes, save and share them on playground.

BabylonJS Code

To create a basic BabylonJS scene, we initialize a scene, create camera, light and a mesh and return the scene object.

const createScene =  () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    return scene;
}

How to test your WebXR app on an Android phone or Google Cardboard?

You can simply open up the playground link on your phone or

.
Watch .

How to add user interactions?

Changing color with click event

To change the color of our object with interactions, first we will add a material.

Now we can add a click event and change the color and position with the click

Dragging an object

    //Create pointerDragBehavior in the desired mode
    //var pointerDragBehavior = new BABYLON.PointerDragBehavior({});
    //var pointerDragBehavior = new BABYLON.PointerDragBehavior({dragPlaneNormal: new BABYLON.Vector3(0,1,0)});
    var pointerDragBehavior = new BABYLON.PointerDragBehavior({dragAxis: new BABYLON.Vector3(1,0,0)});
    
    // Use drag plane in world space
    pointerDragBehavior.useObjectOrientationForDragging = false;

    // Listen to drag events
    pointerDragBehavior.onDragStartObservable.add((event)=>{
        console.log("dragStart");
        console.log(event);
    })
    pointerDragBehavior.onDragObservable.add((event)=>{
        console.log("drag");
        console.log(event);
    })
    pointerDragBehavior.onDragEndObservable.add((event)=>{
        console.log("dragEnd");
        console.log(event);
    })

    // If handling drag events manually is desired, set move attached to false
    // pointerDragBehavior.moveAttached = false;

    sphere.addBehavior(pointerDragBehavior);

Dragging an object in 6 .

Solution

How to add Virtual Reality capabilities to your app?

We need to add an environment and create an XR Experience. This will automaticly add a button to our scene to go into VR mode.

We can also add the WebXR directly to a loaded model without an environment.

// Async call
BABYLON.SceneLoader.Append("https://www.babylonjs.com/Scenes/Mansion/",
    "Mansion.babylon", scene, async function  () {
        var xr = await scene.createDefaultXRExperienceAsync({floorMeshes: [scene.getMeshByName("Allée")]});
    });

How to load a 3D model on Playground?

Loading a 3D model is like uploading an image but for 3D models. You can upload one or multiple models as shown in below code sample.

Below example loads all the models in the path and changes the position.

Exercise:

1) The postion of the house is changed in the above example by setting an integer value to house1.position.y. Try setting scaling the model by setting it's scale value, ex: house1.scale.x.

   BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "both_houses_scene.babylon").then((result) => {
        const house1 = scene.getMeshByName("detached_house");
        house1.position.y = 2;
        const house2 = result.meshes[2];
        house2.position.y = 1;
        console.log("House2 is ", house2);
    });

What is an Arc Camera?

Setting beta to 0 or PI can, for technical reasons, cause problems.

    var boxMaterial = new BABYLON.StandardMaterial("material", scene);
    boxMaterial.diffuseColor = BABYLON.Color3.Random();
    box.material = boxMaterial;

box.actionManager = new BABYLON.ActionManager(scene);
    box.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
    BABYLON.ActionManager.OnPickTrigger, 
    function (evt) {
        var sourceBox = evt.meshUnderPointer;
        
        //move the box upright
        sourceBox.position.x += 0.1;
        sourceBox.position.y += 0.1;

        //update the color
        boxMaterial.diffuseColor = BABYLON.Color3.Random();
    }));

    //Create pointerDragBehavior in the desired mode
    //var pointerDragBehavior = new BABYLON.PointerDragBehavior({});
    //var pointerDragBehavior = new BABYLON.PointerDragBehavior({dragPlaneNormal: new BABYLON.Vector3(0,1,0)});
    var pointerDragBehavior = new BABYLON.PointerDragBehavior({dragAxis: new BABYLON.Vector3(1,0,0)});
    
    // Use drag plane in world space
    pointerDragBehavior.useObjectOrientationForDragging = false;

    // Listen to drag events
    pointerDragBehavior.onDragStartObservable.add((event)=>{
        console.log("dragStart");
        console.log(event);
    })
    pointerDragBehavior.onDragObservable.add((event)=>{
        console.log("drag");
        console.log(event);
    })
    pointerDragBehavior.onDragEndObservable.add((event)=>{
        console.log("dragEnd");
        console.log(event);
    })

    // If handling drag events manually is desired, set move attached to false
    // pointerDragBehavior.moveAttached = false;

    sphere.addBehavior(pointerDragBehavior);

// Async call
BABYLON.SceneLoader.Append("https://www.babylonjs.com/Scenes/Mansion/",
    "Mansion.babylon", scene, async function  () {
        var xr = await scene.createDefaultXRExperienceAsync({floorMeshes: [scene.getMeshByName("Allée")]});
    });

   BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "both_houses_scene.babylon").then((result) => {
        const house1 = scene.getMeshByName("detached_house");
        house1.position.y = 2;
        const house2 = result.meshes[2];
        house2.position.y = 1;
        console.log("House2 is ", house2);
    });

Add Speech SDK

npm install microsoft-cognitiveservices-speech-sdk

 "dependencies": {
        "@babylonjs/core": "5.0.0-beta.4",
        "@babylonjs/loaders": "5.0.0-beta.4",
        "ammo.js": "github:kripken/ammo.js",
        "axios": "^0.25.0",
        "body-parser": "^1.19.0",
        "express": "^4.17.2",
        "express-pino-logger": "^7.0.0",
        "microsoft-cognitiveservices-speech-sdk": "^1.19.0",
        "universal-cookie": "^4.0.4"
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^2.30.0",
        "@typescript-eslint/parser": "^2.30.0",
        "body-parser": "^1.19.0",
        "clean-webpack-plugin": "^3.0.0",
        "dotenv": "^14.2.0",
        "eslint": "^7.32.0",
        "express": "^4.17.1",
        "express-pino-logger": "^5.0.0",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.5.0",
        "node-env-run": "^4.0.2",
        "nodemon": "^2.0.7",
        "npm-run-all": "^4.1.5",
        "pino-colada": "^2.1.0",
        "source-map-loader": "^3.0.0",
        "ts-loader": "^8.3.0",
        "typescript": "^4.5.2",
        "url-loader": "^4.1.1",
        "webpack": "^5.64.2",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.5.0",
        "webpack-merge": "^5.8.0"
    },
    "scripts": {
        "start": "npx webpack serve --config webpack.dev.js",
        "build:dev": "npx webpack --config webpack.dev.js",
        "build": "npx webpack --config webpack.prod.js",
        "server": "node-env-run server --exec nodemon | pino-colada",
        "lint": "npx eslint . --ext .ts,.tsx"
    },

Babylon.js AR scene

Create a Babylon.js scene

    createScene = async (
        engine: Engine,
        canvas: HTMLCanvasElement
    ): Promise<Scene> => {
        // This creates a basic Babylon Scene object (non-mesh)
        const scene = new Scene(engine);

Add camera

        // This creates and positions a free camera (non-mesh)
        const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);

        // This targets the camera to scene origin
        camera.setTarget(Vector3.Zero());

        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);

Add light

        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

        // Default intensity is 1. Let's dim the light a small amount
        light.intensity = 0.7;

Add Objects


        // Our built-in 'sphere' shape.
        const sphere = Mesh.CreateSphere(
            "sphere", 32, 2,
            scene
        );

        // Move the sphere upward 1/2 its height
        sphere.position.y = 2;
        sphere.position.z = 5;

Add Material

        // Load a texture to be used as the ground material
        const groundMaterial = new StandardMaterial("ground material", scene);
        groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
        // Assign it to an object like sphere.material = groundMaterial;

Add WebXR

        const xr = await scene.createDefaultXRExperienceAsync({
            // ask for an ar-session
            uiOptions: {
                sessionMode: "immersive-ar",
                referenceSpaceType: "local-floor"
            },
            optionalFeatures: true,
        });

        const featuresManager = xr.baseExperience.featuresManager;

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { FreeCamera, WebXRHitTest } from '@babylonjs/core';

import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Quaternion, Vector3 } from "@babylonjs/core/Maths/math.vector";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { StandardMaterial } from "@babylonjs/core";
import { CreateSceneClass } from "../createScene";

import { getTokenOrRefresh } from "../utils/token_util";
import { ResultReason } from "microsoft-cognitiveservices-speech-sdk";

// If you don't need the standard material you will still need to import it since the scene requires it.
// import "@babylonjs/core/Materials/standardMaterial";
import { Texture } from "@babylonjs/core";

import grassTextureUrl from "../../assets/grass.jpg";
import { Mesh, MeshBuilder } from "@babylonjs/core/Meshes";

export class DefaultSceneWithTexture implements CreateSceneClass {

    createScene = async (
        engine: Engine,
        canvas: HTMLCanvasElement
    ): Promise<Scene> => {
        // This creates a basic Babylon Scene object (non-mesh)
        const scene = new Scene(engine);

        // This creates and positions a free camera (non-mesh)
        const camera = new FreeCamera("camera1", new Vector3(0, 1, -5), scene);

        // This targets the camera to scene origin
        camera.setTarget(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)
        const light = new HemisphericLight("light", new 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.
        const sphere = Mesh.CreateSphere(
            "sphere", 32, 2,
            scene
        );

        // Move the sphere upward 1/2 its height
        sphere.position.y = 2;
        sphere.position.z = 5;

        // Load a texture to be used as the ground material
        const groundMaterial = new StandardMaterial("ground material", scene);
        groundMaterial.diffuseTexture = new Texture(grassTextureUrl, scene);
        // ground.material = groundMaterial;
        
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const xr = await scene.createDefaultXRExperienceAsync({
            // ask for an ar-session
            uiOptions: {
                sessionMode: "immersive-ar",
                referenceSpaceType: "local-floor"
            },
            optionalFeatures: true,
        });

        const featuresManager = xr.baseExperience.featuresManager;


        const marker = MeshBuilder.CreateTorus("marker", { diameter: 0.1, thickness: 0.05 }, scene);
        marker.rotationQuaternion = new Quaternion();


        return scene;
    };
}

export default new DefaultSceneWithTexture();

How to setup a BabylonJS local development environment and project?

Find the code sample on Github

If you are starting a new project, you can use the below projects as a template on github:

Basic HTML & JS
Babylon Webpack es6 by Raanan
React Babylon by Brianzinn
Angular Babylon by JohnnyDevNull
Vue Babylon by Beg-in

Or you can follow the Babylon TypeScript Webpack setup tutorial.

How to add BabylonJS to an existing project

You can use your favorite tool like npm or yarn to add babylon packages. Find more information about BabylonJS NPM packages on the documentation.

//empty string all meshes
BABYLON.SceneLoader.ImportMeshAsync("", "/relative path/", "myFile"); 
//Name of model for one model
BABYLON.SceneLoader.ImportMeshAsync("model1", "/relative path/", "myFile"); 
//Array of model names
BABYLON.SceneLoader.ImportMeshAsync(["model1", "model2"], "/relative path/", "myFile");

    BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "both_houses_scene.babylon").then((result) => {
        const house1 = scene.getMeshByName("detached_house");
        house1.position.y = 2;
        const house2 = result.meshes[2];
        house2.position.y = 1;
    });

Project

How to create your first Scene in Playground

BabylonJS Code

What is an Arc Camera?

What is an Hemispheric Light?

What is a Box Mesh?

Basic Scene Exercises

How to load a 3D model on Playground?

Exercise:

How to add user interactions?

Changing color with click event

Dragging an object

How to add WebXR support?

How to add Virtual Reality capabilities to your app?

How to test your WebXR app on an Android phone or Google Cardboard?

How to setup a BabylonJS local development environment and project?

How to add BabylonJS to an existing project

Babylon.js AR scene

Add Speech SDK

What is an Hemispheric Light?

Basic Scene Exercises

What is a Box Mesh?

How to add WebXR support?

How to create your first Scene in Playground

BabylonJS Code

How to test your WebXR app on an Android phone or Google Cardboard?

How to add user interactions?

Changing color with click event

Dragging an object

How to add Virtual Reality capabilities to your app?

How to load a 3D model on Playground?

Exercise:

What is an Arc Camera?

Add Speech SDK

Babylon.js AR scene

How to setup a BabylonJS local development environment and project?

How to add BabylonJS to an existing project