Tutorial: Crie seu primeiro aplicativo WebXR usando o Babylon.js

  • Artigo

Este tutorial mostrará como criar um aplicativo básico de Realidade Misturada usando o Babylon.js e o Visual Studio Code. O aplicativo que você irá criar renderizará um cubo, permitirá que você o gire para exibir as outras faces e adicionar interações. Neste tutorial, você aprenderá como:

  • Configurar um ambiente de desenvolvimento
  • API Babylon.js para criar elementos 3D básicos
  • Criar uma página da Web
  • Interagir com elementos 3D
  • Executar o aplicativo em um Simulador do Windows Mixed Reality

Pré-requisitos

Introdução

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

Observação

O uso do VSCode não é obrigatório, mas o utilizaremos para sua conveniência ao longo do tutorial. Desenvolvedores JavaScript mais experientes podem usar qualquer outro editor de sua escolha, até mesmo os Bloco de Notas mais simples.

  1. Baixe o arquivo único Babylon.js ou use uma versão online que pode ser encontrada no site oficial do Babylon.js. Você também pode clonar todo o projeto Babylon.js do GitHub

  2. Crie um arquivo vazio e salve-o como uma página HTML, por exemplo, index.html

  3. Crie uma marcação HTML básica e faça referência ao arquivo JavaScript do Babylon.js. O código final é 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 renderizar o conteúdo do Babylon.js. Observe que a tela tem um atributo ID, que permite que você acesse esse elemento HTML do JavaScript posteriormente.

    <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 da Web. Isso conclui nossa página da Web. Neste ponto, a página da Web está pronta. Você pode abri-la em qualquer navegador e garantir que não sejam exibidos erros, embora ainda não haja nenhuma experiência imersiva.

Próximas etapas

Próximo tutorial: 2. Preparar uma cena