作品发布
本节将说明代码部署方面的常见问题,比如主机、资源管理和代码分享。
发布网页
虽然有许多免费的站点部署和托管服务,但我们推荐使用云主机(如国外的AWS,国内的阿里云)。最好网站都使用SSL/HTTPS服务。对于一些练习作品的在线展示和分享,推荐使用作品分享平台(允许上传一些简单的模型和资源文件)。当然也可以使用Github来托管你的项目源代码和并行开发。
GitHub网页
如果你的项目代码托管在Github上,我们推荐你使用GitHub网页来发布。最简单的方法是去我们项目的GitHub设置(Settings),向下滚动到GitHub Pages部分,并选择发布主干(master branch)。这将把项目发布到https://<username>.github.io/<repositoryname>
上。
我们也可以选择发布gh-pages
分支,如果我们不想发布主干上的变动。 ghpages
可以制作一个命令行发布过程。
部署资源
我们还将需要对音频、纹理、模型和视频等资源进行托管。
如果A-Frame网站的页面和资源被放在同一个目录中(即相同的域),那么没什么好担心的。A-Frame可以使用相对URL来引用资源。
但如果我们把资源托管(上传)到一个第三方CDN上,那么由于浏览器跨域调用的安全限制,首要的要求就是宿主服务器的 跨域资源共享 (CORS)被启用。这样A-Frame才可以获取资源并显示在场景中。另外,如果我们使用 <a-assets>
, 我们通常在资源上应该设置 crossorigin="anonymous"
,比如<img>
, <audio>
, 和<video>
。
通过CDN来托管资源有如下几个选择:
- A-Frame资源上传器 - 使用UploadCare。
- imgur - 对于图像,我们可以使用Imgur,这是一个流行的图像托管服务。
部署模型
托管模型不是那么简单。模型通常以一组文件的形式出现。其中模型文件关联引用其他文件,如纹理贴图。 因此,模型必须作为同一目录中的一个文件夹上传。
我们可以上传到GitHub的资源库,并使用GitHub来提供模型文件在线访问服务。
- 去我们的一个GitHub库。
- 点击上传文件(Upload files).
- 上传我们的资源(Assets)并等待上传完成。
- 在底部键入一条简要描述,然后点击Commit changes.
- 等待处理
- 完成后,单击主资源文件。
- 点击Raw.
- 这样我们获得了资源在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.mp4gifpardy in.mp4 out.gifgifpardy -r 320x240 --delay 8 in.mp4 |
我们还可以选择使用GIF Brewery,该工具提供了界面来在导出GIF文件前修剪,调整大小,裁剪和预览GIF。或直接捕捉为GIF: LICECap.
分享媒体
有以下几个渠道来分享作品展示媒体:
- Twitter - Mention
@aframevr
or include the#webvr
hashtag. #projects
channel on Slackawesome-aframe
GitHub repository.- WebVR Slack channel.
- /r/WebVR subreddit.
- Write a case study and tell us to feature on the A-Frame Blog.
上面都是国外链接,部分需要科学上网。
嵌入网页
如果我们想把A-Frame场景嵌入到2D网页中,我们可以使用embedded组件来删除全屏样式并允许我们用CSS来样式化画布(canvas)。