Jak kodować znacznik rzeczywistości rozszerzonej

Sep 16, 2025

Jak

Strona 1 z 2:

Strona 1

Strona 1
Strona 2

Augmented Reality ma teraz na chwilę, ale dzięki wsparciu WebRTC (komunikacja w czasie rzeczywistym) jest możliwe dla urządzeń z systemem Android i Desktop, aby uzyskać dostęp do aparatu telefonu.

Obecnie IOS nie może obsługiwać tego, ponieważ nie została zaimplementowana w przeglądarce WebKit, która mocuje Safari, ale jest w rozwoju i możesz sprawdzić status tutaj . Jeśli masz urządzenie IOS, nie musisz przegapić, ponieważ nadal można korzystać z kamery internetowej na komputerze stacjonarnym.

Uwaga: Aby uzyskać tę pracę na przeglądarce mobilnej Chrome, treść musi być obsługiwana przez bezpieczną warstwę gniazda (tj. Ponad HTTPS, a nie standardowy http). Desktop działa obecnie z regularnym HTTP.

Aby pobrać pliki potrzebne do tego samouczka, przejdź do Filesilo. , Wybierz darmowe rzeczy i bezpłatne treści obok samouczka.

W tym samouczku pokażę ci, jak umieścić znacznik rozszerzonej rzeczywistości przed kamerą telefonu. Zostanie to odebrane przez przeglądarkę i Ar.js. a zawartość zostanie odwzorowana na górze w 3D, przyklejając się do markera AR.

W tej technice jest wiele możliwych zastosowań. Na przykład możesz stworzyć prosty 3d Creative CV , a potem marker AR może zostać wydrukowany na swojej wizytówce. Ponieważ możesz chodzić po markerze, jest to świetne dla treści, które możesz zobaczyć z różnych kątów - pomyśl o pewnych szwedzkich producentowi mebli, podając ci animowane kroki, które można oglądać z dowolnego kąta! Jest tak wiele możliwości, dla których może być przydatne.

01. Dodaj biblioteki

Start by linking up your project libraries — Zacznij od łączenia bibliotek projektu

Raz Pobrano pliki samouczka Przejdź do folderu projektu, otwórz folder Start w edytorze kodu, a następnie otwórz index.html. Plik do edycji. Na tym etapie biblioteki muszą być połączone - i jest sporo dla tego projektu! Biblioteki znajdują się w trzech sekcjach: Three.js, Jsartoolkit i przedłużenie trzech.js dla Artoolkit i markera.

 Skrypt SRC = 'JS / Three.js' & GT; & LT; / Script & GT;
& lt; skrypt SRC = "JS / Colladaloader.js" & GT; & LT; / Script & GT;
& lt; skrypt src = "dostawca / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt;
& lt; script src = "sprzedawca / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt;
& LT; Script SRC = "Threex-Artoolkitsource.js" & GT; & LT; / Script & GT;
& LT; Script SRC = "THEX-ArtoolkitContext.js" & GT; & LT; / Script & GT;
& lt; script src = "trzyx-armarkontrols.js" & gt; & lt; / script & gt;
& LT; Script & GT; ThreeX.ArtoolkitContext.baseurl = '/' / LT; / Script & GT;

02. Zadbaj o stylizacji CSS

w głowa Sekcja strony, dodaj trochę scenariusz Tagi i spadek zasad stylu dla ciało i brezentowy element. Zapewnia to, że są umieszczone poprawnie na stronie bez domyślnych marginesów dodanych przez przeglądarkę.

 Ciało {
  Margines: 0px;
  Przepełnienie: Ukryte;
}
płótno {
  pozycja: absolutna;
  Top: 0;
  Po lewej: 0;
}

03. Dodaj zmienne globalne

w ciało Sekcja strony, dodaj trochę scenariusz Tagi, w których pozostały kod JavaScript dla tego samouczka pójdzie. Istnieje wiele potrzebnych zmiennych: pierwsza linia jest dla trzech.js, druga dla Ar.js, trzeci dla modelu, a następnie zmienna do załadowania modelu.

 Var Renderer, scena, aparat;
var ArtuoolkitContext, OnRenderfcts, ArtoolkiKitsource, markerroot, Artuoolkitmarker, Lasttimemsec;
Var Model, Tube1, Tube2, Mid, Szczegóły, Puls;
Var Loader = Nowy Three.Colladaloader ();

04. Załaduj model

Przed ustawieniem sceny model zostanie załadowany, aby można go było wyświetlić, gdy wykryte są znaczniki. Jest to skalowane o 10, aby dopasować dokładnie do markera AR. Model jest 10 cm dla szerokości i wysokości, więc znacznik jest 1 cm, który przekłada się na 1 przyrost w trzech.js.

Loader.load ("Model / scene.dae", funkcja (Collada) {
  Model = Collada.Scene;
  model.scale.x = model.scale.y = model.scale.Z = 0,1;
  Szczegóły = model.getObjectByName ("szczegóły", true);

05. Napraw kilka problemów wyświetlanych

Wciąż wewnątrz kodu ładowania Collada, po załadowaniu modelu będzie kilka rur, które obracają się wokół, więc znajdują się na scenie Collady. Pierwsza rura zostanie znaleziona, a jego materiał jest chwycony. Tutaj materiał jest ustawiony na wnętrze modelu, a nie na zewnątrz.

 Tube1 = model.getObjectByName ("Tube1", True);
var a = tube1.children  .material;
a.transparent = true;
a.side = trzy ["tyłek"];
A.Bling = trzy ["addytywność"];
A.optyzmy = 0,9;

06. Powtórz poprawkę

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! — Jeśli przejrzystość i mieszanie dodatku nie jest włączone, model wygląda tak, gdy jest ładowany i wyświetlany na szczycie markera AR - niezbyt ekscytujące i ledwo widoczne!

Podobnie jak w ostatnim etapie, ta sama zasada jest powtarzana dla drugiej rury, a tryb mieszania, podobny do tych, które znajdują się po efektach i Photoshopa, jest ustawiona jako mieszanka dodatku. Umożliwia to na zewnątrz pikseli, aby mieć bardziej miękkie przejście do obrazu kamery.

 Tube2 = model.GetObjectByName ("Tube2", True);
C = Tube2.children  .Materiał;
c.transparent = true;
C.side = trzy ["tył"];
C.Bling = trzy ["AddicitySbling"];
c.opity = 0,9;

07. Final Fix.

Ostatnim modelem jest krąg spinningowy w samym środku projektu. Wynika to z tych samych zasad, jak poprzednio, ale nie powoduje tyłu obiektu, tylko front. Kryjka każdego z tych materiałów została ustawiona na 90%, aby uczynić ją nieco bardziej miękką. Po załadowaniu modelu jest nazywana funkcja init.

 Mid = model.getObjectByName ("Mid", True);
  b = mid.children  .material;
  b.transparent = true;
  b.Bling = trzy ["addytywność"];
 B.optyzmy = 0,9;
  w tym();
});

08. Zainicjuj scenę

Funkcja INIT jest ustawiona, a wewnątrz tutaj ustawienia renderowania są tworzone. Renderer używa Webgl, aby zapewnić najszybszą szybkość renderowania do treści, a wartość alfa jest ustawiona na przezroczystą, aby obraz kamery był widoczny za tym.

 Funkcja init () {
  Render = Nowy Three.Webglmrenderer ({
  Alpha: True.
  });
  render.SetClaRolor (nowy trzy.Color ("Lightgrey"), 0);
  render.setize (window.innerwidth, window.innerheight);
  Document.body.appendChild (Render.Darkement);

09. Utwórz wyświetlacz sceny

Renderer ma być taki sam rozmiar jak okno przeglądarki i dodane do modelu obiektu dokumentu strony. Teraz tworzony jest pusta tablica, która przechowuje obiekty, które muszą być renderowane. Nowa scena jest tworzona, aby zawartość była wyświetlana w tym wewnątrz.

 OnRenderfcts = [];
scena = nowy trzy.scene ();

10. Zapal go

Aby móc zobaczyć treści na scenie, podobnie jak w prawdziwym świecie, potrzebne są światła. Jedno jest otoczenia szare światło, podczas gdy światło kierunkowe jest wyciszony niebieski kolor, aby dać lekki odcień do treści 3D na wyświetlaczu na scenie.

Experiment with the lighting colours to give some different tints — Eksperymentuj z kolorami oświetleniowymi, aby dać różne odcienie

 Var Ambient = Nowy Three.ambienlight (0x666666);
scena.Add (otoczenia);
var directionallight = Nowy Three.directionalight (0x4E5BA0);
kierunkowskaz.position.set (-1, 1, 1) .Normalizacja ();
scena.add (kierunkowo);

Dalej: Zakończ swój marker AR

Bieżąca strona: Strona 1

Następna strona Strona 2

Jak kodować znacznik rzeczywistości rozszerzonej

01. Dodaj biblioteki

02. Zadbaj o stylizacji CSS

03. Dodaj zmienne globalne

04. Załaduj model

05. Napraw kilka problemów wyświetlanych

06. Powtórz poprawkę

07. Final Fix.

08. Zainicjuj scenę

09. Utwórz wyświetlacz sceny

10. Zapal go

Jak - Najpopularniejsze artykuły

Utwórz starego efektu anaglifów

Zbuduj układy adaptacyjne bez zapytań multimedialnych

Utwórz świecący Efekt tekstowy Neon

Zrób animacje pojazdu z ICLONONE 7

19 wskazówek dla Great Poser Art

Naucz się animować dla dzieci

Połącz umiejętności tradycyjne i cyfrowe, aby utworzyć pokrywę komiksową

Jak narysować Harley Quinn

Kategorie