A-Frame WebVR开发入门教程
Posted 陈小峰_iefreer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了A-Frame WebVR开发入门教程相关的知识，希望对你有一定的参考价值。
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实（VR）体验，但从工程化的角度而言，开发社区还需要更多方便强大的开发库来简化编程，Mozilla的 A-Frame 框架就是这样一个工具，提供了一个Web开发者所熟悉的标记语言来快速构建3D VR场景动画原型，而不需要编写过多的javascript和GLSL语句。本文将介绍如何使用A-Frame构建一个简单的在线可运行实例。你可以先看下在线演示效果。
参考文档：A-Frame中文文档开发指南在线教程
概览
当前A-Frame版本是0.5.0，由于WebVR标准乃至WebGL标准都还在快速发展演进中，因此A-Frame仍然处于高度技术实验的状态，远未达成商业成熟。但是对于开启了相应设置的最新浏览器而言，A-Frame是可以正常工作的。它可以在桌面、移动设备（ios和android）、Oculus Rift, Gear VR 和 HTC Vive上运行。
A-Frame 构建在WebGL接口之上（事实上其内置了Three.js开发框架），并为应用程序提供了一些预装基础组件如 - 模型、视频播放器、天空环境、几何模型、控制器、动画和鼠标等。A-Frame 基于游戏领域常用的实体组件系统（entity component system），但定位于Web开发，使用标记语言以及使用JavaScript语言来进行操作，最终达到在网页中获得3D虚拟现实体验的设计目标。
搭建开发环境
我们首先需要搭建A-Frame的开发环境，这里和以往一样我们借助踏得网在线开发平台：
1. 首先要有一个现代浏览器，支持WebGL和WebVR，比如最新版本的Firefox（Firefox Nightly）或Chrome（v54+）。
2.（可选）设置一个VR设备如Oculus Rift、HTC Vive或者 Google Cardboard。
3. 在踏得网在线开发平台上新建作品（从菜单中选择新建或按快捷键Ctrl+M）。
4. 在左侧“第三方库”标签栏中选择A-Frame 0.5.0，
这将在作品中自动引入A-Frame的最新JS脚本库。
html代码结构
如果你选择使用Sublime Text等本地编辑器来开发，那么你首先需要创建一个空HTML文档并引入aframe脚本库，代码如下：
| 1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>A-Frame demo</
title
>
<
script
src
=
"//wow.techbrood.com/libs/aframe/aframe-v0.5.0.min.js"
></
script
>
</
head
>
<
body
>
<!-- HTML goes here -->
</
body
>
</
html
>
|
如果你使用踏得网在线开发平台，这一步略过。
（踏得网将为您自动生成这些重复性的模板代码但并不显示，您可以通过下载功能获取到完整HTML文档代码）。
初始化场景
场景（scene）是所有VR内容的容器，当创建新的对象后，我们只有把这些对象加到场景中，才能真正在屏幕上被看到。在 A-Frame 中，场景通过一个 场景实体（Scene entity）元素来表达。
注意：一个实体（Entity）可以是任意元素 - 可以是盒子、圆柱、圆锥对象，也可以是一个相机（camera）、光源（light）或者声源（sound）。
我们通过在 <body> 元素中添加一个 <a-scene> 元素来添加场景对象，即在踏得网在线开发平台的html面板中添加如下代码：
| 1 2 |
<
a-scene
>
</
a-scene
>
|
添加几何模型
接着我们在 <a-scene> 元素中添加一个 <a-box> 元素，这等于是在场景中添加一个立方体：
| 1 |
<
a-box
position
=
"-1 0.5 -3"
rotation
=
"0 45 0"
color
=
"#4CC3D9"
A-Frame WebVR开发新手教程
|