入门指南;准备开始

有几种方法可以开始 A-Frame

  • Play with CodePen
  • Grab the Boilerplate
  • Include the JS Build
  • Install from npm

CodePen

CodePen是前端web开发的一个操场。我们可以在浏览器中直接编辑HTML和JavaScript的文本编辑器,实时查看和共享代码片段.这是一个快速的方法深入而无需下载或安装任何东西.Check out the official MozVR CodePens and the A-Frame Hello World CodePen:

<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Boilerplate

引用包含:

  • 链接到一个简单的HTML文件current version of A-Frame
  • An optional local development server
  • 一个简单部署工作流GitHub页面与世界分享 我们可以拿样板以两种方式之一:
  • Fork on GitHub
  • Download .ZIP

Builds

如果我们想包括CDN的JS构建,我们可以把<script>标记直接进入我们的HTML:

<!-- Production Version, Minified -->
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

<!-- Development Version, Uncompressed with Source Maps -->
<script src="https://aframe.io/releases/0.2.0/aframe.js"></script>

如果我们想在本地服务,我们可以下载JS构建: Production Version 0.2.0 Minified Development Version 0.2.0 Uncompressed with Source Maps

npm

对于更高级的用户想要使用自己的构建步骤,我们可以通过npm安装:

# Latest stable version (https://www.npmjs.com/package/aframe)
$ npm install aframe

# Bleeding-edge version (https://github.com/aframevr/aframe)
$ npm install aframevr/aframe

然后我们可以从我们的应用程序需要的尖顶,也许用Browserify或Webpack:

require('aframe');