Початок роботи з WebVR

Sep 11, 2025

Як

Перейти до:

WebVR ресурси

WebVR - API JavaScript для створення досвіду віртуальної реальності в браузері. Це вимагає низької затримки, високу частоту кадру та відмінну продуктивність. Його мета - полегшити будь-кого, щоб хтось потрапив у досвід VR, знижуючи бар'єри для в'їзду.

WebGL дозволяє розробникам створювати багаті, якісні досвідом консолі, які рендериться в режимі реального часу на мобільних пристроях та браузерах настільних ПК (просто переконайтеся, що ви отримаєте веб хостинг право на оптимальну здатність). Майже універсальний браузер та підтримка пристрою робить його ідеальним підходом для веб-розробників, які хочуть створити неймовірний досвід VR. Тут ми покажемо, як почати роботу з WebVR. У нижній частині цієї статті ви знайдете деякі корисні ресурси для подальших знань.

У нашому підручнику ми будемо використовувати WEBVR у поєднанні з три.js - Перейти до вибору багатьох Інструменти для веб-дизайну Доступно для 3D та VR в Інтернеті. Це безкоштовне та відкрите джерело, легкі, і незліченні нагородами веб-сайти використовують його. Крім того, що має фон JavaScript, ви можете зануритися в цей навчальний посібник без попереднього знання та створення першого досвіду WebVR. Мета цього підручника полягає в тому, щоб ви розпочати вас, щоб продовжити, щоб продовжувати вивчати цю дуже захоплюючу технологію. Хочете щось простіше? Спробуйте Веб-будівельник .

Завантажте файли для цього підручника з файлів

01. Включити прапор Webvr в Chrome

WebVR залишається експериментальною технологією і вимагає HTTPS для запуску на вашому сервері. Він не буде працювати на мобільних пристроях без a polyfill.github.com/imtersive-web/webvr-polyfill . Однак ви можете запустити вміст локально в Chrome для тестування та будівництва. Не забудьте увімкнути прапор Webvr Chrome. Тип Chrome: // Прапори / Enable-webvr У ваш браузер URL-адреси, а потім натисніть Увімкнути, щоб активувати його. Вам може знадобитися перезапустити Chrome.

02. Встановіть плагін емуляції WEBVR API

Для того, щоб перевірити локально на робочому столі та уникати необхідності пристрою, є чудовий плагін, який ви можете використовувати на Chrome за допомогою ClickToreLease. Плагін буде наслідувати a VR гарнітура для вас і дозволяйте вам рухатися і поворот гарнітури практично ( Отримати його тут ).

03. Відкрийте панель інструментів пристроїв у інструментах розробника

Device toolbar within dev tools — Це імітує мобільний пристрій або гарнітуру

Щоб наслідувати мобільний пристрій або гарнітуру, це найкраще працює для використання емуляції пристрою в інструментах Chrome. Відкрийте інструменти розробника в Chrome, і перемикайте на панелі інструментів пристрою, щоб переглянути перегляд мобільного телефону, обертайте до пейзажу та виберіть улюблений емуляцію телефону.

04. Створіть основний HTML-файл

Далі потрібно налаштувати основний HTML-файл. Ви можете налаштувати зовнішні файли CSS та JavaScript або включити вбудований для простоти. Клас Ringer Three.JS створить & lt; canvas & gt; елемент для вас. Додайте наступний код index.html Файл:

 & lt; html lang = "en" & gt;
& lt; head & gt;
& lt; title & gt; webvr demo & lt; / title & gt;
& lt; meta charset = "utf-8" & gt;
& lt; meta name = "viewport" content =
"Ширина = ширина пристрою, початкова шкала =
1.0, користувальницький масштабований = ні "& gt;
& lt; стиль & gt;
html, тіло {margin: 0; підкладка: 0;
переповнення: приховані; }
& lt; / стиль & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; сценарій & gt;
// Код поїде тут
& lt; / script & gt;
& lt; / body & gt;

05. Включіть свої класи

Включіть посилання на бібліотеку Three.js у головці вашого файлу - або розміщена зовнішньо, або завантажте його з 3.jss сховища. Вам також знадобиться новий клас вебVR та клас BoxLineGeometry для цього підручника. Ви можете знайти бібліотеку та підтримку класів тут . Примітка: код цього підручника був протестований на останньому випуску трьох.JS V99.

 & lt; script src = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; script src = "libs / webvr.js" & gt; & lt; / script & gt;
& lt; script src = "libs / boxlinegoometry.js" & gt;
& lt; / script & gt;

06. Додати глобальні змінні

Між позначками сценарію для коду додайте наступні глобальні змінні до глобального доступу до камери, сцени, надає, об'єктів та Raycaster. Також додайте Ударити Змінна для відстеження об'єктів, що перетинаються поглядом камери. Це буде продемонструвати, як знати, який користувач дивиться у VR.

 Var Clock = New Three.Clock ();
Var Container, камера, сцена, рендери, кімната,
перехрестя, хіт;
var об'єктів = []; // Колекція об'єктів
var num = 100; // Кількість об'єктів
var raycaster = новий three.raycaster ();

07. Створіть 3D-сцену

Ви збираєтеся додати основну 3D-сцену, яка буде контейнером для ваших об'єктів. Сцена - це етап, який буде надавати камеру. Всі 3D-презентації матимуть сцену або етап деякої форми. Що на цьому етапі і з урахуванням камери є те, що побачить користувач. Додайте наступний код, щоб додати сцену:

 // Створіть об'єкт сцени
var scene = нові три.scene ();

08. Додайте перспективну камеру

Далі потрібно додати камеру. Ви будете використовувати перспективну камеру, призначену для 3D-сцен. Перший атрибут - це поле зору камери. Другий - це співвідношення сторін ( ширина висота ). Тоді ви можете вказати близьку відсікуючу площину, а також далеко відрізають відстані, які визначають, що потрібно видно камеру.

 // Створити камеру
Камера = нові три.ПерспективаКамера
(70, вікно.innerwidth / window.innerheight,
0,1, 1000);
scene.add (камера);

09. Додайте елемент рендеритера та полотна

Renderer обробляє малюнок об'єктів у вашій сцені, видимі до камери. Встановіть властивість AntiAlias для True, щоб отримати гладкі краю на об'єкті. Renderer створює a дефект , що насправді є HTML & lt; canvas & gt; елемент. Потім можна додати до тіла. Зверніть увагу на використання нового прапора VR-дозволеного Renderer.

 Renderer = Новий Three.webglrrender (
{antialias: true});
renderer.setpixelratio (вікно.
devicepixelratio);
renderer.setsize (вікно.innerwidth, вікно.
InnoReight);
renderer.vr.enabled = true;
document.body.appendchild (Renderer.

10. Додайте камеру Crosshair

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

 Crosshair = Нова три.mesh (
Нові три.ringbuffergeometry (0,02, 0,04, 32),
Нові три.meshbasicmaterial ({{
Колір: 0xffffff,
непрозорість: 0,5,
прозорий: правда
})
);
crosshair.position.z = - 2;
camera.add (Crosshair);

11. Створіть об'єкт VR приміщення (необов'язково)

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

 кімната = нові три.
Нова три.BoxlineGoometry (6, 6, 6, 10, 10, 10),
Новий Three.LINEBASICMATERIAL ({COLOR:
0x808080});
room.position.y = 2;
scene.add (кімната);

12. Додайте світло до сцени

Щоб запалити сцену, ми будемо використовувати просте світло півкулі та спрямоване світло. Це буде приємна видимість навколишнього середовища та деяке реалістичне затінення від єдиного джерела світла.

 SCENE.ADD (новий Three.hemiSpherelight
(0x806060, 0x404040);
var light = нові три.
(0xffffff);
light.position.set (1, 1, 1). Нормативний ();
scene.add (світло);

13. Створіть деякі об'єкти

Ви збираєтеся заповнити кімнату предметами далі. Застосовувати їх випадково навколо кімнати. Ви також встановите обертання та масштаб випадково для різноманітності. Ви можете додати трохи більше коду на наступному кроці, де він говорить Створіть атрибути орбіти Щоб увімкнути деякі митні орбітичні шляхи.

 Var Geometry = Нова три.boxbuffergeometry
(0,15, 0,15, 0,15);
для (i = 0; i & lt; = num; i ++) {
var матеріал = новий три.meshlambertmaterial
({color: math.random () * 0xffffff});
var object = нові три.mesh
(геометрія, матеріал);
object.position.set (Math.Random () * 4.0
- 2.0, Math.Random () * 4.0 - 2.0, математика.
випадкові () * 4.0 - 2.0);
object.scale.set (math.random () +. 5, математика.
випадкові () +. 5, математична () +. 5);
alber.rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, математика.
випадковий () * 2 * math.pi);
// Створення атрибутів орбіти}

14. Додайте атрибути орбіти до об'єктів

Щоб дозволити деяким приємним випадковим рухом орбіти, і зберегти об'єкти з "втечі в приміщенні", ми призначимо деякий початковий кут даних (у радіанах) та відстані. Це дозволяє простий спосіб анімувати об'єкти в петлі рендерингу після.

// Створюйте атрибути орбіти
// Відстань калькуляції як постійна і призначають
об'єкт
var a = новий три.Vector3 (0, 0, 0);
var b = об'єкт.position;
var d = a.distanceto (b);
object.distance = d;
albold.radians = math.random () * 360 * математика.
Pi / 180; // Повний кут
albold.radians2 = math.random () * 360 * математика.
Pi / 180; // Повний кут
albold.radians3 = math.random () * 360 * математика.
Pi / 180; // Повний кут
room.add (об'єкт);
об'єкти.push (об'єкт);

15. Додайте обробник розміру розміру вікна

Як ми перевіряємо наш додаток WebVR, ми будемо змінювати розмір екрана, переміщуючи його навколо, тощо. Це гарна ідея, щоб мати обробник, який налаштовує розміри області рендерингу та оновлює речі, щоб правильно заповнити екран і добре виглядає.

 вікно. Аддевентлістенер ("змінити розмір",
onwindowresize, false);
Функція onwindowresize () {
camera.aspect = вікно.innerwidth / вікно.
внутрішньоутробний;
camera.updateproectionMatrix ();
renderer.setsize (window.innerwidth,
вікно.
}

16. Створіть кнопку WebVR

Зображення 1 з 2

Зображення 2 з 2

New Webvr Class Three.jss містить кнопку Webvr, яка обробляє для нас, що перебуває в режимі та поза режимом VR. Він також обробляє, якщо пристрій не підтримує режим VR. Ви можете включити його за допомогою цього простого коду:

 // three.js webvr кнопка для входу /
Вихід VR режим
document.body.appendchild (webvr.createButton
(Renderer));

17. Запустіть петлю анімації VR

Як правило, ви використовуєте requestanimationframe Для обробки петлі рендерингу, але в VR ви повинні використовувати інший обробник петлі, щоб забезпечити, щоб все було готово відтворити, і що ви уникаєте латентності та випусків. Замість цього використовуйте нове сетутанімаціяLoop і пройти у вашій функції рендерингу.

 // Запустіть Loop VR Анімація
renderer.setanimationLoop (рендеринг);

18. Створіть функцію рендерингу

Далі створіть функцію рендерингу. Якщо ви не хотіли анімувати свої об'єкти або тест для перехресного тестування з об'єктами, ви можете просто використовувати наступний код:

 Функція рендерингу () {
// Знайти перехрестя
// Анімація об'єктів
// відтворити сцену
renderer.render (сцена, камера);
}

19. Тест на перехрестя

Щоб увімкнути тестування для об'єктів, що перетинаються промінь, простежується від камери у простір Z, додайте наступний код до вашої рендеричної петлі, де ви прокоментували його на останньому кроці:

 raycaster.setfromcamera ({x: 0, y: 0},
камера);
var перетинаються = raycaster.intersectobjects
(кімната. Діти);
якщо (перетинається. Догляд & gt; 0) {
якщо (хіт! = перетинається  .об'єкт) {
якщо (хіт) {hit.material.emissive.
sethex (hit.currenthex); }
Хіт = перетинає  .об'єкт;
Hit.currenthex = hit.material.emissive.
gethex ();
Hit.material.emissive.sethex (0x00ff00);
}
} else {
якщо (хіт) {hit.material.emissive.sethex
(Хіт.currenthex); }
Хіт = невизначений;
}

20. Анімація об'єктів уздовж орбіт

Далі ви можете анімувати свої об'єкти вздовж своїх орбіти, використовуючи цей код:

 для (i = 0; i & lt; = num; i ++) {
var o = об'єкти [i];
o.rotation.y + =. 01;
if (i% 2 == 0) {
O.Radians + =. 004;
o.radians2 + =. 005;
o.radians3 + =. 008;
} else {
o.radians - =. 006;
o.radians2 - =. 005;
o.radians3 - =. 003;
}
o.position.x = (math.cos (o.radians) *
o.distance);
o.position.z = (math.sin (o.radians3) *
o.distance);
o.position.y = (math.sin (o.radians2) *
O.Distance * .5);
}

21. надайте сцену WebVR

Нарешті, ви можете виділити свою сцену за допомогою функцій придатності. Якщо ви вже не додали цю лінію, це зараз. Після того, як ви додали це, ви можете протестувати все це, і він повинен переглядати набір сцени вебVR у вашому браузері. Ви також можете перевірити його на своєму мобільному пристрої або на гарнітурі VR.

 // відтворити сцену
renderer.render (сцена, камера);

WebVR ресурси

Початок роботи в WEBVR може бути переважним. Ми зібрали деякі приклади сайтів, використовуючи WEBVR та ресурси, щоб допомогти вам отримати прокат.

Ескіз
Ви, напевно, вже знаєте цей сайт через свою дивовижну галерею активів, але він також має режим WebVR, який дозволяє переміщатися в VR.

А-кадр
Це рок-міцна рамка для АР і ВР. Він обробляє болю загуків та підтримку пристрою, включаючи, дозволяючи вам надавати вам у вашому браузері для тестування. Це навіть абстрагує створення звичайних 3D-об'єктів.

Три.js
Ця бібліотека має численні приклади З вихідним кодом, щоб допомогти вам піти з WebVR. Це ідеальна відправна точка.

Базікання
Оскільки WEBVR є технологією, що виникає, це гарна ідея, щоб продовжувати новітні розробки. Ви повинні знати, які пристрої підтримуються та за яких умов. Цей сайт допоможе вам залишатися в курсі. Є Сторінка, присвячена прикладам теж.

І це завжди допомагає мати право хмара зберігання теж.

Ця стаття була опублікована у випуску 283 журналу Creative Web Design Веб-дизайнер . Купити проблему 283 або підписатися .

Читати далі:

7 bonkers vr trends heading ваш шлях
Початок роботи з Redux Thunk
11 Гарячі веб-тенденції прямо зараз

Початок роботи з WebVR

01. Включити прапор Webvr в Chrome

02. Встановіть плагін емуляції WEBVR API

03. Відкрийте панель інструментів пристроїв у інструментах розробника

04. Створіть основний HTML-файл

05. Включіть свої класи

06. Додати глобальні змінні

07. Створіть 3D-сцену

08. Додайте перспективну камеру

09. Додайте елемент рендеритера та полотна

10. Додайте камеру Crosshair

11. Створіть об'єкт VR приміщення (необов'язково)

12. Додайте світло до сцени

13. Створіть деякі об'єкти

14. Додайте атрибути орбіти до об'єктів

15. Додайте обробник розміру розміру вікна

16. Створіть кнопку WebVR

17. Запустіть петлю анімації VR

18. Створіть функцію рендерингу

19. Тест на перехрестя

20. Анімація об'єктів уздовж орбіт

21. надайте сцену WebVR

WebVR ресурси

Як - Найпопулярніші статті

Крита Підручники: Дізнайтеся основи програмного забезпечення цифрового мистецтва

Початок роботи з артражем

8 Золоті правила мобільного дизайну

Початок роботи з платформою Greenensock

Як використовувати Adobe Capture CC

Як побудувати повний веб-сайт в кутовій

Як освоїти 3D-фан-арт

Як назвати агентство веб-дизайну

Категорії