Як код збільшеного маркера реальності

Feb 2, 2026

Як

Page 1 з 2:

Сторінка 1

Сторінка 1
Сторінка 2

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

В даний час iOS не може підтримувати це, оскільки він не був реалізований у веб-переглядачі WebKit, який сил Safari, але він у розробці, і ви можете перевірити статус тут . Якщо у вас є пристрій iOS, вам не доведеться пропустити, оскільки ви все ще можете використовувати веб-камеру на робочому столі.

Примітка: Щоб отримати це, працює на веб-переглядачі мобільного Chrome, вміст повинен бути поданий безпечним гніздовим шаром (TE.E. над HTTPS, а не стандартним HTTP). На робочому столі працює з звичайним http.

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

У цьому підручнику я покажу вам, як розмістити маркер розширеного реальності перед камерою телефону. Це буде піднято браузером і Ar.js , а вміст буде відображатися над вершиною 3D, дотримуючись маркера AR.

Для цієї техніки існує безліч можливих використання. Наприклад, ви можете створити простий 3D Творче резюме , а потім маркер AR може бути надрукований на вашій візитній картці. Оскільки ви можете ходити по маркеру, це чудово підходить для вмісту, який ви можете побачити з різних кутів - подумайте про певний шведський виробник меблів, який дає вам анімаційні кроки, які можна переглянути з будь-якого кута! Є так багато можливостей, щоб це може бути корисним для.

01. Додайте бібліотеки

Start by linking up your project libraries — Почніть з зв'язування бібліотек проекту

Як тільки ви завантажили підручники Перейдіть до папки проекту, відкрийте папку "Пуск" у своєму редакторі коду, а потім відкрийте index.html файл для редагування. На цьому етапі бібліотеки повинні бути пов'язані з ними - і для цього проекту є досить багато! Бібліотеки знаходяться у трьох розділах: три.js, jsartoolkit, а також тривимірні розширення для artoolkit та маркера.

 & lt; script src = 'js / three.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "продавець / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; script src = "продавець / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script & gt;
& lt; script src = "threex-artoolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "threex-artoolkitcontext.js" & gt; & lt; / script & gt;
& lt; script src = "threex-ararkercontrols.js" & gt; & lt; / script & gt;
& lt; сценарій & gt; threex.artooolkitcontext.baseurl = '/' & lt; / script & gt;

02. Піклуйтеся про стиль CSS

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

 Тіло {
  маржа: 0px;
  переповнення: приховані;
}
полотно {
  Позиція: абсолютна;
  Верх: 0;
  ліворуч: 0;
}

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

В тіло розділ сторінки, додати деякі сценарій Теги, де залишився код JavaScript для цього підручника. Існує декілька змінних: перша лінія для трьох.JS, друга для AR.JS, третє для моделі, а потім змінну для завантаження моделі.

 Var Renderer, сцена, камери;
var artoolkitcontext, onrenderfcts, artoolkitsource, markerroot, artoolkitmarker, lasttimemsec;
var модель, tube1, tube2, середина, деталі, пульс;
var loader = новий three.colladaloader ();

04. Завантажте модель

Перед створенням сцени модель буде завантажена, щоб вона була відображена, коли виявляються маркери. Це зменшується на 10, щоб відповідати точно на маркер AR. Модель становить 10 см для ширини та висоти, тому маркер 1см, який переводить до 1 приріст до трьох.js.

loader.load ('модель / scene.dae', функція (Collada) {
  модель = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0.1;
  деталі = модель.getobjectbyname ("Деталі", true);

05. Виправити деякі проблеми відображення

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

 tube1 = model.getobjectyname ("tube1", true);
var a = трубка1. Дитячі  .матеріал;
a.transparent = true;
a.side = три ["backside"];
a.blending = три ["добавки"];
А.Опічність = 0,9;

06. Повторіть виправлення

If the transparency and additive blending is not enabled, the model looks like this when loaded and displayed on top of the AR marker – not very exciting and barely visible! — Якщо прозорість та добавка не включена, модель виглядає так, коли вона завантажується та відображається на вершині маркера AR - не дуже захоплююче і ледве видно!

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

 tube2 = model.getobjectbyname ("tube2", true);
C = tube2. Дитячі . Матеріал;
C.Transparent = TRUE;
C.side = три ["backside"];
C.Blending = три ["добавки ,блиць"];
c.opacity = 0,9;

07. Остаточне виправлення

Остання модель - це обертальний круг лише в середині дизайну. Це слідує за тим самими правилами, як і раніше, але не робить задню частину об'єкта, просто фронт. Непрозорість кожного з цих матеріалів була встановлена до 90%, щоб зробити його трохи м'яким. Після завантаження моделі викликається функція init.

 Mid = model.getobjectbyname ("Середня", правда);
  b = mid.Children  .матеріал;
  b.transparent = true;
  b.blending = три ["добавки"];
 b.opacity = 0,9;
  в цьому();
});

08. Ініціалізувати сцену

Функція INIT встановлено, і всередині тут створюються налаштування Renderer. Renderer використовує WebGL, щоб дати найшвидшу швидкість рендерингу до вмісту, а основне значення альфа встановлюється для прозорості, щоб зображення камери можна побачити за цим.

 Функція init () {
  renderer = нові три.webglrrender ({{
  Альфа: Правда
  });
  renderer.setclearcolor (новий three.color ('lightgrey'), 0);
  renderer.setsize (window.innerwidth, window.innerheight);
  document.body.appendchild (renderer.monelement);

09. Створіть дисплей сцени

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

 onrenderfcts = [];
Сцена = Нові три.Ссені ();

10. Світло

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

Experiment with the lighting colours to give some different tints — Експериментувати з кольорами освітлення, щоб дати деякі різні відтінки

 Var ambient = Новий три. Амбієнтний (0x666666);
scene.add (Ambient);
var directionallight = нові три.
спрямованалет. Опозиція. Комплект (-1, 1, 1). Норматичні ();
scene.add (напрямоклет);

Далі: Завершіть ваш маркер AR

Поточна сторінка: Сторінка 1

Наступна сторінка Сторінка 2

Як код збільшеного маркера реальності

01. Додайте бібліотеки

02. Піклуйтеся про стиль CSS

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

04. Завантажте модель

05. Виправити деякі проблеми відображення

06. Повторіть виправлення

07. Остаточне виправлення

08. Ініціалізувати сцену

09. Створіть дисплей сцени

10. Світло

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

Як додати шрифти в Photoshop

Як вирішити складний дизайн короткий

Отримайте більше від графіту з цими порадами

Створити бог променів у V-Ray

Крок за кроком: Як імітувати масляну фарбу в Corel Painter

Зробіть свою програму Work Offline з працівниками служби

Як використовувати смарт-шари в Photoshop

Як малювати фотографію спорідненості для iPad

Категорії