每個 Web 應用程式中的 3D

mstmahmuda11121

許多開發人員熟悉使用 Angular 和其他單頁應用程式 (SPA) 框架的 Web 應用程式。越來越多的經典業務應用程式正在被基於 Web 的變體擴充甚至取代。人們通常會發現，新的變體絲毫不遜於經典的解決方案——甚至經常出現這樣的情況：使用同一個解決方案可以接觸到更多的用戶。 到目前為止，人們通常認為將應用程式的現有 3D、虛擬實境或擴增實境元件傳輸到網路過於複雜或不可能。像Babylon.js這樣的引擎使這個過程變得更加容易。如今，3D 內容可以透過眾所周知的程式語言、技術和流程用於網路。 在本文中，我將展示如何結合使用 Babylon.js 和 Angular 來擴充具有 3D 內容的商業應用程式。 注意：所有程式碼都可以在此 GitHub 儲存庫和Stackblitz 中找到。

自訂 3D 內容 讓我們從一個簡單的 3D 場景開始。為此，我們依賴「Web 開發人 沙烏地阿拉伯 電話號碼 員圖形引擎簡介」一文的結果。那裡解釋了我們創建這樣一個場景所需的最重要和必要的關鍵數據和基礎知識。 Babylon.js 使用的 Playground 的配置與通常的 Angular 專案略有不同。調整取決於我們；只需幾個步驟即可解決任務。 匯出並下載 Playground 範例 選擇 Babylon.js 安裝 將 JavaScript 轉換為 TypeScript 出口再簡單不過了。為此，我們只需選擇下載並將其解壓縮到所需的目錄中。然後，所有使用的資源都會被移動，並且index.html中的腳本會儲存在 Angular 專案中自己的 TypeScript 檔案中。




現在 Babylon.js 本身已安裝在專案中。 @babylonjs作用域包最適合此目的。除了模組化和可讀性之外，這還有一定程度的安全性的優點。只有適當註冊的用戶才能在 @babylonjs 範圍下發佈軟體包 - 這消除了安裝過程中一半的拼寫錯誤，並且也可以安裝其他軟體包而無需再次驗證來源。  安裝所有軟體包後，我們開始輸入現有代碼。如果我們直接提取函數並在場景中很好地建立所有內容，這是最簡單的。 為此，我們擴展預設的 Babylon.js 場景並添加我們自己的啟動程式碼。這會在場景中建立並放置所有基本元件 - 實際定義位置和時間與用例密切相關；可能必須選擇更好地服務於不同目的的替代方案。在此範例中，一切都是按順序啟動的，並在第一次渲染場景之前稍後執行。