Статьи

Babylon.js: Как загрузить файл .babylon, созданный с помощью Blender

Октябрь 13, 2017

В предыдущем посте я описал Babylon.js , новый 3D-движок для WebGL и JavaScript. Помимо других возможностей, Babylon.js способен загружать файл JSON через формат файла .babylon.

В этом посте я покажу вам, как использовать API Babylon.js для загрузки сцены, созданной с помощью Blender.

образ

Создание сцены и экспорт файла .babylon с помощью Blender

В моем предыдущем посте я уже описывал, как установить экспортер .babylon в Blender, но для понимания я скопировал / вставил процесс здесь:

Прежде всего, пожалуйста, скачайте скрипт экспортера прямо здесь: http://www.babylonjs.com/Blender2Babylon.zip .

Чтобы установить его в Blender, следуйте этому небольшому руководству:

  • Разархивируйте файл в папку плагинов вашего Blender (должно быть C: \ Program Files \ Blender Foundation \ Blender \ 2.67 \ scripts \ addons для Blender 2.67 x64).
  • Запустите Blender, перейдите в «Файл» / «Настройки пользователя» / «Аддон» и выберите категорию «Импорт-экспорт». Вы сможете активировать экспортер Babylon.js.

образ

  • Создайте свою сцену
  • Перейдите в Файл / Экспорт и выберите формат Babylon.js. Выберите имя файла, и все готово!

образ

После того, как экспортер установлен, вы можете раскрутить свою сторону художника и создать самую красивую сцену, которую может создать ваше воображение. В моем случае это будет довольно просто:

  • Камера
  • Точечный свет
  • Самолет для земли
  • Сфера

образ

Просто чтобы быть немного менее строгим, я добавлю несколько цветов для земли и сферы:

образ

Я также добавлю текстуру для сферы. Эта текстура будет использоваться для диффузного канала материала:

образ

Пожалуйста, обратите внимание на:

  • Используйте флажок Альфа, чтобы указать Babylon.js использовать альфа-значения из текстуры
  • Цвет флажок, чтобы указать, что эта текстура должна использоваться для диффузного цвета

образ

Если вы удовлетворены (очевидно, что вы можете создать более сложную сцену), просто перейдите в File / Export / Babylon.js, чтобы создать файл .babylon.

образ

Загрузка вашего .babylon внутри вашей страницы / приложения

Прежде всего, вы должны создать простую HTML-страницу:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Using babylon.js - How to load a scene</title>
    <script src="babylon.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
 </body>
</html>

Эта страница довольно проста, потому что все, что вам нужно, это просто холст и ссылка на babylon.js.

Затем вам нужно будет использовать объект BABYLON.SceneLoader для загрузки вашей сцены. Для этого просто добавьте этот блок скрипта сразу после холста:

<script>
    if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        BABYLON.SceneLoader.Load("", "scene.babylon", engine, function (newScene) {
            // Wait for textures and shaders to be ready
            newScene.executeWhenReady(function () {
                // Attach camera to canvas inputs
                newScene.activeCamera.attachControl(canvas);

                // Once the scene is loaded, just register a render loop to render it
                engine.runRenderLoop(function() {
                    newScene.render();
                });
            });
        }, function (progress) {
            // To do: give progress feedback to user
        });
    }
</script>

нагрузки функция принимает следующие параметры:

  • папка сцены (может быть пустой, чтобы использовать ту же папку, что и ваша страница)
  • имя файла сцены
  • ссылка на двигатель
  • обратный вызов, чтобы дать вам загруженную сцену (в моем случае я использую этот обратный вызов, чтобы прикрепить камеру к холсту и запустить мой цикл рендеринга)
  • обратный вызов для отчета о проделанной работе

Как только сцена загружена, просто подождите, пока текстуры и шейдеры будут готовы, подключите камеру к холсту и поехали!

Довольно просто, не правда ли?

Обратите внимание, что текстуры и файл .babylon должны располагаться рядом

Еще одна функция также доступна для взаимодействия с файлами .babylon : BABYLON.SceneLoader.importMesh :

BABYLON.SceneLoader.ImportMesh("spaceship", "Scenes/SpaceDek/", "SpaceDek.babylon", scene, function (newMeshes, particleSystems) {
});

Эта функция предназначена для импорта сеток (с их материалами и системами частиц) из одной сцены в другую. Он принимает следующие параметры:

  • имя объекта (если этот параметр не указан, все объекты импортируются)
  • папка сцены (может быть пустой, чтобы использовать ту же папку, что и ваша страница)
  • имя файла сцены
  • ссылка на целевую сцену
  • обратный вызов, чтобы получить список импортированных сеток и систем частиц

Играя со своей сценой

Результат, как и ожидалось: оранжевая плоскость, освещенная точечным источником света с плавающей сферой, с использованием текстуры RGBA для ее рассеянного цвета. Вы можете использовать мышь и клавиши курсора для перемещения:

Для предварительного просмотра IE11 вы также можете напрямую попробовать результат здесь: http://www.babylonjs.com/tutorials/blogs/loadScene/loadscene.html

Полный исходный код также доступен здесь:
http://www.babylonjs.com/tutorials/blogs/loadScene/loadScene.zip

Наслаждайтесь!

Другие главы

Если вы хотите углубиться в babylon.js, вот несколько полезных ссылок:

85
Share: