Новости

Створення інтерактивного веб-додатки

  1. Створення нової програми
  2. Підготовка та експорт 3D-сцени
  3. Додавання функціоналу
  4. зміни

За допомогою движка Blend4Web можна створювати як прості, так і щодо складні, насичені інтерактивні веб-додатки. Розглянемо створення простого додатка з використанням API Blend4Web, в якому реалізуємо взаємодію з об'єктами 3D-сцени, наприклад, анімуючи об'єкт при виділенні його мишею.

Створення нової програми

Для створення нової програми слід скористатися менеджером проектів , Що входять до складу Blend4Web SDK. Для цього потрібно спочатку запустити Blender (з встановленим аддоном), а потім зайти на головну сторінку SDK за адресою http: // localhost: 6687 / . Там менеджер проектів буде доступний за відповідним посиланням:

Там менеджер проектів буде доступний за відповідним посиланням:

Далі слід вибрати Create New Project:

Далі слід вибрати Create New Project:

Далі потрібно буде вибрати ім'я нового проекту, наприклад, "simple_app". У разі, якщо раптом проект з такою назвою вже існує, буде запропоновано ввести інше ім'я. Також можна ввести відображається в браузері заголовок додатка, наприклад, "Interactive Web Application":

Також можна ввести відображається в браузері заголовок додатка, наприклад, Interactive Web Application:

Інші налаштування залишимо за замовчуванням. Після цього натиснемо кнопку Create Project внизу даної сторінки для створення додатка. Потім необхідно дочекатися завершення і натиснути Back to Projects:

Потім необхідно дочекатися завершення і натиснути Back to Projects:

Вона поверне нас на сторінку менеджера проектів, з якої можна відкрити новий додаток за посиланням:

Вона поверне нас на сторінку менеджера проектів, з якої можна відкрити новий додаток за посиланням:

В результаті ми побачимо базову сцену з простим кубиком:

В результаті ми побачимо базову сцену з простим кубиком:

Створене нами додаток розташоване всередині SDK шляхом ./projects/simple_app/. Тепер, коли каркас проекту готовий, можна приступати до створення 3D-сцени і написання логіки додатка.

Підготовка та експорт 3D-сцени

Blend-файл з базовою сценою знаходиться в директорії проекту: ./projects/simple_app/simple_app.blend. Відкриємо його в блендері і замість того, що є за умовчанням, створимо в ньому сцену з об'єктами, джерелом освітлення і камерою.

Відкриємо його в блендері і замість того, що є за умовчанням, створимо в ньому сцену з об'єктами, джерелом освітлення і камерою

Для кожного з "інтерактивних" об'єктів зробимо просту анімацію переміщення, повороту (в режимах XYZ Euler або Quaternion WXYZ) або масштабування.

Для кожного з інтерактивних об'єктів зробимо просту анімацію переміщення, повороту (в режимах 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] Оновлений текст статті.

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: