Tutorial: Crie a sua primeira aplicação WebXR utilizando babylon.js

Este tutorial irá mostrar-lhe como criar uma aplicação básica de Realidade Mista utilizando babylon.js e Visual Studio Código. A aplicação que vai construir renderizará um cubo, permitirá rodá-lo para colocar as outras caras à vista e adicionar interações. Neste tutorial, ficará a saber como:

  • Criar um ambiente de desenvolvimento
  • A babylon.js API 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 Visual Studio Código (VSCode).

Nota

Usar o VSCode não é obrigatório, mas vamos usá-lo para conveniência durante todo o tutorial. Os desenvolvedores JavaScript mais experientes podem usar qualquer outro editor à sua escolha, mesmo o mais simples Bloco de notas.

  1. Descarregue o ficheiro babylon.js único ou utilize uma versão online que possa ser encontrada no web site oficial babylon.js. Também pode clonar todo o projeto babylon.js a partir de 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 babylon.js ficheiro javascript. O código final é como 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 lona no interior do corpo para tornar o conteúdo de babylon.js. Note que a tela tem um atributo de id, que 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. Isso completa a nossa página web. Neste ponto, a página web está pronta. Pode abri-lo em qualquer navegador e garantir que não há erros mostrados, embora ainda não haja experiência imersiva.

Passos seguintes