Как кодировать маркер дополненной реальности

Sep 14, 2025

Инструкции

Страница 1 из 2:

Страница 1

Страница 1
Страница 2

Дополненная реальность на некоторое время существует вокруг, но при поддержке WEBRTC (коммуникация в реальном времени) возможно для пользователей на устройств Android и Desktop для доступа к камере телефона.

В настоящее время iOS не может поддерживать это, так как оно не было реализовано в браузере WebKit, которая включает в себя Safari, но он в разработке, и вы можете проверить статус здесь Отказ Если у вас есть устройство iOS, вам не нужно пропустить, как вы все равно можете использовать веб-камеру на вашем настольном компьютере.

Примечание: Чтобы получить эту работу над мобильным браузером Chrome, содержимое должно обслуживаться безопасным слоем сокета (то есть через https, а не стандартные http). Рабочий стол в настоящее время работает с регулярными http, хотя.

Чтобы загрузить файлы, которые вам нужны для этого учебника, перейдите к FilesiLo. Выберите бесплатные вещи и бесплатный контент рядом с руководством.

В этом руководстве я собираюсь показать вам, как разместить маркер дополненной реальности перед камерой телефона. Это будет поднято браузером и Ar.js. И контент будет сопоставлен на вершину в 3D, придерживаясь маркера AR.

Есть много возможных применений для этой техники. Например, вы можете создать простое 3D творческое резюме , а затем маркер AR может быть напечатан на вашей визитной карточке. Поскольку вы можете ходить по маркеру, это здорово для содержания, что вы можете увидеть из разных углов - подумайте о определенной шведской мебели, предоставляя вам анимированные шаги, которые можно просмотреть с любого угла! Есть так много возможностей, которые это может быть полезно.

01. Добавьте библиотеки

Start by linking up your project libraries — Начните, связывая свои библиотеки проекта

Как только вы скачал файлы учебников Перейдите в папку «Проект», откройте папку «Пуск» в редакторе кода, а затем откройте index.html. Файл для редактирования. На этом этапе библиотеки должны быть связаны - и для этого проекта довольно много! Библиотеки находятся в трех разделах: Three.js, jsartoolkit и расширение Three.js для Artoolkit и Marker.

 & lt; скрипт 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 = "Vendor / jsartoolkit5 / js / artoolkit.api.js" & gt; / lt; / script & gt;
& lt; script src = "Trix-Artoolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "threx-artoolkitcontext.js" & gt; & lt; / script & gt;
& lt; скрипт src = "threx-armarkercontrols.js" & gt; & lt; / script & gt;
& lt; script & gt; threx.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Позаботьтесь о стиле CSS

в голова Раздел страницы, добавьте некоторые скрипт Теги и падение в правилах стиля для тело и то холст элемент. Это гарантирует, что они установлены правильно на странице без портировки по умолчанию, добавленной браузером.

 Тело {
  маржа: 0px;
  Переполнение: скрыто;
}
холст {
  Должность: абсолютный;
  Вершина: 0;
  Слева: 0;
}

03. Добавить глобальные переменные

в тело Раздел страницы, добавьте некоторые скрипт Теги, где пройдет оставшийся код JavaScript для этого руководства. Существует несколько переменных, необходимых: первая строка предназначена для трех.js, вторая для AR.JS, третий для модели, а затем переменной для загрузки модели.

 var redener, сцена, камера;
var artoolkitcontext, onrenderfcts, artoolkitsource, markerroot, artoolkitmarker, lasttimemsec;
модель var, tube1, tube2, mid, детали, импульс;
VAR Loader = New Three.colladaloader ();

04. Загрузите модель

Перед настройкой сцены будет загружена модель, так что она может отображаться, когда обнаружены маркеры. Это масштабируется на 10, чтобы точно соответствовать маркеру AR. Модель составляет 10см для ширины и высоты, поэтому маркер 1см, который переводит на 1 приращение в три.

loader.load ('model / case.dae', Функция (Collada) {
  модель = коллада .scene;
  Model.Scale.x = Model.Scale.y = model.scale.z = 0,1;
  подробности = model.getobjectbyname («Детали», правда);

05. Исправить некоторые проблемы с отображением

Тем не менее внутри загрузки загрузки коллада, как только модель будет загружена, будет пара трубок, которые вращаются, чтобы они были найдены в сцене коллады. Первая трубка найдена, и его материал схвачен. Здесь материал установлен, чтобы просто рендер на внутренней стороне модели, а не снаружи.

 TUBE1 = Model.getObjectByname («TUBE1», TRUE);
var a = tube1.children  .material;
A.TransParent = True;
А.Ссайса = три [«задняя сторона»];
A.Blending = три [«добавка»];
A.Opacity = 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.Children  .material;
C.TransParent = True;
C.йдь = три [«обратная сторона»];
C.Blending = три [«присещение»];
C.Opacity = 0,9;

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

Последняя модель - это прядильный круг только в середине дизайна. Это следует тем же правилам, что и раньше, но не отображает заднюю часть объекта, просто спереди. Непрозрачность каждого из этих материалов было установлено на 90%, чтобы сделать его немного мягче. После того, как модель загружается функция init.

 mid = model.getobjectbyname («середина», правда);
  B = Mid.Children  .material;
  b.transparent = true;
  B.Blending = три [«присещение»];
 B.Opacity = 0,9;
  в этом();
});

08. Инициализируйте сцену

Функция init устанавливается и внутри здесь создаются настройки рендерера. Рендерер использует WebGL, чтобы дать максимальную скорость рендера к содержимому, и фоновое альфа-значение устанавливается на прозрачный, так что изображение камеры можно увидеть за этим.

 Функция init () {
  Renderer = New Three.webglrenderer ({{
  Альфа: правда
  });
  Renderer.SetClearColor (New Three.Color («LightGrey»), 0);
  renderer.setsize (window.innerwidth, window.innerheight);
  Document.body.appendChild (Renderer.domelement);

09. Создайте отображение сцены

Рендерер должен быть одинаковым размером, что и окно браузера и добавляется к модели объекта документа страницы. Теперь создается пустой массив, который будет хранить объекты, которые должны быть отображены. Новая сцена создана так, чтобы содержимое можно было отобразить внутри этого.

 onrenderfcts = [];
сцена = новые три.scene ();

10. Свет

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

Experiment with the lighting colours to give some different tints — Экспериментировать с цветами освещения, чтобы дать некоторые разные оттенки

 var ambient = new three.ambientlight (0x666666);
Case.add (Ambient);
var pirellight = new trey.directionallight (0x4e5ba0);
PITELLAGES.POSION.SET (-1, 1, 1) .NOMALIZE ();
Scene.Add (Направленность);

Далее: Завершите свой маркер AR Marker

Текущая страница: Страница 1

Следующая Страница Страница 2

Как кодировать маркер дополненной реальности

01. Добавьте библиотеки

02. Позаботьтесь о стиле CSS

03. Добавить глобальные переменные

04. Загрузите модель

05. Исправить некоторые проблемы с отображением

06. Повторите исправление

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

08. Инициализируйте сцену

09. Создайте отображение сцены

10. Свет

Инструкции - Самые популярные статьи

Как использовать ссылочные изображения: 13 существенных советов для художников

Как создать сверкающие глаза в масляной краске

21 способов оптимизировать ваши CSS и ускорить свой сайт

Руководство по веб-инструментам Google

Создание меню выстреливания

Как удалить фон в Photoshop

Создание потрясающих пейзажей в Гудини

Как передавать звук в живописи

Категории