Partilhar via

Tutorial: Criar a sua primeira aplicação WebXR com Babylon.js

  • Artigo

Este tutorial irá mostrar-lhe como criar uma aplicação de Mixed Reality básica com o Babylon.js e o Visual Studio Code. A aplicação que vai criar irá compor um cubo, permitir-lhe rodá-lo para ver os outros rostos e adicionar interações. Neste tutorial, ficará a saber como:

  • Configurar um ambiente de desenvolvimento
  • A API Babylon.js para criar elementos 3D básicos
  • Criar uma nova página Web
  • Interagir com elementos 3D
  • Executar a aplicação num Simulador de Windows Mixed Reality

Pré-requisitos

Introdução

Para criar este projeto do zero, comece com um projeto do Visual Studio Code (VSCode).

Nota

A utilização do VSCode não é obrigatória, mas iremos utilizá-la para sua comodidade ao longo do tutorial. Os programadores de JavaScript mais experientes podem utilizar qualquer outro editor à sua escolha, mesmo o Bloco de Notas mais simples.

  1. Transfira o ficheiro únicoBabylon.js ou utilize uma versão online que possa ser encontrada no site oficial Babylon.js. Também pode clonar todo o projeto Babylon.js a partir do GitHub

  2. Crie um ficheiro vazio e guarde-o como página html, por exemplo index.html

  3. Crie uma marcação html básica e faça referência ao ficheiro javascript Babylon.js. O código final é o mostrado abaixo:

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

  4. Adicione um elemento HTML de tela dentro do corpo para compor o conteúdo de Babylon.js. Tenha em atenção que a tela tem um atributo de ID, que lhe permite aceder a este elemento HTML a partir de JavaScript mais tarde.

    <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. A tela ocupa toda a página Web. Isto conclui a nossa página Web. Neste momento, a página Web está pronta. Pode abri-lo em qualquer browser e garantir que não são apresentados erros, embora ainda não exista experiência envolvente.

Passos seguintes

Próximo Tutorial: 2. Preparar uma cena