Цей проект буде розділено на різні частини. Ми дамо короткий вступ до Heroku, показати, як використовувати Physijs з Three.js, пояснити, як обробляти події розетки над Node.js, а також як ми продовжуємо обробляти надсилання даних.
20 дивовижні приклади WebGL в дії
01. Героку
Heroku - це простий у використанні та безкоштовний веб-сервер пробного вузла
Цей проект буде розміщено
Героку
, яка є хмарною платформою для розміщення ваших програм. Він має широкий спектр підтримуваних мов, таких як Ruby, Java, PHP та Python. Ми збираємося використовувати Node.js.
Зареєструйтеся для облікового запису та виберіть "Вул". Для цього проекту ми можемо використовувати основний сервер, який є безкоштовним. Після реєстрації ви прийдете на інформаційну панель, де ви можете створити додаток. Це створить субдомен на Herokuapp.com.
Як метод розгортання, ви можете скористатися або використовувати інтерфейс командного рядка Heroku (CLI), щоб розгорнути за допомогою свого сховища Git, або мати підключення до GitHub або Dropbox. Я вирішив піти з його CLI; Це вимагатиме встановлення. Але в обмін ви отримуєте різноманітні нові корисні інструменти, один з них - це пряме налагодження через ваш термінал.
Для налаштування сервера я рекомендую за кроками
Як описано тут
.
Для розгортання ви використовуєте команд за замовчуванням. Кожен, кого ви використовуєте, буде викликати сервер BUITURE, і ваша програма буде розгорнута до сервера Heroku, а потім переглядатись у своєму субдомен.
Після того, як код розгорнуто, ви можете переглянути ваш проект у [вашпроект] .herokuapp.com. Щоб переглянути журнали, використовуйте команду "Героку-журнали" у вашому терміналі. Деякі речі, які показують, - це те, що служить клієнту - він показує з'єднання розеток, і якщо ви хочете налагодити свій код, ви також можете використовувати консолі .LOG, щоб вивести до терміналу.
02. Побудуйте сцену фізики
Натисніть на екран або натисніть на пробіл, щоб відмовитися від столу
Ми будемо використовувати найпопулярніші
Webgl
рамки,
три.js
, побудувати 3D-сцену, яка містить об'єкт, на якому ми додаємо фізику. Фізична бібліотека вибору є
Фіг
, плагін для трьох.js. Як продовження до трьох.JS, Physijs використовує таку ж кодуючу конвенцію, що полегшує використання, якщо ви вже знайомі з трьома.
Перше - це стіл для басейну. Ми використовуємо фізій
Висота
, тому що ця сітка читає висоту від літака. Таким чином, це буде в основному обгортати навколо трьох.js об'єкта.
var stuggeometry = Нова три.PlaneGeometry (650, 500, 10, 10);
var tablematerial = physijs.creatematialial (
Нові три.meshphongmaterial ({{
Shineiness: 1,
Колір: 0xb00000,
Емісія: 0x11111,
сторона: три. самостір
}),
.8, // тертя
.4 // Реституція
);
таблиця = new physjijs.heightfieldmeshes (настільна, таблиця, 0);
Тому
Висота
вимагає геометрії, але і матеріалу фізійного матеріалу. Ми додаємо дві нові функції до матеріалу Three.js. Це
тертя
і
реституція
змінні. Тертя - це опір, який робить об'єкт, а реституція відноситься до "боунасті". Ці два змінні визначають, як реальна фізика буде відчувати себе на вашій сцені.
Для створених басейнів ми не хочемо робити їх теж bouncy, тому зберігайте низький номер. Як і три.JS, Physijs також має серію основних форм, щоб йти навколо оригінальної сітки.
Сфера
обгортання
Сфераметрія
дасть фізику м'яч. При ініціалізації сцени ми називаємо
buildball (8)
, що спричиняє наступну функцію ...
var buildball = функція (numberball) {
var balltexture = нова три.Texture ();
var ballindex = ball.leength;
ballmaterial.map.wraps = ballmaterial.map.wrapt = три.
ballmaterial.map.repeat.set (1, 1);
Створіть сфери, що дозволяють фізиці, і почати його в повітрі:
м'яч [ballindex] = new physijs.shheremesh (
Нова три.Сптеріометрія (25, 25, 25),
кульматеріальний,
100
);
// компенсація до верхньої частини полотна
м'яч [ballindex] .position.y = 500;
// тіні
м'яч [ballindex] .receiveshadow = true;
м'яч [ballindex] .castshadow = true;
// додати м'яч до полотна
scene.add (м'яч [ballindex]);
};
Ми додаємо текстуру з файлу .jpg. Створити матеріал і використовувати це для
Сфера
Щоб створити об'єкт, який ми розмістимо вертикально до вершини, щоб він знизиться на екран.
03. З'єднання розетки
Основною метою нашої гри є наслідком фізичних рухів на екран
Для зв'язку між сервером та клієнтом ми будемо використовувати
socket.io
. Це одна з найбільш надійних бібліотек, доступних для Node.js. Він побудований на вершині WebSOCKETS API.
Тепер фізика ввімкнено для сітків, які нам потрібні введення користувача, щоб зробити інтерактивну гру. Вхідний пристрій, який ми використовуємо, - це мобільний пристрій. Мобільний браузер - це контролер, який забезпечить дані
від акселерометра та гіроскопа
на робочий стіл, де ви побачите гру.
По-перше, потрібно зробити зв'язок між мобільним браузером та браузером робочого столу. Кожного разу, коли браузер з'єднується з нашим додатком Node.JS, нам потрібно зробити нове з'єднання. З'єднання клієнта встановлюється за допомогою наступного:
var socket = io.Connect ();
Для надсилання повідомлень, які ви використовуєте
випускати
Функція:
socket.emit ("Назва подій", дані);
І для отримання ви використовуєте
.on ()
Функція:
Socket.on ("Назва подій", функція () {});
03.1. Налаштування настільної гри
Якщо ми знаходимося на робочому столі, ми надішлемо наші розетки пристрою, що випускаємо, що наш сервер настільний комп'ютер - це гра, використовуючи наступний рядок коду:
var socket = io.connect ();
// Коли початкове повідомлення, Відповісти типу пристрою "Гра"
socket.on ("Ласкаво просимо", функція (дані) {
socket.emit ("Пристрій", {"тип": "гра"});
});
Сервер поверне нам унікальний ключ / код гри
генерується крипто
. Це буде відображатися на робочому столі.
// генерувати код
var gamecode = crypto.randombytes (3) .tostring ('hex'). Підкладка (0, 4) .tolowercase ();
// забезпечити унікальність
в той час як (Gamecode у гніздах) {
GameCode = crypto.randombytes (3) .tostring ('hex'). Підкладка (0, 4) .tolowerase ();
}
// магазин ігровий код - & gt; розетка
Сокетки [Gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = gamecode
Скажіть клієнту Game до ініціалізації та показати ігровий код користувача ...
сокет.Еміт ("ініціалізація", gamecode);
03.2. Підключіть контролер до гри
Щоб підключити мобільний пристрій до гри, ми будемо використовувати форму, щоб подати код гри з екрана настільного ПК. На формі відправте ми надішлемо код гри на сервер для автентифікації.
Сервер перевірить, чи правильний ігровий код і створить з'єднання з робочою гру
Якщо (пристрій.gamecode у гніздах) {
// зберегти код гри для команд контролера
socket.gamecode = device.gamecode
// Ініціалізувати контролер
socket.emit ("підключений", {});
// запустіть гру
розетки [device.gamecode] .emit ("підключений", {});
}
Після того, як підключення буде встановлено, ми тоді дамо 8-м'яч невеликий поштовх з x і z з наступною командою ...
м'яч .
04. Надсилання даних
Тепер, коли підключення встановлюється, ми хочемо надіслати змінні Gyro та акселерометра до гри. За допомогою
вікно .ondevicemotion
і
вікно .ondeviceorientation
Події, у нас є дані, які нам потрібно, щоб наслідувати те, що рухи нахилу нашого телефону до таблиці басейну. Я вирішив використовувати інтервал 100 мс, щоб виділити ці значення.
На стороні клієнта ми вирішимо затримку за допомогою tweening вхідних значень від сервера до нахилу таблиці пулу. Для tweening ми використовуємо
Tweenmax
.
// Ручка Вхідні дані Gyro
socket.on ('new gyro', функція (дані) {
var degy = дані
Більше м'ячів дорівнює більш веселощів. Спробуйте натиснути пробіл або натиснувши екран вашого мобільного телефону
Щоб дати йому трохи більше інтерактивності, я додав пару додаткових подій для користувача, щоб грати. Ми збираємося користувачеві можливість додати додаткові кулі поруч із 8-балом, використовуючи цифри на клавіатурі.
Інший - відмовитися від столу вгору. Для цього ви можете вдарити пробіл. Але ми також додаємо подію TAP на пристрої контролера. Це надішле подію в стіл біля басейну, який підніме таблицю та відправляє кулі.
Спочатку нам потрібно ловити подіями клавіатури ...
// Створити кульки / Сламський стіл на пробіл
document.addeventlistener ('keydown', функція (e) {
if (e.Keycode == 49) {// Ключ: 1
buildball (1);
} Ще, якщо (e.Keycode == 50) {// Ключ: 1
buildball (2);
} Ще, якщо (e.Keycode == 51) {// Ключ: 1
buildball (3);
} Ще, якщо (e.Keycode == 32) {// Ключ: пробіл
bouncetable ();
}
});
Точний
будівельний
Функція є такою ж функцією, яку ми використовували для створення Sphere 8-Ball. Ми просто використовуємо різні текстури, які будуть обертати сфери. Для того, щоб штовхати стіл, ми даємо таблицю вгору руху вздовж вісь Y за допомогою цього коду ...
таблиця.
Висновок
Додайте більше м'ячів і подивіться, скільки ваш браузер може обробляти
Коли у вас є концепція гри або що-небудь ще, цілком імовірно, що там є бібліотеки, які могли б полегшити ваше життя. Це демо, яка показує, як це може працювати. Ми сподіваємось, що це допоможе іскритися деякі творчі ідеї або допомогти вам у поточному проекті. Побачити живий приклад гри
тут
або знайти його
Гуляк
.
Ця стаття була опублікована у випуску 300 з
сітка
, найвищий журнал світу для професійних веб-дизайнерів та розробників.
Купити проблему 300
або
Підписатися тут
.
Пов'язані статті:
Початок роботи з WebGL за допомогою трьох.js
20 інструментів JavaScript, щоб роздути свій розум
Створіть інтерактивні 3D-візуальні матеріали з трьома.JS
