Jesli do tej pory Augmented Reality kojarzyło Ci się z dedykowaną aplikacją mobilną lub z drogimi okularami Mixed Reality, to mamy dobra wiadomość – dzięki wsparciu dwóch popularnych rozszerzeń modeli 3D: .USDZ oraz .GLFT przez Apple i Google, możliwe jest wyświetlanie ich w technologi Rzeczywistości Rozszerzonej bez konieczności pobierania aplikacji mobilnej.

W tym poście dowiesz się jak łatwo i szybko dodać na własną strone internetową lub E-commerce technologię AR za pomocą kilku linii kodu. Zaczynamy!

<model-viewer> to stosunkowo nowy komponent sieciowy wprowadzony w lutym 2019 r., ale wsparcie dla AR pojawiło się dopiero w maju 2019.

UWAGA: Upewnij się, ze posiadasz najnowszą wersje Viewer’a: https://github.com/google/model-viewer

W tym krótkim samouczku dowiesz się, jak dodać AR do swojego produktu w zaledwie kilku krokach:

  1. Uwzględnij zależności do obsługi wszystkich przeglądarek:
<script type="module"
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

2. Dodaj <model-viewer> i możesz wyświetlić dowolny model 3D na swojej stronie internetowej.

<model-viewer src=”assets/RocketShip_1393.gltf” 
alt=”A 3D model of a rocket”>
</model-viewer>

3. Aby dodać przeglądarkę scen ARCore, po prostu dodaj atrybut ar :

<model-viewer src=”assets/RocketShip_1393.gltf” 
ar
alt=”A 3D model of a rocket”>
</model-viewer>

I gotowe!

Istnieje wiele innych opcji, które mogą być potrzebne do dalszego rozwoju, oto tylko kilka:

auto-rotate : Uruchamia obracanie się modelu

camera-controls: umożliwia użytkownikowi sterowanie modelem za pomocą dotyku lub kliknięcia

shadow-intensity: krycie cienia [0..1]. Wartość domyślna to 0.

ios-src: podaj lokalizację modelu .USDZ. Spowoduje to wyświetlenie podglądu modelu za pomocą AR Quick Look na urządzenia z systemem iOS 12+

autoplay: uruchamia pierwszą animację lub określoną animację w modelu

animation-name: wybiera animację według nazwy