全世界的Web开发人员都无需外出学习全新的语言或Unity或Unreal Engine之类的游戏引擎即可开始开发虚拟现实。 如今，有多种方法可以开始在Web上进行VR实验，而A-Frame框架是入门的最简单方法之一。
什么是A框架？
A-Frame是一个开放源代码框架，用于使用自定义HTML元素创建WebVR体验。 这些元素使用three.js和WebGL在场景中创建启用VR的元素，而无需开发人员学习较低级别的API（例如WebGL）来为VR构建简单的体验。
A-Frame团队正在努力创建一个可扩展的VR网站，使开发人员能够构建竞争性的API和想法，这些API和想法一旦被广泛采用和确立，就可以成为已定义标准的一部分。 这样一来，我们今天就可以通过JavaScript框架和实验性浏览器构建来使用新功能，而无需等待标准被实施并进入浏览器。
设备兼容性
接下来（也是非常重要的）接下来最可能要问的问题是“ A-Frame跨浏览器兼容吗？” 。 令人惊讶的是，只要浏览器与WebGL兼容 ，A-Frame体验就可以在各种平台上很好地运行，并且3D场景（不带VR）可以作为备用显示。 这意味着Chrome，Firefox，Edge和Opera都可以在桌面上显示交互式3D版本的体验。 为了获得VR体验，可以将Oculus Rift连接到某些启用了WebVR的浏览器版本，以实现VR兼容性（请参见下面“您需要什么”下面的链接）。
在智能手机方面，最近两代运行iOS和Android的现代智能手机最好（iPhone 6和更高版本，三星Galaxy S6和更高版本，我的HTC One M9效果很好）。 当插入Google Cardboard头戴设备时，其中大多数还支持虚拟现实，因此与让VR在桌面上正常工作相比，VR兼容性实际上更高，更易于管理！
您需要什么
要继续尝试并尝试A-Frame，您需要满足以下条件：
- 要获得基本的非VR体验-如上所述的启用WebGL的浏览器。
- 为了获得桌面VR体验-
- 具有WebVR支持的浏览器版本，例如最新的Chromium WebVR版本或Firefox Nightly 。
- Oculus Rift头戴式耳机（也许还有HTC Vive，我还无法测试！）。
- 为了获得移动VR体验-
- 大多数现代智能手机将至少能够显示场景并允许您在半VR视图中环顾四周（一个没有耳机本身但在移动手机的地方可以环顾四周）。
- Google Cardboard或Gear VR耳机。
入门
首先，请转到A-Frame的入门页面 。 A-Frame团队提供了多种试验A-Frame的选项，包括CodePen代码段，npm构建，该框架的可下载或CDN可用的JS文件，以及带有HTML和本地开发服务器的样板，作为最佳指南。实践。 为了使事情尽可能简单，我们将直接从A-Frame样板下载并工作。
在您希望在系统上有Web项目的任何地方提取样板。 它不一定需要在本地Web服务器上运行。 样板使用其CDN中的A-Frame，因此主要是我们要使用的index.html文件。 package.json提供了一个基于npm的本地Web服务器进行测试，我们将在本文中使用它-但是，没有必要对此进行测试。
运行我们的本地服务器
如上所述，A框架样板带有其自己的本地Web服务器，可以随时使用。 虽然这不一定是测试A-Frame场景所必需的，但这样做是一种好习惯，并且可以减少涉及通过文件运行网页时经常出现的各种跨域策略问题的混乱。计算机上的系统。
要运行本地Web服务器，请转到终端/命令提示符内包含样板项目的文件夹，然后运行以下命令：
npm install && npm start 这将为Web服务器安装所有必需的文件，然后为您运行它。 此后，如果您想再次运行服务器，只需运行npm start 。
运行本地Web服务器后，它将自动打开Web浏览器并加载样板网页。 它带有LiveReload-这意味着只要您进行更改，它就会自动刷新。
如果您需要在其他设备上打开网页，或者在运行本地Web服务器后无法自动打开网页，则可以通过在浏览器中访问http://localhost:3000或http://192.168.0.1:3000来打开网页http://192.168.0.1:3000 ，其中该IP地址是您计算机的IP地址。
您应该看到的初始场景如下所示：
建立新场景
让我们清理样板代码并除去<a-scene>之外的<body>标记中的所有内容。 我们所有的A-Frame元素都将放置在此<a-scene>组件内：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Our First A-Frame Experience</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>A-Frame带有一组原语，这些原语为我们提供了VR场景的一系列常用元素。 让我们添加一些自己的内容来构建自定义场景。
建立我们的天空
每个场景都需要天空（或某种背景）。 这可以是纯色，也可以是全景等矩形图像。 为此的原语是<a-sky> 。
具有单一平面颜色的天空的代码如下所示：
<a-scene>
<a-sky color="#C500FF"></a-sky>
</a-scene>这为我们的场景创建了一个可爱而自然的紫红色天空：
像天空一样光彩照人，以360度全景图像看起来会更好。 Flickr是找到可以用来进行实验的天空盒的好地方。 这里提供了一系列等角照片 ，并附带许可，您可以重复使用它们。
我转到Flickr， 从Luca Biada找到了以下照片，该照片的确需要署名才能在项目中使用（始终检查许可条款！）：
图片来源： Luca Biada
当我们使用以下代码将其放置到场景中时：
<a-scene>
<a-sky src="street.jpg"></a-sky>
</a-scene>我们得到该场景的360背景：
添加盒子
现在我们有了一个场景，让我们向其中添加一些元素。 使用<a-box>原语，我们可以将立方体和盒子放入场景中。 以下代码在场景中的道路上添加了一个橙色框：
<a-box color="#B76705" depth="2" height="2" width="4" position="0 0 -1.25"></a-box> color属性的作用方式与我们的skybox相同，它为box元素设置了纹理颜色。 然后，我们具有depth ， height和width属性，以使其具有形状。 我们的盒子是2 x 2 x 4，这使它成为一个宽阔的盒子，当放在路上时，它看起来像是一辆棚车。 要将其放置在场景中的不同位置，我们可以使用position属性移动其位置。 该属性采用三个值，每个轴一个： xyz 。
我们上面的代码框在我们的场景中看起来像这样：
添加一些气缸
现在，我们将使用圆柱体图元<a-cylinder>在场景中添加一些额外的街道杆：
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder> color和position属性的工作方式与我们的框相同，但是有两个新属性height和radius分别设置圆柱体的高度和半径。 这是带有微妙新杆的场景：
扩展这个想法非常容易，因此使用以下代码，我们可以添加整行的极点：
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-10 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="20 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="50 0 -7"></a-cylinder>看起来像这样：
气瓶实际上在A形框架中还有其他各种选择，请随时在其气瓶文档中进行探索。
添加一个球体
3D空间中包含的另一个非常常见的形状是球体。 我们可以使用<a-sphere>原语创建球体，如下所示：
<a-sphere color="#000000" radius="2" position="0 15 20"></a-sphere>该代码非常简单，并在我们后面的天空中创建了一个令人毛骨悚然的黑色球体：
使用资产添加纹理
我们可以通过<a-assets>标签将纹理添加到诸如框，圆柱体和球体之类的图元中。 这将建立A-Frame资产管理系统，该系统使我们能够定义资产，然后在我们的图形上使用它们。 这是为场景添加纹理的推荐方法。
我从Subtle Patterns下载并调整了Carlos Aguilar的一个简单（但非常酷）的重复模式 。 我们可以像这样将资产添加到场景中：
<a-assets>
<img id="darktexture" src="blacktexture.png">
</a-assets> id为我们提供了一个名称，用于引用我们的纹理并将其用于场景中的对象上。 src属性告诉A-Frame我们想要哪个图像。 为了给场景中的对象提供纹理，我们可以在纹理的ID之前使用哈希将纹理包含在对象的src属性中：
<a-sphere src="#darktexture" radius="2" position="0 15 20"></a-sphere>这使我们在天空中的随机，怪异的球体具有更好的科幻外观：
在VR中
要在VR中看到这些体验，您需要将Oculus Rift连接到PC或需要现代化的智能手机！ 对于大多数人来说，智能手机选项是最简单的。 如果您没有VR耳机，那么当您使用智能手机前往现场时，您仍然可以看到所有内容，并且可以通过移动手机四处看看：
如果您的手机带有Google Cardboard耳机，则可以单击右下角的VR图标进入VR视图：
实际尝试
如果您想参加我们在本教程中汇总的A-Frame街头演示，可以在这里看到它-A-Frame街头演示 。
结论
对于WebVR，A-Frame是一个非常简单易用的框架，可将跨浏览器兼容的VR体验整合在一起。 使用A-Frame可以完成很多工作，我等不及要在SitePoint的后续文章中进行更多研究。
如果您是WebVR的粉丝，上周我们介绍了如何使用Primrose和WebVR在VR中构建虚拟现实 ，一定要看看！ Primrose是另一个针对生产力应用程序的令人兴奋的WebVR框架。 Elio Qoshi在SitePoint上还写了有关最新WebVR 1.0 API草案的建议 ，如果您正在使用WebVR，则值得一读。
如果您使用A-Frame来实现自己的VR网络体验，那么我很乐意看到您组装的内容！ 在下面的评论中让我知道，或者在Twitter上通过@thatpatrickguy与我联系 。
From: https://www.sitepoint.com/a-frame-the-easiest-way-to-bring-vr-to-the-web-today/
2631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
