A-Frame中文教程

如何开始

使用踏得网在线开发工具

TechbrooD踏得网是一个在线Web作品开发平台,我们可以在浏览器中直接编辑HTML、CSS和JavaScript,预览结果页面,在云端保存作品和分享展示代码片段,并可以搜索海量相关资源。这是最方便的学习和交流工具,无需下载或安装任何东西。

使用代码模板

如果使用离线工具如Sublime Text来开发的话,您需要按照如下步骤准备好开发环境:

我们可以通过如下2种方式之一来获取代码模板:

通过GitHub克隆

下载压缩包

无论哪种方式,记得要把项目放在本地Web服务器中,以便资源可以被正确加载。

直接引用JS

我们还可以直接引用CDN上已经构建好的JS脚本,如下在HTML中添加一个 <script> 标签:

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

我们当然也可以把该JS脚本下载下来放到本地,相应的修改script标签中的src属性为本地Web服务器中的文件路径。

使用npm安装

对于希望由自己来构建的更多高级用户,我们可以通过npm来安装:

# 最新稳定版本 (https://www.npmjs.com/package/aframe)
$ npm install aframe
# 实验版本 (https://github.com/aframevr/aframe)
$ npm install aframevr/aframe

然后我们可以在app中直接require A-Frame,通过Browserify 或 Webpack来构建:

require('aframe');

使用本地Web服务器

和所有web应用一样,A-Frame也依赖于Web服务器才能正常工作,当你使用踏得网在线开发工具时,您的作品是通过云端服务器上的Apache来支撑的。当你使用离线开发时,为保证资源文件能被正确加载和访问,您需要搭建并启动一个本地Web服务器,比如Apache、Tomcat、Nginx,下面是一些其他可选的简易方式:

如果你有npm, 你可以直接基于一些场景模板来构建应用程序,比如 angle, 命令行执行如下:

npm install -g angle && angle initscene