aframe开始使用aframe


备注

本节概述了aframe是什么,以及开发人员可能想要使用它的原因。

它还应该提到框架内的任何大型主题,并链接到相关主题。由于aframe的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

A帧0.x

发布日期
0.6 2017年5月25日
0.5 2017年2月10日
0.4 2016年12月17日
0.3 2016年8月18日

旧版本

发布日期
0.2 2016年3月26日
0.1 2015年12月17日

特征

VR变得简单

只需放入script 标签和a-scene 。 A-Frame将处理3D样板,VR设置和默认控件。无需安装,无需构建步骤。

声明性HTML

HTML易于阅读,理解和复制粘贴。基于HTML,A-Frame可供所有人使用:网络开发人员,VR爱好者,艺术家,设计师,教育工作者,制造商,儿童。

跨平台VR

为Vive,Rift,Daydream,GearVR和Cardboard构建VR应用程序,支持所有相应的控制器。没有耳机或控制器?没问题! A-Frame仍适用于标准台式机和智能手机。

实体 - 组件架构

A-Frame是一个功能强大的three.js框架,提供了一个声明性,可组合,可重用的实体组件structure.js。 HTML只是冰山一角;开发人员可以无限制地访问JavaScript,DOM API,three.js,WebVR和WebGL。

性能

A-Frame从头开始针对WebVR进行了优化。虽然A-Frame使用DOM,但其元素不会触及浏览器布局引擎。 3D对象更新都在内存中完成,在单个requestAnimationFrame调用下几乎没有开销。供参考,请参阅A-Painter,一个内置在A-Frame中的Tilt Brush克隆,其运行方式与原生(90+ FPS)相同。

工具不可知

由于Web是基于HTML的概念构建的,因此A-Frame与大多数库,框架和工具兼容,包括React,Preact,Vue.js,Angular,d3.js,Ember.js,jQuery。

视觉检查员

A-Frame提供了一个方便的内置可视3D检查器。打开任何A-Frame场景,点击ctrl + alt + i ,然后飞来飞去躲在引擎盖后面!

视觉检查员

注册处

采用开发人员发布的强大组件,并直接从HTML插件。与Unity资源商店类似,A-Frame Registry收集并管理这些组件以便于发现。

组件

使用A-Frame的核心组件(如几何图形,材质,灯光,动画,模型,光线计,阴影,位置音频,文本和Vive / Touch / Daydream / GearVR / Cardboard控件)来运行。进一步了解社区组件,如粒子系统,物理,多用户,海洋,山脉,语音识别,动作捕捉,远程传送,超级手和增强现实。

入门

A-Frame可以从普通的HTML文件开发而无需安装任何东西!尝试使用A-Frame重新组合Glitch上的入门示例的好方法,Glitch是一个即时托管和免费部署的在线代码编辑器。或者创建.html 文件并在head 包含A-Frame:

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
 

包括JS Build

要将A-Frame包含到HTML文件中,我们删除指向CDN构建的script 标记:

<head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
 

从npm安装

我们也可以通过npm安装A-Frame:

$ npm install aframe
 

然后我们可以将A-Frame捆绑到我们的应用程序中。例如,使用Browserify或Webpack:

require('aframe');
 

如果使用npm,则可以使用角度,A-Frame的命令行界面。 angle可以使用单个命令初始化场景模板:

npm install -g angle && angle initscene
 

AR入门

要在Web上创建AR应用程序,您需要添加名为AR.js的新库。首先加载A帧,然后加载AR.js.

Newt你必须使用添加了artoolkit -attribute的A-frames a-scene -tag来设置你的场景。 sourceType 必须是您的网络摄像头。使用此功能也支持智能手机的字体相机。

a-marker-camera -tag标记记录屏幕内代表图像的图像。在这种情况下,它是marker.png 。当相机检测到此标记时,该框将显示在标记上。

您可以在下面找到示例代码:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
    THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>

    <a-scene artoolkit='sourceType: webcam;'>
        <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='marker.png'></a-marker-camera>
    </a-scene>

</body>