Новости
За допомогою движка Blend4Web можна створювати як прості, так і щодо складні, насичені інтерактивні веб-додатки. Розглянемо створення простого додатка з використанням API Blend4Web, в якому реалізуємо взаємодію з об'єктами 3D-сцени, наприклад, анімуючи об'єкт при виділенні його мишею.
Створення нової програми
Для створення нової програми слід скористатися менеджером проектів , Що входять до складу Blend4Web SDK. Для цього потрібно спочатку запустити Blender (з встановленим аддоном), а потім зайти на головну сторінку SDK за адресою http: // localhost: 6687 / . Там менеджер проектів буде доступний за відповідним посиланням:
Далі слід вибрати Create New Project:
Далі потрібно буде вибрати ім'я нового проекту, наприклад, "simple_app". У разі, якщо раптом проект з такою назвою вже існує, буде запропоновано ввести інше ім'я. Також можна ввести відображається в браузері заголовок додатка, наприклад, "Interactive Web Application":
Інші налаштування залишимо за замовчуванням. Після цього натиснемо кнопку Create Project внизу даної сторінки для створення додатка. Потім необхідно дочекатися завершення і натиснути Back to Projects:
Вона поверне нас на сторінку менеджера проектів, з якої можна відкрити новий додаток за посиланням:
В результаті ми побачимо базову сцену з простим кубиком:
Створене нами додаток розташоване всередині SDK шляхом ./projects/simple_app/. Тепер, коли каркас проекту готовий, можна приступати до створення 3D-сцени і написання логіки додатка.
Підготовка та експорт 3D-сцени
Blend-файл з базовою сценою знаходиться в директорії проекту: ./projects/simple_app/simple_app.blend. Відкриємо його в блендері і замість того, що є за умовчанням, створимо в ньому сцену з об'єктами, джерелом освітлення і камерою.
Для кожного з "інтерактивних" об'єктів зробимо просту анімацію переміщення, повороту (в режимах XYZ Euler або Quaternion WXYZ) або масштабування.
Також включимо їм опцію Selectable у вкладці Object-> Selection and Outlining. Це зробить об'єкти доступними для вибору при кліці по ним мишею.
Налаштувавши за смаком камеру, освітлення і матеріали об'єктів, експортуємо сцену через команду меню File -> Export -> Blend4Web (.json). Шлях експорту слід вказати таким: ./projects/simple_app/assets/simple_app.json.
Додавання функціоналу
В директорії проекту ./projects/simple_app/ в числі інших буде знаходитися головний JS-файл програми simple_app.js, що містить шаблонний код. У ньому і будемо реалізовувати просте взаємодія користувача з завантаженою сценою.
Для реалізації задуманого функціоналу нам знадобляться додаткові модулі:
- animation.js - надає API для управління анімацією об'єктів
- container.js - методи, що відносяться до Canvas-елементу і його батьківського HTML-елементу
- mouse.js - містить ряд корисних методів, що відносяться до миші
- scenes.js - API для доступу до об'єктів сцени
Додамо їх підключення на самому початку скрипта до решти модулів:
// import modules used by the app var m_app = require ( "app"); var m_cfg = require ( "config"); var m_data = require ( "data"); var m_preloader = require ( "preloader"); var m_ver = require ( "version"); var m_anim = require ( "animation"); var m_cont = require ( "container"); var m_mouse = require ( "mouse"); var m_scenes = require ( "scenes");
У нашому прикладі при натисканні на об'єкті повинна відтворюватися його анімація, також будемо і скасовувати анімацію у попереднього виділеного об'єкта. Для цього в кінець функції load_cb () додамо обробник події "mousedown" для натискань мишею по елементу Canvas. Також при необхідності можна додати обробник "touchstart" для натискань на сенсорному екрані:
function load_cb (data_id, success) {... var canvas_elem = m_cont.get_canvas (); canvas_elem.addEventListener ( "mousedown", main_canvas_click, false); canvas_elem.addEventListener ( "touchstart", main_canvas_click, false); }
Далі напишемо відповідну функцію-обробник main_canvas_click ():
function main_canvas_click (e) {if (e.preventDefault) e.preventDefault (); var x = m_mouse.get_coords_x (e); var y = m_mouse.get_coords_y (e); var obj = m_scenes.pick_object (x, y); if (obj) {if (_previous_selected_obj) {m_anim.stop (_previous_selected_obj); m_anim.set_frame (_previous_selected_obj, 0); } _Previous_selected_obj = obj; m_anim.apply_def (obj); m_anim.play (obj); }}
Основна логіка додатка міститься саме в ній. Алгоритм в загальних рисах буде наступним:
1) Отримання об'єкта сцени, який знаходився під курсором.
var x = m_mouse.get_coords_x (e); var y = m_mouse.get_coords_y (e); var obj = m_scenes.pick_object (x, y);
2) Скасування анімації у попереднього виділеного об'єкта.
Зупинка анімації:
m_anim.stop (_previous_selected_obj);
І виставлення нульового кадру, тобто повернення до початкового стану:
m_anim.set_frame (_previous_selected_obj, 0);
Для збереження попереднього об'єкта використана глобальна змінна _previous_selected_obj. Її потрібно оголосити де-небудь, наприклад, відразу після підключення модулів наступним чином:
var _previous_selected_obj = null;
3) Застосування анімації до об'єкта.
Завантаження і розрахунок анімації, призначеної на об'єкт в Blender'е:
Відтворення анімації:
Наведемо код отриманого додатки цілком:
"Use strict" // register the application module b4w.register ( "simple_app_main", function (exports, require) {// import modules used by the app var m_app = require ( "app"); var m_cfg = require ( "config "); var m_data = require (" data "); var m_preloader = require (" preloader "); var m_ver = require (" version "); var m_anim = require (" animation "); var m_cont = require (" container "); var m_mouse = require (" mouse "); var m_scenes = require (" scenes "); var _previous_selected_obj = null; // detect application mode var DEBUG = (m_ver.type () ==" DEBUG "); / / automatically detect assets path var APP_ASSETS_PATH = m_cfg.get_assets_path ( "simple_app"); / ** * export the method to initialize the app (called at the bottom of this file) * / exports.init = function () {m_app.init ({canvas_container_id: "main_canvas_container", callback: init_cb, show_fps: DEBUG, console_verbose: DEBUG, autoresize: true});} / ** * callback executed when the app is initialized * / function init_cb (canvas_ele m, success) {if (! success) {console.log ( "b4w init failure"); return; } M_preloader.create_preloader (); // ignore right-click on the canvas element canvas_elem.oncontextmenu = function (e) {e.preventDefault (); e.stopPropagation (); return false; }; load (); } / ** * load the scene data * / function load () {m_data.load (APP_ASSETS_PATH + "simple_app.json", load_cb, preloader_cb); } / ** * update the app's preloader * / function preloader_cb (percentage) {m_preloader.update_preloader (percentage); } / ** * callback executed when the scene data is loaded * / function load_cb (data_id, success) {if (! Success) {console.log ( "b4w load failure"); return; } M_app.enable_camera_controls (); // place your code here var canvas_elem = m_cont.get_canvas (); canvas_elem.addEventListener ( "mousedown", main_canvas_click, false); canvas_elem.addEventListener ( "touchstart", main_canvas_click, false); } Function main_canvas_click (e) {if (e.preventDefault) e.preventDefault (); var x = m_mouse.get_coords_x (e); var y = m_mouse.get_coords_y (e); var obj = m_scenes.pick_object (x, y); if (obj) {if (_previous_selected_obj) {m_anim.stop (_previous_selected_obj); m_anim.set_frame (_previous_selected_obj, 0); } _Previous_selected_obj = obj; m_anim.apply_def (obj); m_anim.play (obj); }}}); // import the app module and start the app by calling the init method b4w.require ( "simple_app_main") .init ();
Веб-додаток, розібране в статті, є простим, але в той же час інтерактивним. Це мінімальний приклад того, що дозволяє движок Blend4Web і його API.
Вихідні файли програми і сцени знаходяться в складі безкоштовного дистрибутива Blend4Web SDK по шляху ./projects/simple_app/.
Посилання на додаток у окремому вікні
зміни
[2014-05-08] Початкова публікація.
[2014-06-30] Уточнено текст про опції ініціалізації alpha.
[2014-07-07] Незначні редагування тексту про вихідні файлах програми.
[2014-07-22] Змінено шлях до програми.
[2014-08-06] Оновлений код прикладу через зміни API отримання об'єкта під курсором.
[2014-10-29] Оновлений текст статті через зміни API.
[2014-11-28] Правки тексту про вихідні файлах програми.
[2015-04-23] Правки тексту про вихідні файлах програми.
[2015-05-08] Оновлений текст статті через зміни API.
[2015-09-30] Невеликі зміни в статті.
[2015-10-02] Стаття переписана з урахуванням системи управління проектами.
[2017-01-12] Виправлені некоректні / биті посилання.
[2017-04-21] Оновлений текст статті.