在 15 分钟内，您可以开发一个虚拟现实应用程序，并在 Web 浏览器、VR 头戴设备或 Google Daydream 上运行它。 关键是 A-Frame，这是一个由 Mozilla VR 团队 构建的开源工具包。
测试它
在您的手机上使用 Chrome 或 Firefox 打开此链接。
将您的手机放入 Google Cardboard 中，并盯着一个菜单方块来切换 360 度场景。
Fork 它
从 GitHub Fork 示例存储库。 更改目录到 repo 中。
如果您有 360 度图像，您可以将它们放入 img/ 子目录中。 如果您没有 360 度图像，您可以从开源 Hugin 全景照片拼接器开始。 样板应用程序包含我在旧金山的一次聚会上拍摄的 RICOH THETA 媒体。
创建缩略图
头戴设备中的菜单是 240x240 像素的标准图像。 您可以使用 GIMP 来创建图像。 A-Frame 会自动处理透视偏移。
编辑代码
如果您使用相同的图像文件名并覆盖 /img 中的 1.jpg，则完全不需要编辑代码。 如果您想扩展程序或使用您自己的文件名修改它，请更改 index.html 中的 id 和 src 以匹配您的文件。
<body>
<a-scene>
<a-assets>
<img id="kieran" src="https://open-source.net.cn/img/1.jpg">
<img id="kieran-thumb" crossorigin="anonymous" src="https://open-source.net.cn/img/kieran-thumb.png">
<img id="christian-thumb" crossorigin="anonymous" src="https://open-source.net.cn/img/christian-thumb.png">
<img id="eddie-thumb" crossorigin="anonymous" src="https://open-source.net.cn/img/eddie-thumb.png">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="christian" crossorigin="anonymous" src="https://open-source.net.cn/img/2.jpg">
<img id="eddie" crossorigin="anonymous" src="https://open-source.net.cn/img/4.jpg">向下滚动并编辑菜单链接部分。
<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#kieran"></a-sky>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#christian" data-thumb="#christian-thumb"></a-entity>
<a-entity template="src: #link" data-src="#kieran" data-thumb="#kieran-thumb"></a-entity>
<a-entity template="src: #link" data-src="#eddie" data-thumb="#eddie-thumb"></a-entity>
</a-entity>上传到 GitHub 页面
添加并提交您的更改
git add *
git commit -a -m ‘changed images'
git push在手机上通过 http://username.github.io/360gallery 打开您的应用程序。
下一步
这是 A-Frame 的简要介绍，旨在说明 WebVR 对于 Web 开发人员来说是简单且易于访问的。 转到 aframe.io 查看更多演示。 虽然 360 度图像的显示不是真正的 VR，但它在今天很容易、有趣且易于访问。 使用 360 度图像也是开始了解增强现实基础知识的好方法。
使用标准相机拍摄您自己的照片并将它们拼接在一起，或者购买或借用 360 度相机。 我使用的相机支持 360 度视频文件和直播。
故障排除
应用程序无法从您在浏览器中打开的本地文件运行。 您必须运行本地 Web 服务器（如 Apache2）或将其上传到外部站点（如 GitHub Pages）进行测试。
如果您使用的是 Oculus Rift 或 HTC Vive，您可能需要安装 Firefox Nightly 或实验性 Chromium 构建版本。 请访问 Is WebVR Ready? 查看您的浏览器当前状态。
360 度视频在桌面浏览器上有效。 我在移动设备上遇到了一些小故障。 该技术正在快速改进。
2 条评论