我(wǒ)(wǒ)們所知(zhī)道的網站很快就會發生(shēng)變化。文本、圖像和 2D 浏覽器窗口中(zhōng)的基本交互的時代已經很好地爲我(wǒ)(wǒ)們服務，但虛拟、增強和混合現實體(tǐ)驗一(yī)直在變得更好。開(kāi)發人員(yuán)和設計人員(yuán)需要超越浏覽器窗口進行思考，并爲沉浸式未來做好準備。

許多人過去(qù)一(yī)直對 VR 和 AR 持懷疑态度，因爲盡管對它們将實現的目标做出了宏偉的承諾，但它們大(dà)多未能達到行業所希望的規模。

但這次不同：Meta、Apple 和 Microsoft 等行業領導者正在追求一(yī)系列不同的混合現實項目；他們看到了機會，并對接下(xià)來的事情提出了暗示。

在Perkins Coie LLP 和 XR 協會的 一(yī)項調查中(zhōng)，近十分(fēn)之九的受訪者表示，到 2025 年，沉浸式技術（包括增強現實、虛拟現實和混合現實）将像移動設備一(yī)樣無處不在。

這是一(yī)個大(dà)膽的預測，但這可能是我(wǒ)(wǒ)們的新現實。

實例

VR 和 AR 并不适合每個網站，這很好。沒有必要将身臨其境的體(tǐ)驗強加于更适合标準觀看體(tǐ)驗的東西。

但是，如果做得好，3D 體(tǐ)驗可以爲您的網站增加很多。查看來自 Mozilla的演示體(tǐ)驗、來自 Matterport的3D 導覽以及來自 Within的沉浸式故事講述。

以下(xià)是這些技術閃耀的幾個領域：

零售– VR 可用于提供虛拟陳列室，供客戶浏覽産品。AR 甚至可以通過向您展示一(yī)件家具如何适合您的房間、一(yī)幅畫在您的牆上的樣子，或者類似Apple的場景展現，産品在您的辦公桌上的樣子，從而将産品帶入您的家中(zhōng)。

新聞– 通過提供 360 度視圖并将觀衆置于故事的中(zhōng)心，可以豐富事件的報道。

培訓——AR 可以在物(wù)理設備上生(shēng)成虛拟疊加層，因此員(yuán)工(gōng)可以進行更有效的實踐培訓。

定義您的平台

将沉浸式體(tǐ)驗添加到您的網站将需要根據您嘗試創建的内容的各種技能。無論您是 Web 開(kāi)發的新手還是具有多年經驗的資(zī)深開(kāi)發人員(yuán)，與經典 Web 開(kāi)發的主要區别在于您正在從 2D 體(tǐ)驗切換到 3D 體(tǐ)驗。VR/AR 中(zhōng)的開(kāi)發更接近于開(kāi)發 3D 視頻(pín)遊戲，而不是創建 Web 應用程序。

首先，您需要決定要構建的硬件。您的觀衆主要使用電(diàn)腦、智能手機還是像 Oculus Quest 這樣的耳機？每個硬件類别都提供了一(yī)組不同的功能。

接下(xià)來，當我(wǒ)(wǒ)們查看市場上的3D引擎和框架時，Unity、Unreal Engine和CRYENGINE等一(yī)些大(dà)牌脫穎而出。這些引擎中(zhōng)的大(dà)多數都從遊戲開(kāi)發中(zhōng)分(fēn)離(lí)出來，并基于 C、C++ 或 C# 等編程語言。雖然非常強大(dà)，但對于任何試圖創建基本的沉浸式網絡體(tǐ)驗的人來說，它們都是過分(fēn)的。

對于 Web 開(kāi)發人員(yuán)來說，好消息是WebXR 設備 API是 W3C 指定的開(kāi)放(fàng)标準，帶有 JavaScript API，可以在浏覽器中(zhōng)實現身臨其境的體(tǐ)驗。因此，如果您已經具備 Web 開(kāi)發背景，則可以利用您的 JavaScript 知(zhī)識開(kāi)始。

有一(yī)些有用的框架和平台可以讓使用 WebXR 更加方便：

A-Frame– 用于構建 3D 體(tǐ)驗的 Web 框架。

React 360  – 用于創建在 Web 浏覽器中(zhōng)運行的交互式 360 度體(tǐ)驗的框架。顧名思義，它建立在 React 之上，并重用了您已經知(zhī)道的概念。

Amazon Sumerian  – 一(yī)項托管服務，可讓您創建和運行 3D、AR 和 VR 應用程序。由于它已集成到 AWS 生(shēng)态系統中(zhōng)，因此還可以将支持 AI 的元素添加到您生(shēng)成的世界中(zhōng)。

創建您的内容

沒有人想閱讀 3D 長文本塊。既然我(wǒ)(wǒ)們在談論視覺體(tǐ)驗，那麽重點應該放(fàng)在創造賞心悅目的内容上，這是合乎邏輯的。在普通網站上工(gōng)作的内容在 3D 環境中(zhōng)可能不會感覺自然，因此您需要決定應該創建哪些視覺效果以适應格式。

您需要哪些高分(fēn)辨率圖像和資(zī)産？可以加視頻(pín)嗎(ma)？360度視頻(pín)怎麽樣？觀衆隻是在看東西，還是能夠與之互動？

您也不能忘記聲音，因爲它是沉浸式體(tǐ)驗的關鍵部分(fēn)。你應該創造什麽樣的音樂和聲音來讓内容生(shēng)動起來？

并非每個人都會擁有最新最好的設備或 5G 覆蓋範圍。3D 内容對帶寬和傳輸質量的要求要高得多。在典型的網站上，幾毫秒的延遲可能不會被注意到，但在 VR/AR 設置中(zhōng)，它會使體(tǐ)驗滞後或無法使用。

嘗試優化您的内容，使其在合理的文件大(dà)小(xiǎo)内達到最高質量。如果體(tǐ)驗開(kāi)始受到同時下(xià)載過多資(zī)産的影響，最好創建更流暢的體(tǐ)驗，同時保持高性能。

考慮您的托管基礎設施也很重要。這應該不是什麽大(dà)問題，但值得一(yī)提的是，您需要在配置中(zhōng)添加新的内容類型，并且您的 CDN 也需要支持這些新類型。

使您的内容靈活

當我(wǒ)(wǒ)們談論讓您的網站爲沉浸式體(tǐ)驗做好準備時，我(wǒ)(wǒ)們不僅僅是在談論讓人們在 VR 中(zhōng)滾動浏覽您的常規網站。這對你的觀衆來說沒有吸引力。

我(wǒ)(wǒ)們的想法是将您網站上已有的一(yī)些内容與表示層分(fēn)開(kāi)，以便您可以在 3D 環境或任何其他您想要的平台中(zhōng)使用它。經典的内容管理在孤島中(zhōng)進行，這意味着您無法輕松地重複使用網站中(zhōng)的内容。

這種分(fēn)離(lí)可以通過使用經典數據庫來實現，但如果您希望開(kāi)發人員(yuán)和内容團隊協作，需要對用戶更友好的CMS的支持。

今天開(kāi)始嘗試

構建 3D 内容體(tǐ)驗可能看起來令人生(shēng)畏，但正如我(wǒ)(wǒ)們所見，您可能已經具備開(kāi)始和嘗試一(yī)些不同想法所需的 Web 開(kāi)發技能。

您今天構建的内容将爲您明天的 3D 未來做好準備。