<!DOCTYPE html><html><head><scriptsrc="https://aframe.io/releases/0.7.0/aframe.min.js"></script></head><body><a-scene><!-- blue sky --><a-skycolor="#a3d0ed"></a-sky><!-- camera with wasd and panning controls --><a-entitycameralook-controlswasd-controlsposition="0 0.5 2"rotation="0 0 0"></a-entity><!-- brown ground --><a-boxshadowid="ground"shadow="receive:true"color="#847452"width="10"height="0.1"depth="10"></a-box><!-- start code here --><!-- end code here --></a-scene></body></html>复制代码
Aframe 通过定义基元来简化这个概念,例如 <a-box>,<a-sphere>,<a-cylinder> 以及许多其他基本原理来简化几何体及其材料。首先定义一个绿色球体。在代码的第19行,也就是 <!-- start code here -->之后添加以下内容。
<!-- start code here --><a-spherecolor="green"radius="0.5"></a-sphere><!-- new line --><!-- end code here -->复制代码
其次,有三个轴可以转换对象。 x 轴是水平运动的,当我们向右移动时,x 值会增加。 y 轴垂直运行,y 值随着我们向上移动而增加。 z 轴用垂直你的屏幕,当对象向你移动时,z 值会增加。我们可以沿这三个轴平移,旋转或缩放实体。
例如,要将对象向“右”移动,我们需要增加其x值。要向上旋转对象,我们需要沿 y 轴旋转它。下面我们修改第19行来“向上”移动球体 —— 这意味着你需要增加球体的 y 值。请注意,所有转换都指定为 <x> <y> <z>,意味着要增加其y值,需要增加第二个值。默认情况下,所有对象都位于 0,0,0 位置。在下面添加 position 。
<!-- start code here --><a-spherecolor="green"radius="0.5"position="0 1 0"></a-sphere><!-- edited line --><!-- end code here -->复制代码