如何在 Web 上创建 VR 应用程序？
4.85/5 (4投票s)
要创建WebVR，您有多种工具/库可供选择。我发现了A-frame、React VR和Krpano。哪种库最好，以及如何使用它？
引言
为了知道哪种应用程序最适合制作网页上的VR导览，我创建了三次相同的应用程序。以下是我为WebVR应用程序尝试过的库或工具。
- A-frame 结合 Angular-CLI
- React VR
- Krpano
但首先，让我们开始描述我制作的应用程序。
应用程序描述
我开发的用于测试这三个框架的VR应用程序是一个卡车的虚拟教育。在标示的位置拍摄了八张高质量的卡车360度图片。红线显示了用户如何在卡车周围行走。
在每张图片上，您都会看到几个点，当您注视或单击按钮时，这些点会提供更多信息。这些信息可以是视频、图像或文本。
A-frame + Angular-CLI
第一个尝试的是A-Frame结合Angular-CLI。A-frame使用实体-组件-系统（Entity-Component-System）。这意味着A-frame遵循“组合优于继承”的原则，这使得在定义实体时具有更大的灵活性，其中游戏场景中的每个对象都是一个实体。
该框架的优点是文档非常好，几乎所有Web VR应用程序都使用该框架。当我制作VR导览时，遇到了一些问题。第一个问题是必须编写大量代码。现在我将A-frame与Angular结合使用，因此我可以重用许多重复的代码。我更喜欢保持代码的DRY（Don't repeat yourself，不要重复自己）！
DRY的好处是您可以重用同一个项目，更改图像和我的配置文件。在此配置文件中，我放置了所有导航和信息按钮。下面您可以找到一个360度图像的示例。
[
{
"id": 1,
"image": "",
"location": "Backsite",
"camera": "10 130 0",
"nextScenes": [
{
"to": 6,
"location": "-3000 1800 1700",
"rotation": "0 150 0",
"scale": "150 150 150"
}
],
"hotspots": [
{
"id": "obj6",
"location": "-3000 1600 2500",
"rotation": "0 150 0",
"scale": "150 150 150",
"headerTitle": "The roof",
"body": "The roof is the upside of a house."
}
]
}
]
A-frame的另一个优点是您可以创建其他项目，不仅仅是虚拟导览。您可以创建小型VR游戏、VR交互式教育等。还可以跟踪控制器或W、A、S和D键。
如果您在开发时使用Ctrl + Alt + I组合键，您将获得一个可视化编辑器，用于将对象放置到正确的位置。这比盲目操作更容易。
我在A-frame结合Angular时遇到的一个问题是数据绑定到A-frame标签，例如a-entry标签。您可以在此处找到相关问题：Data binding does not work for A-frame tag attributes。这个bug是a-enity标签的position、rotation和scale属性无法绑定，因此它们显示的是默认值。
我通过使用document.getElementById选择器解决了这个问题。
ngAfterViewInit(): void {
for (let i: number = this.currentData.hotspots.length; i--;) {
let spot: any = this.currentData.hotspots[i],
el: any = document.getElementById(spot.id);
el.setAttribute("position", spot.location);
el.setAttribute("rotation", spot.rotation);
el.setAttribute("scale", spot.scale);
}
}
通过阅读另一个答案，我知道A-frame不支持数据绑定。
出于性能原因，A-frame不会使用组件数据更新DOM。
React VR TL;NF
我尝试的另一个库是React VR。这个框架非常新，文档很少，并且很难用它创建一个可行的应用程序。这是因为该库不够成熟，无法用它开发稳定的应用程序。
其优势在于React VR构建在React Native库之上，该库可用于创建原生Web应用程序。
缺点
更多关于使用React VR进行开发的信息即将推出。
Krpano
Krpano Viewer是一款小巧且非常灵活的高性能查看器，适用于各种全景图像和交互式虚拟导览。该查看器有Flash和HTML5应用程序版本。该查看器专为桌面（Windows, Mac, Linux）和移动设备及平板电脑（iPhone, iPad, Android等）上的浏览器使用而设计。
来源：krpano.com
使用Krpano的优势在于一切都易于构建。Krpano使用HTML5，并在出现问题时回退到Flash。您可以添加一些音频文件或360视频，并使其与用户互动。
只需将360度图像拖放到可执行批处理文件，等待完成，最后在浏览器中添加箭头按钮进行导航和信息点。设置会自动保存在XML文件中，这是Krpano的一个便捷功能，而A-frame则没有。
您必须购买许可证才能使用Krpano并获得良好的VR导览体验。Krpano的免费演示版会在图片上添加水印。您可以在下方找到水印的示例。
Krpano的另一个特点是您可以将一张图片制作成一个小世界。Krpano提供了多种其他视图，例如：鱼眼、立体、建筑、Pannini、普通视图和小世界（见下图）。您可以在此演示上尝试这些视图。
出于性能原因，Krpano会切割360全景图片。其工作原理如下：Krpano从20,000 x 10,000像素的等距圆柱投影.tif文件开始。根据文件细节，这些文件平均在300到500 MB之间。
接下来，图像进入Krpano切割器，该切割器将.tif文件切割成8,000 x 4,000到20,000 x 10,000像素不同分辨率的.jpg文件。在正常情况下，有四种分辨率在此范围内。一个完整的切割图像大小在25到70 MB之间。
平均而言，一张全景图片被切割成1,500个部分，分布在330个文件夹中。移动设备文件夹最简单。它被切割成6个部分：左、右、前、后、上和下。
来源：S. Stumpf（H. Pauwelyn采访）2017
结论
使用A-frame或React VR应用程序需要编码。您需要学习框架并安装源代码或驱动程序。如果您是程序员并且热爱编码，这将很有趣。
Krpano是另一种选择，它具有与A-frame和React VR不同的功能，并且如果您拥有许可证，它对所有人来说都很容易上手，并且包含与A-frame和React VR不同的功能。
接下来是我研究的内容
- 如果您喜欢开发应用程序，请使用A-frame或React VR，但需要一些包来获得更好的工作流程。
- 如果您处理360视频或图像，并需要虚拟导览和其他功能，请使用Krpano。它不是开源的，需要许可证。