构建一个基本的场景

我们先开始构建一个场景使用primitives,它是A-Frame HTML语法的基本构建块. Under the hood, primitives are aliases entities that proxy HTML attribute values to component property values. 捆绑了一些原语等常见用例背景、图像、网格、模型、图片和视频。

添加一个BOX

最简单的场景将会包含一盒原始场景:

<a-scene>
  <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>

就像普通的HTML元素,每个实体的属性映射到一个值。我们可以定义一个颜色,宽度、高度和深度的<a-box>看到更多属性<a-box>和其他几何基元可以接受. check out the common mesh attributes.

一旦我们打开我们的场景,默认控制设置允许我们外观和走动。环顾四周,我们可以拖动鼠标或看在一个移动设备或裂缝。散步,我们可以使用WASD键。然后进入虚拟现实,点击进入虚拟按钮。

转换这个BOX（Transforming the Box）

A-Frame使用右手坐标系大致可以认为:

Positive X-axis as “right”
Positive Y-axis as “up”
Positive Z-axis as going out of the screen towards us

距离的基本单位是米中定义。当设计一个场景虚拟现实,重要的是要考虑现实世界的规模我们创建对象。一个height="100"的box在我们的电脑屏幕中很普通，但在虚拟现实看起来就像一个巨大的100米高的庞然大物。

和基本旋转单元定义在度。确定积极的旋转方向,我们可以指出我们的拇指向下的方向积极的轴,和手指的方向旋度是正方向旋转。

To translate, rotate, and scale the box,我们可以插入position, rotation, and scale components.下面的例子(假设我们定位原点俯视负z轴)将翻译框左/ /回来,向右旋转盒子,盒子左右和前后,和缩小箱子上下:

<a-scene>
  <a-box color="#6173F4" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"></a-box>
</a-scene>

将纹理应用到盒子里

这个盒子没有只是一个平面的颜色。我们可以包装材质的盒子,一个图像或视频使用src。以确保不混合纹理,颜色我们将颜色设置为白色:

<a-scene>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="texture.png"></a-box>
</a-scene>

缓存结构,现场等待加载渲染之前,我们可以把纹理移动到asset management system.我们定义它为<img>标记,给它一个ID,它使用一个选择器:

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture"></a-box>
</a-scene>

动画the Box

我们可以添加一个动画使用内置的动画系统 animation system。动画是通过把一个<a-animation>标记定义为实体动画的一个孩子。让我们有盒子旋转无限期地得到一些运动到我们的场景:

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <a-animation attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
  </a-box>
</a-scene>

与盒子交互

与盒子通过单击或凝视,我们可以使用一个光标的地方作为一个孩子的镜头,使其固定在屏幕上。我们不定义一个相机,现场将注入一个默认的相机,但是在这种情况下,添加一个光标,我们需要定义一个。然后我们能做的就是告诉动画开始当光标单击框，通过排放click事件的盒子,用动画的属性begin事件名称:

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <!-- Animation will only play when the box is clicked. -->
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
  </a-box>

  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

另外,我们可以使用JavaScript香草手动注册一个事件监听器和视觉改变盒当我们看:

var box = document.querySelector('a-box');
box.addEventListener('mouseenter', function () {
  box.setAttribute('scale', {
    x: 4,
    y: 1,
    z: 6
  });
});

或者,我们可以用辅助元素声明注册一个事件处理程序:

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
    <!-- The box will change scale when it emits the mouseenter event. -->
    <a-event name="mouseenter" scale="4 1 6"></a-event>
  </a-box>

  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

灯光the Box

我们可以改变如何点燃现场使用 light primitive，<a-light>默认情况下,现场将注入环境光和定向光(如太阳)。让我们调整的照明条件添加不同种类的光幕:

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <!-- Animation will only play when the box is clicked. -->
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
    <a-event name="mouseenter" scale="4 1 6"></a-event>
  </a-box>

  <!-- New lights. -->
  <a-light type="spot" color="#333" position="-20 0 0" look-at="a-box"></a-light>
  <a-light type="point" color="#AAA" position="0 5 0"></a-light>

  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

给场景添加一个背景

最后,我们可以添加一个背景场景使用sky primitive,<a-sky>可以是背景颜色甚至360度的图像或视频。但是让我们保持简单和使用一个颜色:

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <!-- Animation will only play when the box is clicked. -->
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
    <a-event name="mouseenter" scale="4 1 6"></a-event>
  </a-box>

  <!-- New lights. -->
  <a-light type="spot" color="#333" position="-20 0 0" look-at="a-box"></a-light>
  <a-light type="point" color="#AAA" position="0 5 0"></a-light>

  <a-sky color="#73F7DD"></a-sky>

  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

结束我们的基本场景。一旦我们得到过的新奇将静态对象放置在三维空间在HTML中,我们希望能够添加复杂的外表,行为,和功能。我们可以这样通过using and writing components.。