VR 当今最流行的用途之一就是 360° 图像和视频。360° 图像易于在线发现和分享，而且您无需学习任何新的交互方式即可探索 360° 体验。

构建 360° 视图并不像探索它们那样容易，尤其是在您想要创建一种体验，让观看者可以在场景之间导航时。以下是我使用 A-Frame（用于构建虚拟现实体验的 Web 框架）和 Glitch（用于构建、混音和托管 Web 应用程序和网站的创意社区平台）想出的解决方案。

我经常在当地公共图书馆为学生上课。我发现 A-Frame 和 Glitch 的组合是理想的，特别是对于年轻的学习者来说。A-Frame 允许您编写类似于 HTML 的标记来生成 3D 内容。如果您不想编写任何 JS 代码，则不必编写。Glitch 很棒，因为我可以给我的学生一个示例项目，然后他们对其进行“混音”以创建自己的版本。仔细想想，“混音”对于非程序员来说可能比“分叉”更好。

这是我为他们开始的项目。 360 工作坊。如果您加载它，您会看到我在我的办公室里，脸上带着滑稽的笑容，额头上有一个奇怪的球体。

如果您单击右下角的头戴式设备图标，则可以进入 VR。如果您使用右上角的鱼形图标，则可以创建您的混音。如果您将注视光标移动到淡蓝色的球体上，您将跳转到一个新场景。

这是一个我称之为360° 导览的示例。

360° 导览

360° 导览是一种基于 Web 的体验，您可以在其中从一个固定位置查看 3D 图像。您可以旋转并环顾四周，但不能向前或向后移动。导览由多个场景组成。要导航，您需要单击热点以从一个场景跳转到另一个场景。您可以将其视为 90 年代中期多媒体 CD-ROM 寓教于乐应用程序的现代等效物。

代码

代码非常简单。它是带有自定义组件的标准 A-Frame。您在 a-assets 部分加载您的图像。要创建“场景”，请使用具有 screen 组件的实体（我想将其命名为 scene 而不是 screen，但这会与主要的 a-scene 组件太混乱了）。

在 screen 实体内部，放置一个用于 360° 图像的 a-sky 组件，然后添加球体、立方体或您想要的任何其他物体作为热点。热点应具有 to-screen 组件，该组件命名要跳转到的场景。

<a-entity screen="shed">
  <a-sky src="#shed" rotation="0 90 0"></a-sky>
  <a-sphere
           color="yellow"
           radius="0.2"
           position="2 0 4"
           to-screen="patio"
           ></a-sphere>
</a-entity>

您可以创建任意数量的屏幕，然后将它们全部包装在一个具有screen-switch组件的单个实体中。将 screen 属性设置为要加载的第一个场景。

<a-entity screen-switch="screen:scene3">
        <a-entity screen="scene1">
...
        <a-entity screen="scene2">
...
        <a-entity screen="scene3">
...
</a-entity>

底层切换器组件包含在 Glitch 项目中。您可以查看 switcher.js 文件，但代码非常无聊。它只是切换每个屏幕的可见性。

就是这样。这就是您进行 360° 体验所需的一切。

一些我自己的图像怎么样？

哦，您想使用自己的图像？好吧，好消息。这也很容易。

您可以通过搜索赤道投影和知识共享来在网上找到免费可重复使用的 360° 图像。这里有一些Flickr 上的图片。

如果您想制作自己的图像，您可以购买 360° 相机。有很多不错的品牌。我一直使用理光 Theta V。它可以通过 USB 连接到您的电脑，但您也可以通过理光移动应用程序控制它。该应用程序非常适合在拍摄前检查场景和调整三脚架。

理光 Theta V 用于拍摄 360° 图像和视频

Theta V 可以拍摄静止图像和视频。

对于拍摄图像，我建议您首先获得一个三脚架。相机实际上有两个 180˚ 镜头，它们通过智能软件拼接成一个 360˚ 赤道图像。只要镜头附近没有距离相机不到两英尺的物体，顶部和侧面的拼接就非常好。对于大多数方向来说，这都没问题，但由于您必须用手拿着相机，因此您会在底部看到奇怪的拇指和手指糊在一起的景象。

如果您使用三脚架，底部的糊状物几乎不可见。此外，三脚架总是一个好主意，可以拍摄出清晰锐利的照片。您可以使用移动应用程序查看场景，并在离开相机视野后（即躲在门后）按下快门。

由于这些图像通常在头戴式设备中查看，因此您应该将相机放置在大致与头部相同的高度，即 1 到 1.5 米。另一方面，如果您想要有趣的“小型化”效果，请将相机放在地板上（或小型三脚架上），并在周围放置乐高积木。

视频呢？

啊，是的。视频。Theta V 可以拍摄视频，分辨率出奇地高。从技术上讲，您甚至可以通过 Wi-Fi 流式传输视频，但分辨率较低。如果您真的需要流式传输，您需要使用 USB 线缆并在笔记本电脑上进行编码。

对于非流式传输视频，您只需将 MP4 文件上传到您的 Web 服务器，并将资源包含在具有视频标签的 360° 导览中。然后只需使用<a-videosphere>元素将视频添加到场景中。它会起作用的。

但是……

360° 视频文件很大。真的很大。比如每分钟一吉字节。因此，虽然可以将 mp4 文件上传到 Web 服务器，但任何想查看您的体验的人都需要进行长时间且可能昂贵的下载。要正确进行 360° 视频，您需要使用专门用于流式传输视频的服务，例如Wowza或Vimeo。它们可以逐步流式传输视频并动态调整比特率。如果您选择 Vimeo，请查看这个 Github 项目，了解如何操作。

360° 它！

我希望您喜欢这次对我们可以用 360° 图像做什么的入门导览。您可以通过混音这个 Glitch来构建自己的 360° 图像。我在我的资产仓库中添加了一些知识共享图像；这些图像已获得许可，您可以重复使用和混音。当您想要超越球体时，您可以阅读完整的A-Frame 文档，其中解释了如何使用其他几何图形、添加文本以及构建自己的组件。

如果您想了解有关如何在 Web 上制作 VR 和 AR 的更多信息，我会定期在Twitch上直播，并在Twitter上发布许多链接。尽情享受。