A-Frame中文教程

构建一个基础场景

要构建一个基础的A-Frame场景,你需要具备基本的HTML知识。你将学习如何通过原语(primitives)来添加3D实体(比如对象),应用3D空间变换,使用图片作为纹理贴图,使用动画和事件添加交互性,通过调整光照和添加背景来改变外观,以及使用A-Frame实体-组件生态系统来添加文本。

考虑到A-Frame的读者可能没有3D或VR(乃至编程)经验,我们打算一步步来讲解这些内容。

下面是我们需要最终完成的作品场景,一块漂浮的天外陨石,我们可以先预览下:

我们可以通过按下ctrl+alt+i组合键来打开检测器,来查看场景中的元素。

基础HTML代码

我们以最低要求的HTML结构来开始:

我们通过在 <head>中添加script标签来包含A-Frame框架, 指向一个CDN缓存的A-Frame构建版本(你也可以使用踏得网的国内缓存版本,加载会快一些,路径为//wow.techbrood.com/libs/aframe/aframe-v0.5.0.min.js)。这个必须放在 <a-scene>声明之前,否则 <a-scene>将不起作用。

接下来我们在<body>中声明一个 <a-scene>标签, <a-scene>是场景容器,用来包含所有实体。 <a-scene>处理所有3D所需要的设置:建立WebGL上下文,画布,相机,光照,渲染器,渲染循环以及现成可用的设备平台支持如:HTC Vive, Oculus Rift, Samsung GearVR, 以及智能手机(Google Cardboard)。 <a-scene>帮我们做了很多事情!

添加一个实体

<a-scene>里面,我们通过原语 <a-box>来添加一个实体。我们可以把 <a-box>当作普通HTML元素一样使用,定义标签,通过属性来定制它。还有一些其他的原语包括: <a-cylinder>, <a-plane>, or <a-sphere>.

这里我们定义颜色属性(color),更多 <a-box>的属性请查阅 <a-box>文档(比如: 宽度(width), 高度(height), 长度(depth)).

boximage Image by Ruben Mueller from vrjump.de

补充说明一下,原语(primitives)是A-Frame所使用的HTML元素扩展,用来封装底层的实体-构件组合。使用起来很方便,但我们要意识到 <a-box>的内部实现是带geometrymaterial的一个<a-entity>

<a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>

不过,因为缺省的相机(camera)和盒子(box)都在原点 0 0 0,我们将看不到盒子,除非我们移动它的位置,这可以通过使用 position组件来变换3D空间中的盒子。

3D实体变换

让我们先看看3D空间。A-Frame使用右手坐标系统。默认的摄像机方向:正x轴延伸。 右(right), 正y轴延伸 上(up), 正z轴延伸 前(out)对着我们的屏幕:

righthandimage Image from what-when-how.com

A-Frame的距离单位是米(meters),因为 WebVR API以米为单位返回姿势数据。在设计VR场景时,考虑我们创建的实体的真实世界大小是很重要的。一个height="10"的盒子在我们电脑屏幕上看起来很普通的,但是在VR里将显示成真实的大小,那会是一个很高的盒子。

A-Frame的旋转单位是角度(degrees),虽然它会在three.js内部转换为弧度。要确定旋转的正方向, 请使用右手规则(right-hand rule)。 把大拇指指向正轴的方向,我们手指绕的方向就是旋转的正方向。

要平移,旋转和缩放盒子,我们可以改变 位置(position), 旋转(rotation, 和 缩放(scale)组件。让我们首先应用旋转和缩放组件:

<a-scene>
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
</a-scene>

上面的代码示例将旋转我们的盒子并放大到两倍。

父子变换

A-Frame HTML代表一个 场景图(scene graph)。在场景图中,实体可以有一个单亲和多个孩子。子实体继承其父代的变换(即位置、旋转和缩放)。

例如,盒子有一个球的子对象:

<a-scene>
<a-box position="0 2 0" rotation="0 45 45" scale="2 4 2">
<a-sphere position="1 0 3"></a-sphere>
</a-box>
</a-scene>

如果我们计算球体的世界位置,它将是1 2 3, 通过将球体的父位置与自己的位置组合而成。同样,对于旋转和缩放,球体将继承盒子的旋转和刻度。球体也会随其父盒子一样旋转和伸展。如果盒子改变了它的位置、旋转或刻度,它将立即适用于球体并影响球体。

如果我们把一个圆柱体作为一个子对象添加到我们的球体,那么圆柱体的变换将同时受到球体盒子的影响。在底层three.js中,这是通过变换矩阵相乘来实现的。幸运的是,我们不必考虑这个问题!

把我们的盒子放在照相机前面

现在让我们把盒子放到一个对于相机可见的位置上去。我们可以使用位置组件把盒子沿负z轴方向往后退5米,然后往上移动2米,避免跟地面接触:

<a-scene>
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
</a-scene>

现在我们就能看到这个盒子了:

boximage2

缺省控制

对于平板显示器(即膝上型电脑、台式机),默认的控制方式是通过点击-拖动鼠标来四下观望以及通过WASD或方向键来四处移动。在手机上,我们可以通过旋转摄像机来四下观望。虽然A-Frame是为WebVR量身定做,这个默认的控制方案在没有头戴设备的情况下也可以使用。

webvrimage

根据Mozilla的VR主页说明建立和进入WebVR

通过点击护目镜进入VR模式,当然你首先得连接一个VR头戴设备(比如Oculus Rift, HTC Vive),我们可以身临其境地体验场景。如果空间尺度(room-scale)可用,我们还可以在场景中四处行走。

给场景添加一个背景

只需要一行简单的HTML代码,我们就可以添加一个身临其境的背景: <a-sky>是一个围绕着场景的天空背景。 <a-sky>,它是一种应用于球体内部的材料,可以是普通颜色,360°图像,或360°视频。例如,添加一个深灰色的背景代码如下:

<a-scene>
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>

应用一个图片纹理

确保建立一个本地web服务器,以便能正常加载纹理贴图。

我们可以使用src属性来给这个box应用图片、视频或者<canvas>纹理,就好像普通的<img>元素一样。我们得去掉color="red",这样避免和纹理产生混合效果。默认材料颜色是white,所以去掉颜色属性就可以了。

<a-scene>
<a-box src="https://i.imgur.com/mYmmbrp.jpg" position="0 2 -5" rotation="0 45 45"
scale="2 2 2"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>

现在我们将看到一个使用远程图片为纹理的盒子。

boxtextureimage

使用资源管理系统

不过,出于性能考虑我们推荐使用资源管理系统。资产管理系统使浏览器缓存资源更容易(例如,图像,视频,模型),并且A-Frame框架将确保所有的资源都在渲染之前被获取到。

如果我们在资源管理系统里面定义一个<img>,three.js就无需在底层再创建一个<img>。在A-Frame中自行创建 <img>也给了我们更多的控制,让我们在多个实体上重用纹理。同时必要时A-Frame还能自动设置crossOrigin以及其他一些属性。

要将资源管理系统用于图像纹理:

<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>

添加一张背景图

回到<a-sky>,我们可以使用一张图片纹理来获取一个360°背景图,使用src而不是color

<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky src="#skyTexture"></a-sky>
</a-scene>

添加地面

要添加一个地面,我们可以使用 <a-plane>。默认情况下,a-plane是平行于XY轴的。要让它与地面平行,我们需要将它和XZ轴确定的平面平行。我们可以通过旋转负90°来完成,在x轴上旋转。

<a-plane rotation="-90 0 0"></a-plane>

我们希望地面很大,这可以增加widthheight。每个方向长30米:

<a-plane rotation="-90 0 0"></a-plane>

然后我们可以给地面添加一个图像纹理:

<a-assets>
<!-- ... -->
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
<!-- ... -->
</a-assets>
<!-- ... -->
<a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"></a-plane>
<!-- ... -->

要实现格子化效果,我们可以设置repeat属性。 repeat接受2个数字,分别是x和y方向的重复次数(通常称为纹理的U和V)。

<a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
repeat="10 10"></a-plane>

调试光照

我们可以通过<a-light>s来改变场景光照。默认情况下,如果我们不指定任何灯光,A-Frame会帮我们添加一个环境光和一个方向光。否则,场景会是黑色的。一旦我们添加了自己的光源,默认的光源设置将被删除,取而代之的是我们的设置。

我们将添加一个环境光,有淡淡的蓝绿色色调,以配合天空。环境灯光适用于场景中的所有实体(至少得有默认材质)。

我们还将添加一个点光源。点光源就像灯泡,我们可以把它们定位在场景周围,点光源对实体的影响取决于它与实体的距离:

<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky src="#skyTexture"></a-sky>
<a-light type="ambient" color="#445451"></a-light>
<a-light type="point" intensity="2" position="2 4 4"></a-light>
</a-scene>

添加动画

我们可以使用A-Frame内置动画系统来添加动画。动画随时间推移而改变一个数值或者进行插值。我们可以给实体添加 <a-animation>元素,让我们给盒子添加上下漂浮的动画:

<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
<a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
repeat="indefinite"></a-animation>
</a-box>
</a-scene>

我们告诉 <a-animation>