1. 首页
  2. 网站建设
  3. 正文

如何为沉浸式网站建设做好准备?

  我们所知道的网站很快就会发生变化。文本、图像和 2D 浏览器窗口中的基本交互的时代已经很好地为我们服务,但虚拟、增强和混合现实体验一直在变得更好。开发人员和设计人员需要超越浏览器窗口进行思考,并为沉浸式未来做好准备。

  许多人过去一直对 VR 和 AR 持怀疑态度,因为尽管对它们将实现的目标做出了宏伟的承诺,但它们大多未能达到行业所希望的规模。

  但这次不同:Meta、Apple 和 Microsoft 等行业领导者正在追求一系列不同的混合现实项目;他们看到了机会,并对接下来的事情提出了暗示。

  在Perkins Coie LLP 和 XR 协会的 一项调查中,近十分之九的受访者表示,到 2025 年,沉浸式技术(包括增强现实、虚拟现实和混合现实)将像移动设备一样无处不在。

  这是一个大胆的预测,但这可能是我们的新现实。

  实例

  VR 和 AR 并不适合每个网站,这很好。没有必要将身临其境的体验强加于更适合标准观看体验的东西。

  但是,如果做得好,3D 体验可以为您的网站增加很多。查看来自 Mozilla的演示体验、来自 Matterport的3D 导览以及来自 Within的沉浸式故事讲述。

  以下是这些技术闪耀的几个领域:

  零售– VR 可用于提供虚拟陈列室,供客户浏览产品。AR 甚至可以通过向您展示一件家具如何适合您的房间、一幅画在您的墙上的样子,或者类似Apple的场景展现,产品在您的办公桌上的样子,从而将产品带入您的家中。

  新闻– 通过提供 360 度视图并将观众置于故事的中心,可以丰富事件的报道。

  培训——AR 可以在物理设备上生成虚拟叠加层,因此员工可以进行更有效的实践培训。

  定义您的平台

  将沉浸式体验添加到您的网站将需要根据您尝试创建的内容的各种技能。无论您是 Web 开发的新手还是具有多年经验的资深开发人员,与经典 Web 开发的主要区别在于您正在从 2D 体验切换到 3D 体验。VR/AR 中的开发更接近于开发 3D 视频游戏,而不是创建 Web 应用程序。

  首先,您需要决定要构建的硬件。您的观众主要使用电脑、智能手机还是像 Oculus Quest 这样的耳机?每个硬件类别都提供了一组不同的功能。

  接下来,当我们查看市场上的3D引擎和框架时,Unity、Unreal Engine和CRYENGINE等一些大牌脱颖而出。这些引擎中的大多数都从游戏开发中分离出来,并基于 C、C++ 或 C# 等编程语言。虽然非常强大,但对于任何试图创建基本的沉浸式网络体验的人来说,它们都是过分的。

  对于 Web 开发人员来说,好消息是WebXR 设备 API是 W3C 指定的开放标准,带有 JavaScript API,可以在浏览器中实现身临其境的体验。因此,如果您已经具备 Web 开发背景,则可以利用您的 JavaScript 知识开始。

  有一些有用的框架和平台可以让使用 WebXR 更加方便:

  A-Frame– 用于构建 3D 体验的 Web 框架。

  React 360 – 用于创建在 Web 浏览器中运行的交互式 360 度体验的框架。顾名思义,它建立在 React 之上,并重用了您已经知道的概念。

  Amazon Sumerian – 一项托管服务,可让您创建和运行 3D、AR 和 VR 应用程序。由于它已集成到 AWS 生态系统中,因此还可以将支持 AI 的元素添加到您生成的世界中。

  创建您的内容

  没有人想阅读 3D 长文本块。既然我们在谈论视觉体验,那么重点应该放在创造赏心悦目的内容上,这是合乎逻辑的。在普通网站上工作的内容在 3D 环境中可能不会感觉自然,因此您需要决定应该创建哪些视觉效果以适应格式。

  您需要哪些高分辨率图像和资产?可以加视频吗?360度视频怎么样?观众只是在看东西,还是能够与之互动?

  您也不能忘记声音,因为它是沉浸式体验的关键部分。你应该创造什么样的音乐和声音来让内容生动起来?

  并非每个人都会拥有最新最好的设备或 5G 覆盖范围。3D 内容对带宽和传输质量的要求要高得多。在典型的网站上,几毫秒的延迟可能不会被注意到,但在 VR/AR 设置中,它会使体验滞后或无法使用。

  尝试优化您的内容,使其在合理的文件大小内达到最高质量。如果体验开始受到同时下载过多资产的影响,最好创建更流畅的体验,同时保持高性能。

  考虑您的托管基础设施也很重要。这应该不是什么大问题,但值得一提的是,您需要在配置中添加新的内容类型,并且您的 CDN 也需要支持这些新类型。

  使您的内容灵活

  当我们谈论让您的网站为沉浸式体验做好准备时,我们不仅仅是在谈论让人们在 VR 中滚动浏览您的常规网站。这对你的观众来说没有吸引力。

  我们的想法是将您网站上已有的一些内容与表示层分开,以便您可以在 3D 环境或任何其他您想要的平台中使用它。经典的内容管理在孤岛中进行,这意味着您无法轻松地重复使用网站中的内容。

  这种分离可以通过使用经典数据库来实现,但如果您希望开发人员和内容团队协作,需要对用户更友好的CMS的支持。

  今天开始尝试

  构建 3D 内容体验可能看起来令人生畏,但正如我们所见,您可能已经具备开始和尝试一些不同想法所需的 Web 开发技能。

  您今天构建的内容将为您明天的 3D 未来做好准备。

    延伸阅读

  • 小程序名字修改的技巧规则

    我们都知道名字的意义,名称作为陌生人最先的认知,在物质喧嚣的时代,如何从众多名称中脱颖而出给陌人生留下一个良好且深刻的印象,这至关重要。随着小程序开发越来越多,运营者在给小程序...

  • 小程序商城怎么运营?

    小程序商城在当今电商领域日益受到瞩目,成功运营这样一个平台对于每个经营者而言都至关重要。那么,我们该如何着手呢?一、确立品牌方向首先,我们要清晰地定义自己的品牌在市场中的位置。...

  • 自建商城运营秘籍,吸引顾客有妙招!

    新建网站的运营与维护之道一、明确核心产品的市场定位要让新建的商城网站在竞争激烈的市场中脱颖而出,关键在于精准地定位核心产品。选择具有市场潜力的热销产品,并突出其独特之处,是吸引...

  • 小程序商城推广完全指南

    随着小程序商城的日益兴起,如何在竞争激烈的市场中脱颖而出成为了关键。小程序商城的推广方式多种多样,以下是一些有效的策略:1.公众号与小程序的结合:商家可以将小程序与公众号绑定,...

  • 推广引流方法有哪些,裂变营销什么意思

    推广引流方法有哪些,裂变营销什么意思除了各公域平台,另一个比较重要的引流场景,就是在微信中。一方面做信社交性强,对于身边用友的链接更紧密,微信上也会以群、公众号的形式聚集一群有...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/1666.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();