在新潮電商怎麼玩 2018電商5大趨勢這篇文章提到AR技術從過去「發展中」的狀態到現在已變成一股新穎的潮流,電商也趁勢與其結合,創造出另類的消費者體驗,提高客戶對品牌的黏性。在2018的十大社群行銷趨勢,VR、AR、Chatbot…還有更多這篇文章提到社群媒體會想辦法找到能夠融入移動裝置AR、VR功能的技術。
在Web上也能快速製作出AR囉,先試試看這個例子,在電腦螢幕上開啟啟此標記,用手機開啟此網頁就會打開攝影鏡頭看到該標記上浮動的一個3D動畫,這個例子是來自於AR.js - Augmented Reality for the Web這篇文章,更進一步要了解此例的語法可參考AR.js - Augmented Reality in 10 Lines of HTML這篇文章。不然,也可以利用AR.js Studio平台創建AR應用程式(操作如此影片),然後將AR.js Studio產生的程式上傳到Netlify平台就能執行囉(以手機開啟),更進一步改成偵測所在位置呈現就參考這個範例(參見程式碼)。
AR.js可以做成什麼樣的應用呢? 讓我們來看看...
- 結合地圖的應用:
Maps in Augmented Reality with JavaScript
Mapbox GL JS + AR.js + A-Frame (VR) = Mapbox AR/VR - 博物館的虛擬展示:
The PortARble Museum: Developing Augmented Reality For The Web Using AR.Js - 校園導覽:
The Herberger Experience – AR Campus Tour - 卡片應用:
世界最速、ARで「令和」発表を再現(デモあり) - 手繪輔助:
Read on to see how we developed a mobile app to help you draw (or tattoo) - 超酷的「任意門」:
先看這些影片: Portals AR.js、Portal View Effect with AR.js、Portal door with A-Frame 360 using AR.js。
也想要自己試試看嗎? 這裡有個用手機開啟範例程式(用手機開啟此範例全畫面模式),另外用一台平板或手機開啟此標記,並平放在桌面上,要讓標記入鏡在手持的那台手機攝影鏡頭範圍內,就能看到該標記上浮動的一個任意門。
至於VR,先試試看這個例子,在Create a 360° VR Supported Web Experience in Under Five Minutes這篇文章有介紹其原始碼,自己也可以試著用其他圖片改寫看看(jsfiddle, jsbin)。更進一步要了解可參考A-FRAME - 360° Image及此例的語法。