入门指南;准备开始
有几种方法可以开始 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');