A-Frame中文教程

作品发布

本节将说明代码部署方面的常见问题,比如主机、资源管理和代码分享。

发布网页

虽然有许多免费的站点部署和托管服务,但我们推荐使用云主机(如国外的AWS,国内的阿里云)。最好网站都使用SSL/HTTPS服务。对于一些练习作品的在线展示和分享,推荐使用踏得网作品分享平台(允许上传一些简单的模型和资源文件)。当然也可以使用Github来托管你的项目源代码和并行开发。

GitHub网页

如果你的项目代码托管在Github上,我们推荐你使用GitHub网页来发布。最简单的方法是去我们项目的GitHub设置(Settings),向下滚动到GitHub Pages部分,并选择发布主干(master branch)。这将把项目发布到https://<username>.github.io/<repositoryname>上。

GitHub

我们也可以选择发布gh-pages分支,如果我们不想发布主干上的变动。 ghpages可以制作一个命令行发布过程。

部署资源

我们还将需要对音频、纹理、模型和视频等资源进行托管。

如果A-Frame网站的页面和资源被放在同一个目录中(即相同的域),那么没什么好担心的。A-Frame可以使用相对URL来引用资源。

但如果我们把资源托管(上传)到一个第三方CDN上,那么由于浏览器跨域调用的安全限制,首要的要求就是宿主服务器的 跨域资源共享 (CORS)被启用。这样A-Frame才可以获取资源并显示在场景中。另外,如果我们使用 <a-assets>, 我们通常在资源上应该设置 crossorigin="anonymous",比如<img>, <audio>, 和<video>

通过CDN来托管资源有如下几个选择:

部署模型

托管模型不是那么简单。模型通常以一组文件的形式出现。其中模型文件关联引用其他文件,如纹理贴图。 因此,模型必须作为同一目录中的一个文件夹上传。

我们可以上传到GitHub的资源库,并使用GitHub来提供模型文件在线访问服务。

  1. 去我们的一个GitHub库。
  2. 点击上传文件(Upload files).
  3. 上传我们的资源(Assets)并等待上传完成。
  4. 在底部键入一条简要描述,然后点击Commit changes.
  5. 等待处理
  6. 完成后,单击主资源文件。
  7. 点击Raw.
  8. 这样我们获得了资源在GitHub的一个托管URL。此外,我们也可以把 raw.githubusercontent.com改为cdn.rawgit.com

分享项目

创建媒体

通过创建视频或者GIF动画来展示我们构建的VR项目

首先,我们需要录制屏幕,在OS X上, 可以使用内置的QuickTime播放器的录屏功能或者OBS Studio。在Windows上,我们可以使用 use OBS Studio

然后,我们可能需要剪辑视频。在OS X上,我们可以使用QuickTime播放器的剪辑工具(<cmd> + t)。

要转换为GIF动画文件,使用gifpardy. gifpardy在底层使用了ffmpeg和gifsicle:

gifpardy in.mp4
gifpardy in.mp4 out.gif
gifpardy -r 320x240 --delay 8 in.mp4

我们还可以选择使用GIF Brewery,该工具提供了界面来在导出GIF文件前修剪,调整大小,裁剪和预览GIF。或直接捕捉为GIF: LICECap.

分享媒体

有以下几个渠道来分享作品展示媒体:

上面都是国外链接,部分需要科学上网,因此对于中文作品,我们推荐发布在踏得网上。

嵌入网页

如果我们想把A-Frame场景嵌入到2D网页中,我们可以使用embedded组件来删除全屏样式并允许我们用CSS来样式化画布(canvas)。