使用 JavaScript 構建增強現實 (AR) Web 應用程式

增強現實 (AR) 徹底改變了我們與數字內容互動的方式，將虛擬世界與現實世界無縫融合。它已在各個領域得到應用，包括遊戲、教育、電子商務和工業培訓。AR 提供身臨其境且互動性強的體驗，增強使用者參與度併為企業和開發人員開闢新的可能性。隨著 Web 技術的進步，現在可以使用 JavaScript 直接在瀏覽器中建立 AR 體驗，使其能夠被更廣泛的受眾訪問。在本文中，我們將探討使用 JavaScript 構建 AR Web 應用程式的過程，以及程式碼示例和詳細說明。

設定開發環境

要開始構建 AR Web 應用程式，我們需要設定我們的開發環境。JavaScript 作為一種多功能的程式語言，被廣泛用於 Web 開發。它允許開發人員為使用者建立互動且動態的體驗。您將需要一個文字編輯器或整合開發環境 (IDE) 來編寫您的 JavaScript 程式碼。選擇一個適合您偏好的編輯器，並提供語法高亮和程式碼建議等功能。

除了文字編輯器/IDE 之外，您還需要一個 Web 瀏覽器來執行和測試您的 AR Web 應用程式。大多數現代瀏覽器（如 Chrome、Firefox 和 Safari）都支援 AR 所需的技術，包括 WebGL 和 WebRTC。確保您使用的是更新版本的瀏覽器，以確保與最新的 Web 標準相容。

要開始，請按照以下步驟操作 -

  • 安裝您選擇的文字編輯器或 IDE（例如，Visual Studio Code、Sublime Text 或 Atom）。

  • 為您的專案建立一個新目錄。

  • 在您選擇的文字編輯器/IDE 中開啟該目錄。

  • 在專案目錄中建立一個 HTML 檔案（例如，index.html）和一個 JavaScript 檔案（例如，app.js）。

將 AR.js 新增到您的專案中

AR.js 是一個流行的 JavaScript 庫，它簡化了在瀏覽器中建立 AR 體驗的過程。它提供了一套方便的工具和功能，可以將 AR 功能整合到您的 Web 應用程式中。要將 AR.js 包含到您的專案中，您有兩個選擇：直接下載庫或利用內容分發網路 (CDN)。為簡單起見，我們將使用 CDN 方法，它允許我們輕鬆地從遠端伺服器訪問庫。

要在您的專案中使用 AR.js，您可以從官方網站（https://ar-js-org.github.io/AR.js-Docs/）下載庫，也可以透過內容分發網路 (CDN) 包含它。為簡單起見，讓我們使用 CDN 方法 -

  • 在您的文字編輯器/IDE 中開啟您的 index.html 檔案。

  • 將以下指令碼標籤新增到 HTML 檔案的頭部部分。

<script src="https://cdn.jsdelivr.net/npm/ar.js@2.3.0/build/ar.js"></script>

透過使用指令碼標籤在 HTML 檔案中包含 AR.js 庫，您可以訪問其廣泛的功能。AR.js 利用計算機視覺演算法來識別和跟蹤標記，這些標記充當 AR 內容的錨點。這些標記可以是列印的圖案或 AR 應用程式透過裝置攝像頭識別的物理物件。

建立 AR 場景

設定了 AR.js 庫後，我們現在可以建立一個基本的 AR 場景。在本例中，我們將在標記上渲染 3D 模型。標記是 AR.js 識別的預定義圖案，允許我們將數字內容疊加到現實世界中。

在您的 index.html 檔案中，新增以下標記以建立空場景 -

<body>
   <a-scene embedded arjs>
      <a-marker preset="hiro">
         <a-entity
            position="0 0 0"
            scale="0.05 0.05 0.05"
            gltf-model="./path/to/your/model.gltf"
         ></a-entity>
      </a-marker>
      <a-camera-static></a-camera-static>
   </a-scene>
</body>

將“./path/to/your/model.gltf”替換為您 3D 模型檔案的實際路徑。

理解程式碼

讓我們分解我們剛剛新增的程式碼並瞭解其用途 -

  • <a-scene> − 此元素表示 AR 場景，幷包含所有與 AR 相關的內容。

  • <a-marker> − 此元素定義將渲染 3D 模型的標記。在本例中，我們使用“hiro”標記預設，但您可以探索其他預設，甚至建立您自己的標記。

  • <a-entity> − 此元素表示 3D 模型。調整 position 和 scale 屬性以定位和調整模型大小。

  • <a-camera-static> − 此元素定義用於檢視 AR 場景的攝像頭。

測試 AR 應用程式

現在我們已經設定了基本的 AR 場景，讓我們在 Web 瀏覽器中測試我們的應用程式 -

  • 儲存您在 index.html 中的更改，並在 Web 瀏覽器中開啟該檔案。

  • 出現提示時，允許瀏覽器訪問您的網路攝像頭。

  • 將網路攝像頭對準“hiro”標記，您應該會看到 3D 模型在其上渲染。

擴充套件 AR 應用程式

我們到目前為止介紹的示例表示一個帶有靜態 3D 模型的簡單 AR 場景。但是，AR.js 提供了一系列功能和可能性來增強您的 AR 應用程式。

讓我們探索一些進一步擴充套件 AR 應用程式的想法 -

我們到目前為止介紹的示例表示一個帶有靜態 3D 模型的簡單 AR 場景。但是，AR.js 提供了一系列功能和可能性來增強您的 AR 應用程式。讓我們探索一些進一步擴充套件 AR 應用程式的想法 -

  • 互動性 − 透過新增事件偵聽器來檢測使用者互動（如點選或手勢）來使您的 AR 元素具有互動性。您可以觸發動畫、顯示其他資訊或允許使用者操縱 AR 內容。

  • 動態內容 − 您可以根據使用者輸入或外部資料來源動態載入模型或影像，而不是靜態 3D 模型。這允許更具動態性和個性化的 AR 體驗。

  • 基於位置的 AR − 利用使用者的地理位置建立基於位置的 AR 體驗，其中 AR 內容與特定的現實世界位置相關聯。使用者可以探索周圍環境並發現與其物理位置相關的 AR 內容。

  • 多標記 AR − 透過新增多個標記來擴充套件您的 AR 場景，每個標記都會觸發不同的 AR 元素或互動。這為建立具有多個互動式元素的複雜且身臨其境的 AR 體驗提供了可能性。

  • 與 API 整合 − 將您的 AR 應用程式與外部 API 連線以獲取即時資料或合併其他功能。例如，您可以從電子商務 API 獲取產品資訊，並在檢測到相應的標記時將其顯示為 AR 內容。

結論

在本文中，我們探討了使用 JavaScript 構建增強現實 (AR) Web 應用程式的過程。我們討論了 AR 在各個領域的意義以及它透過 Web 技術帶來的可訪問性。我們設定了開發環境，將 AR.js 庫新增到我們的專案中，並在標記上建立了一個顯示 3D 模型的基本 AR 場景。我們還探討了透過互動性、動態內容、基於位置的功能、多標記功能和 API 整合來擴充套件 AR 應用程式的潛力。

更新於: 2023-07-24

703 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告