Учебник. Создание первого приложения WebXR с помощью Babylon.js

  • Статья

В этом учебнике рассказано, как создать базовое приложение смешанной реальности с помощью Babylon.js и Visual Studio Code. Приложение, которое вы будете собирать, будет визуализировать куб, поворачивать его, чтобы отображать другие грани, и добавлять взаимодействия. В этом руководстве описано следующее:

  • Настройка среды разработки
  • API Babylon.js для создания базовых трехмерных элементов
  • Создание веб-страницы
  • Взаимодействие с трехмерными элементами
  • Запуск приложения в симуляторе Windows Mixed Reality

Предварительные требования

Начало работы

Чтобы создать этот проект с нуля, начните с проекта Visual Studio Code (VSCode).

Примечание

Использование редактора VSCode не является обязательным, но мы будем применять его для удобства в рамках этого руководства. Более опытные разработчики JavaScript могут использовать любой другой редактор по своему выбору, даже простой Блокнот.

  1. Скачайте Babylon.js отдельным файлом или воспользуйтесь интерактивной версией, которую можно найти на официальном веб-сайте Babylon.js. Можно также клонировать весь проект Babylon.js из GitHub.

  2. Создайте пустой файл и сохраните его как HTML-страницу, например index.html.

  3. Создайте базовую разметку HTML и сделайте ссылку на файл JavaScript Babylon.js. Готовый код показан ниже.

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

  4. Добавьте в текст элемент HTML Canvas, чтобы отобразить содержимое Babylon.js. Обратите внимание, что Canvas содержит атрибут ID, который позволяет получить доступ к этому элементу HTML из JavaScript позже.

    <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. Элемент Canvas занимает всю веб-страницу. На этом веб-страница завершается. Теперь страница готова. Вы можете открыть ее в любом браузере и проверить, нет ли ошибок, хотя на ней еще нет иммерсивных возможностей.

Дальнейшие действия

Следующий учебник: 2. Подготовка сцены